HTML 表单的简单介绍

2018-01-07 本文已影响13人唐喑喑

HTML 表单用于搜集不同类型的用户输入

一、<form>元素

定义 HTML 表单

<form action='' mehtod=''>
/* form elements */
</form>

表单属性

action：提交表单时，向何处发送数据，取值有

（1）绝对或相对url，一般指向服务器的一个处理程序

（2）使用mailto协议的url地址，表单会以电子邮件形式发送，比较少见

（3）空值，提交给当前页面

method：提交数据的处理方式，常用是GET，POST

（1）GET提交：浏览器会将表单数据以?name=value&name=value格式附在action指定的url后。由于url长度限制，通常get传送的数据量在1kb以下

（2）POST提交：浏览器将数据作为http请求的一部分发送给服务器，数据量不受限制

target：规定在何处显示返回结果，取值有_blank（在新窗口打开）， _self（当前框架下打开，默认）， _parent（父级框架中打开）， _top（顶级窗口中打开）
title：鼠标停留时浮现文本
enctype：对表单数据进行编码，默认为“application/x-www-form-urlencoded”
name：name属性是与服务器通信时使用的名称，而id属性是浏览器使用的名称

二、表单内部元素

单行输入 <input type='text' value='文本信息'>

主要属性

size：文本框宽度，以字符为单位，缺省值是20
value：文本框的值
maxlength：用户输入的最大字符长度
readonly：只读，用户将不可改变文本框的值
disabled：禁用，将不能获得文本框焦点，也不能改变值，且提交时此内容不会发送

密码输入 <input type='password' value='123'>

单选按钮 <input type='radio'>

通过使用相同name来确定一组单选按钮，添加checked属性可使其默认选中

<input type='radio' name='sex' value='男' checked>男
<input type='radio' name='sex' value='女'>女

复选按钮 <input type='checkbox'>

通过相同name确定一组复选按钮，添加checked属性可使其默认选中

<input type='checkbox' name='hobby' value='sing' checked>唱歌
<input type='checkbox' name='hobby' value='read'>读书
<input type='checkbox' name='hobby' value='run'>跑步

隐藏域 <input type='hidden' value='123'>

主要用来隐藏不需要显示的信息，提交时也会被发送给服务器

文件上传 <input type='file' accept='image/png' multiple='multiple'>

使用此元素，form的enctype必须为multipart/form-data，method为POST。accept属性用来选择可上传文件的类型，multiple属性可选择多个文件

常见MIME类型

后缀名	MIME名
css	text/css
js	text/javascript, application/javascript
doc	application/msword
xls	application/vnd.ms-excel
gif	image/gif
html	text/html
jpeg	image/jpeg
jpg	image/jpeg
png	image/png
svg	image/vnd.svf
json	application/json
mp3	audio/mpeg
mp4	audio/mp4, video/mp4
ogg	application/ogg, audio/ogg
txt	text/plain
zip	aplication/zip

下拉列表 <select></select>

嵌套<option></option>标签使用，默认显示第一个option的值，添加size属性可显示多个

<select size='2'>
    <option value='shanghai'>上海</option>
    <option value='beijing'>北京</option>
    <option value='hangzhou'>杭州</option>
</select>

多行文本输入 <textarea></textarea>

rows，cols属性分别表示高，宽

<textarea cols='30' rows='10'>内容</textarea>

区域标签 <fieldset></fieldset>

将内容划分为一个区域，legend标签是他的标题

<fieldset>
    <legend>xx表单</legend>
    <input type="text">
</fieldset>

提交按钮 <input type='submit' value='提交'>

点击后会将表单数据提交给action指向的地址。提交按钮的name和value不会提交给服务器

重置按钮 <input type='reset' value='重置'>

点击后清空表单内容，重置为初始值。重置按钮的name和value不会提交给服务器

普通按钮 <input type='button'>,<button></button>
图片按钮 <input type='image'>

<input type='image' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515269851725&di=96e2bab5a507a4a19f9fd54c2a1a4f5f&imgtype=0&src=http%3A%2F%2Fimgs.technews.cn%2Fwp-content%2Fuploads%2F2014%2F10%2FBaidu.jpg' alt='图片按钮'>

1-13

以下是HTML5新增元素

type=number <input type='number'>

包含数值的输入域，min，max可控制范围，value是初始值

<input type='number' value='0' min='0' max='10'>

type=range <input type='range'>

包含一定范围内数字值的输入域，滑动条，默认情况下的value范围是0~100

<input type="range" value="5" min="1" max="10"/>

type=date，type=time <input type='date'><input type='time'>

日期，时间选择器控件

<input type="date" value="2018-01-07" />
<input type="time" value="22:52" />

所有时间选择器类型

type类型	值
date	年月日
month	年月
week	年周
time	小时分
datetime	时间、日、月、年（UTC时间）
datetime-local	时间、日、月、年（本地时间）

type=color <input type='color'>

颜色选择器控件

<input type='color' value="#15d86a">

type=search <input type='search'>

搜索域，显示为常规的文本域

type=email <input type='email'>

包含 e-mail 地址的输入域，提交时会自动验证格式

type=url <input type='url'>

包含 url 地址的输入域，提交时会自动验证格式

datalist <datalist></datalist>

实现数据列表下拉效果，列表是通过 datalist 内的 option 元素创建的。把 datalist 绑定到输入域，用输入域的 list 属性必须与 datalist 的 id相同

 列表：<input type="text" list="mydata" placeholder="热门电影排行" />
  <datalist id="mydata">
    <option label="Top1" value="让子弹飞">
    <option label="Top2" value="非诚勿扰2">
    <option label="Top3" value="大笑江湖">
    <option label="Top4" value="赵氏孤儿">
    <option label="Top5" value="初恋这件小事">
  </datalist>

14-21

HTML 表单的简单介绍

表单属性

主要属性

猜你喜欢

热点阅读