一、表单
表单是网页制作中非常重要的内容,是Web开发中实现输入功能的。用户通过表单可以在网页中录入数据、编辑数据。例如登录、注册、修改密码、编辑资料等。在HTML当中,表单使用<form>
标签来定义。<form>
标签包含所有的表单元素,并且会告诉浏览器表达中的数据会提交到哪里,以及使用什么方式发送。
<body>
<form action="success.html" method="post" name="testForm"></form>
</body>
说明:
<form>
标签类似于一个容器标签,上面的这段代码,在浏览器窗口不会有什么视觉上的效果。action
属性指定表单数据将提交到哪个位置,可以使用绝对路径或相对路径。method
属性指定数据发送的方式,有get
和post
两种方式,在表单当中,我们常常使用post
方式。这两种方式的区别如下:
属性值 | 说明 |
---|---|
get | get 在URL中显示传递数据,get 传递的数据小于2K |
post | post 隐藏传递数据,post 传送大量数据 |
- 其他一些常见属性如下:
属性 | 说明 |
---|---|
enctype | 值为application/x-www-form-urlencoded (默认)或multipart/form-data 或text/plain ,规定在提交表单数据之前如何对其进行编码 |
novalidate | 值为novalidate ,如果使用该属性,则提交表单时==不进行验证 == |
二、表单元素
表单的元素由<input>
标签、<textarea>
标签、<select>
标签、<button>
标签、<datalist>
标签等构成。在HTML4版本中表单元素都要包含在<form>
标签中才有效,在HTML5版本中可以放在<form>
标签外,但表单元素需要使用form
属性指明其所属的表单id
。常用表单元素标签的作用及所属版本如下:
标签 | 作用 | 所属版本 |
---|---|---|
<input> | 根据type 属性值的不同,表示多种输入形式 | HTML4 |
<textarea> | 表示多行文本框 | HTML4 |
<select> | 表示下拉框,下列框的条目用<option> 表示 | HTML4 |
<button> | 表示按钮 | HTML5 |
<datalist> | 表示搜索自动补齐列表 | HTML5 |
1、<lable>
标签
<label>
标签为表单元素定义标注(标记),它常常用来显示我们在表单中看到的数据名称。实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-name">用户名称</label>
<input type="text" id="user-name" name="userName" />
</form>
</body>
说明:
<label>
标签中for
属性的值应该和<input>
标签中id
的属性值一致,这两个表单元素就会被关联起来,之后在浏览器中点击<label>
标签时,对应的<input>
标签就会获得焦点,这一特性为用户改进了可用性。
2、<input>
标签
<input>
是最为常见,使用最为频繁的表单元素标签。表单中大部分的数据借由<input>
标签来输入。<input>
标签的语法格式如下:
<input
type="元素类型"
name="元素名称"
value=”元素值”
id="标签唯一标识"
size="元素大小"
maxlength="元素可输入字符的上限"
checked 元素被选中
required="required"
readonly="readonly"
placeholder="提示文本"
pattern="正则表达式"
autofocus=" autofocus " />
说明:
type
属性是<input>
标签中最为重要的属性,type
属性决定了<input>
标签的具体表现形式。而且,根据浏览器的不同或者设备的不同,<input>
标签的具体表现形式可能有所不同。name
属性表示元素的名称,也会作为表单数据提交时的参数名称。value
属性表示元素将要提交的参数值。id
属性表示该<input>
标签的唯一标识。size
属性需要一个数字,表示以字符个数设定的元素宽度。maxlength
属性需要一个数字,表示元素接受字符数的上限。checked
属性表示元素被选中。required
属性表示元素内容不能为空,必填。readonly
属性表示元素内容为可读,此时,元素内容不允许再被编辑。placeholder
属性将会为元素显示一个提示文本。pattern
属性将为元素指定一个正则表达式,输入的内容必须与该正则表达式匹配。autofocus
属性表示在页面加载后,元素自动获取焦点。
1. type=“text”
当<input>
标签的type
属性值为text
时,<input>
标签显示为单行文本框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-name">用户名称</label>
<input type="text" id="user-name" name="userName" placeholder="请输入用户名" value="" />
</form>
</body>
说明:
placeholeder
属性的值会作为提示信息,出现在文本框中,提示用户输入,但不会影响客户的输入值。value
属性中的值为表单提交时传递到<form>
标签action
属性指定地址的参数值,我们在浏览器文本框中输入文字时,实质是在为value
属性赋值。
2. type=“password”
当<input>
标签的type
属性值为password
时,<input>
标签显示为密码框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-pass">用户密码</label>
<input type="password" id="user-pass" name="userPass" placeholder="请输入用户密码" value="" />
</form>
</body>
说明:
- 用户在密码框中进行输入时,浏览器会自动隐藏输入的文字。
3. type=“radio”
当<input>
标签的type
属性值为radio
时,<input>
标签显示为单选按钮。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
用户性别<br/>
<label for="user-gender-male">男</label>
<input type="radio" id="user-gender-male" name="userGender" value="1" checked />
<label for="user-gender-female">女</label>
<input type="radio" id="user-gender-female" name="userGender" value="0" />
</form>
</body>
说明:
- 单选按钮经常同时出现多个,当多个单选按钮的
name
属性一样时,为一组单选按钮,一组单选按钮同时只能选中其中1
个。 - 在单选按钮中添加
checked
属性时,表示该单选按钮默认选中,checked
是checked="checked"
的简写形式。
4. type=“checkbox”
当<input>
标签的type
属性值为checkbox
时,<input>
标签显示为复选框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
个人爱好<br/>
<label for="user-hobby-basketball">篮球</label>
<input type="checkbox" id="user-hobby-basketball" name="userHobby" value="0" checked />
<label for="user-hobby-football">足球</label>
<input type="checkbox" id="user-hobby-football" name="userHobby" value="1" />
<label for="user-hobby-volleyball">排球</label>
<input type="checkbox" id="user-hobby-volleyball" name="userHobby" value="2" />
<label for="user-hobby-badminton">羽毛球</label>
<input type="checkbox" id="user-hobby-badminton" name="userHobby" value="3" />
</form>
</body>
说明:
- 复选框经常同时出现多个,当多个复选框的
name
属性一样时,为一组复选框,一组复选框同时可以选中一个、多个或都不选。 - 在复选框中添加
checked
属性时,表示该单选按钮默认选中。
5. type=“file”
当<input>
标签的type
属性值为file
时,<input>
标签显示为文件域。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-header">用户头像</label>
<input type="file" id="user-header" name="userHeader" accept=".jpg,.png"/>
</form>
</body>
说明:
- 文件域会自带一个按钮,点击之后会弹出文件选择框。
accept
属性接受一个逗号分隔的MIME
类型字符串,用于限制允许上传的文件类型。下面是几个例子:
属性值 | 说明 |
---|---|
accept="image/png" 或accept=".png" | 只接受 PNG 图片 |
accept="image/png, image/jpeg" 或accept=".png, .jpg, .jpeg" | 接受PNG 和JPEG 文件 |
accept="image/*" | 接受任何图片文件类型 |
6. type=“submit”
当<input>
标签的type
属性值为submit
时,<input>
标签显示为提交按钮。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<input type="submit" value="提交" />
</form>
</body>
说明:
- 提交按钮在点击后,会触发所在表单的提交事件。所谓提交,就是将表单中用户输入的数据打包,发送给
<form>
标签action
属性所指向的地址。 - 提交按钮的
value
属性值会显示在按钮上。
7. type=“reset”
当<input>
标签的type
属性值为reset
时,<input>
标签显示为重置按钮。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-name">用户名称</label>
<input type="text" id="user-name" name="userName"
placeholder="请输入用户名" value="" />
<br/>
<label for="user-pass">用户密码</label>
<input type="password" id="user-pass" name="userPass"
placeholder="请输入用户密码" value="" />
<br/>
<input type="reset" value="重置" />
</form>
</body>
说明:
- 重置按钮在点击后,会触发所在表单的重置事件,所谓重置,就是将表单中用户输入的数据全部清空,使表单恢复到初始化状态。
8. type=“button”
当<input>
标签的type
属性值为button
时,<input>
标签显示为普通按钮。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<input type="button" value="按钮" />
</form>
</body>
说明:
- 普通按钮在点击后,默认什么都不会发生,需要使用客户端脚本(通常为JavaScript)来自定义普通按钮点击之后所要执行的事件。
9. type=“image”
当<input>
标签的type
属性值为image
时,<input>
标签显示为图片按钮。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<input type="image" src="images/submit.png" />
</form>
</body>
说明:
- 图片按钮的
src
属性用来指定一张图片,该图片会显示在按钮上。 - 图片按钮在点击后,也会触发表单的提交事件。
10. type=“hidden”
当<input>
标签的type
属性值为hidden
时,<input>
标签为隐藏域。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<input type="hidden" name="userId" id="user-id" value="10021"/>
</form>
</body>
说明:
- 隐藏域对于用户是不可见的,这里不再展示页面浏览效果。
- 隐藏域常常存储默认值,或者由客户端脚本(通常为JavaScript)改变它们的值。
11. type=“search”
当<input>
标签的type
属性值为search
时,<input>
标签显示为搜索框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="search-param">搜索</label>
<input type="search" id="search-param" name="searchParam" />
</form>
</body>
说明:
- 搜索框看起来像是一个文本框,可以输入一行普通的文本,从语义上来说,它可以表示一个搜索框。
12. type=“email”
当<input>
标签的type
属性值为email
时,<input>
标签为一个电子邮件地址输入框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-email">用户电子邮箱</label>
<input type="email" id="user-email" name="userEmail" required/>
<br />
<input type="submit" value="提交" />
</form>
</body>
说明:
- 电子邮件地址输入框的页面浏览效果与普通文本框基本相同。但从语义上,要求输入一个电子邮箱地址。
- 表单提交时,浏览器会对电子邮件地址输入框进行校验,检查用户输入的字符串是否是一个合法的电子邮箱地址,如不合法,表单不会被提交,并且浏览器页面将会进行提示,提示信息及显示方式会因为浏览器或设备的不同而不同。
- 这里还演示了
required
属性,该属性是<input>
标签的通用属性,表示该表单元素内容不能为空,要求用户必须填写,浏览器会进行相应的校验。required
是required="required"
的简写形式。 - 在移动端的浏览器上,当电子邮件地址输入框获得焦点时,会唤醒一个比较方便用户输入电子邮件的定制键盘。
13. type=“url”
当<input>
标签的type
属性值为url
时,<input>
标签为一个URL输入框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="company-url">公司官网</label>
<input type="url" id="company-url" name="companyUrl"/>
<br />
<input type="submit" value="提交" />
</form>
</body>
说明:
- URL输入框的页面浏览效果与普通文本框基本相同。但从语义上,要求输入一个URL地址。
- 浏览器会对URL输入框中输入的值进行校验。
- 在移动端的浏览器上,当电子邮件输入框获得焦点时,会唤醒一个比较方便用户输入URL的定制键盘。
14. type=“tel”
当<input>
标签的type
属性值为tel
时,<input>
标签为一个电话号码输入框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="company-tel">公司电话</label>
<input type="tel" id="company-tel" name="companyTel"/>
</form>
</body>
说明:
- 电话号码输入框的页面浏览效果与普通文本框基本相同。但从语义上,要求输入一个电话号码。
- 按HTML5的标准,浏览器应该对电话号码输入框中的输入内容进行校验,但遗憾的是,由于种种现实困难,至今大多浏览器并没有实现这一点,因此,这里我们不再展示页面浏览效果。
15. type=“number”
当<input>
标签的type
属性值为number
时,<input>
标签为一个数值输入框。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="num">数字</label>
<input type="number" id="num" name="num"/>
</form>
</body>
说明:
- 数值输入框在不同的浏览器或设备上表现形式不同,一般会有一组上下箭头,用来控制数字输入框中的数值大小。
- 数值输入框不会响应键盘上字母等按键的点击事件。
- 在移动端浏览器上,当数字输入框获得焦点时,会唤醒一个定制的数字键盘,方便输入数字。
16. type=“range”
当<input>
标签的type
属性值为range
时,<input>
标签为一个数值范围滑动条。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="num-range">数字范围</label>
<input type="range" id="num-range" name="numRange"/>
</form>
</body>
说明:
- 一个简单的数值范围滑动条并不能告诉我们现在它代表的数字是多少。需要配合
<output>
标签和客户端脚本(通常为JavaScript)使用。
实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="num-range">数字范围</label>
<input type="range" id="num-range" name="numRange"
min="0" max="10" onchange="x.value=this.value"/>
<output name="x"></output>
</form>
</body>
说明:
min
属性和max
属性表示可以选择的最小和最大值。onchange
是一个JavaScript事件,表示该元素发生了变化;代码x.value=this.value
表示将name
属性值为x
的元素的value
属性值赋值为当前元素的value
属性值。
17. type=“date”
当<input>
标签的type
属性值为date
时,<input>
标签为一个日期选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="date-param">日期</label>
<input type="date" id="date-param" name="dateParam" />
</form>
</body>
说明:
- 当
type
属性值为data
、month
、week
、time
、datetime
等的时候,移动端浏览器上也会出现一个适应于移动设备的日期、月份、星期、时间等的选择组件,不同浏览器或设备显示效果略有不同,但通常效果都会比较酷炫。 - 当
type
属性值为data
、month
、week
、time
、datetime
等的时候,元素都不会响应键盘上字母等按键的点击事件。
18. type=“month”
当<input>
标签的type
属性值为month
时,<input>
标签为一个月份选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="month-param">月份</label>
<input type="month" id="month-param" name="monthParam" />
</form>
</body>
19. type=“week”
当<input>
标签的type
属性值为week
时,<input>
标签为一个星期选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="week-param">星期</label>
<input type="week" id="week-param" name="weekParam" />
</form>
</body>
20. type=“time”
当<input>
标签的type
属性值为week
时,<input>
标签为一个时间选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="time-param">时间</label>
<input type="time" id="time-param" name="timeParam" />
</form>
</body>
21. type=“datetime”
当<input>
标签的type
属性值为datetime
时,<input>
标签为一个UTC日期时间选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="datetime-param">UTC日期时间</label>
<input type="datetime" id="datetime-param" name="datetimeParam" />
</form>
</body>
说明:
- 很遗憾,当前,很多浏览器的UTC日期时间选择组件显示效果与普通文本框基本相同,并没有实现对应的UTC日期时间选择的效果。但从语义上,要求输入日期时间字符串。这里不再展示页面浏览效果。
22. type=“datetime-local”
当<input>
标签的type
属性值为datetime-local
时,<input>
标签为一个本地日期时间选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="datetime-local-param">本地日期时间</label>
<input type="datetime-local" id="datetime-local-param" name="datetimeLocalParam" />
</form>
</body>
23. type=“color”
当<input>
标签的type
属性值为color
时,<input>
标签为一个颜色选择组件。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="color-param">颜色</label>
<input type="color" id="color-param" name="colorParam" />
</form>
</body>
3、<textarea>
标签
<textarea>
标签表示文本域,即是一个多行的文本框。<input>
标签所代表的文本框只能接收少量的单行文本,而<textarea>
标签表示的文本域可以接收用户输入的多行文本。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-introduction">用户介绍</label>
<textarea id="user-introduction" name="userIntroduction" rows="5" cols="40">
</textarea>
</form>
</body>
说明:
<textarea>
标签必须有开始标签和结束标签,开始标签和结束标签之间的文本便是表单数据提交时对应name
属性的参数数值。id
属性表示该<textarea>
标签的唯一标识。name
属性表示文本域的名称,也会作为表单数据提交时的参数名称。rows
属性表示文本域初始大小可以包含多少行文本。cols
属性表示文本域初始大小可以包含多少列文本。- 当用户输入的文本超过文本域的初始大小时,会自动添加滚动条。
- 要让文本域中的文本只显示,不可编辑,可以在
<textarea>
标签中添加readonly
属性。
4、<select>
标签
<select>
标签和<option>
标签配合使用,可以表现一个下拉列表框,其中<select>
表示下拉选择框,<option>
表示可选的项。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-hometown">用户家乡</label>
<select id="user-hometown" name="userHometown">
<option value="兰州">兰州</option>
<option value="广州" selected>广州</option>
<option value="苏州">苏州</option>
<option value="杭州">杭州</option>
</select>
</form>
</body>
说明:
<select>
标签中的name
属性值会作为表单数据提交时的参数名称。<option>
标签中的value
属性值为表单提交时的参数值。- 如果需要使某一项默认选中,可以在
<option>
标签中添加selected
属性。selected
是selected="selected"
的简写形式。 - 配合
<optgroup>
标签,可以对选项进行分组,如下
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-hometown">用户家乡</label>
<select id="user-hometown" name="userHometown">
<optgroup label="甘肃省">
<option value="兰州">兰州</option>
<option value="天水">天水</option>
<option value="酒泉">酒泉</option>
</optgroup>
<optgroup label="陕西省">
<option value="西安">西安</option>
<option value="宝鸡">宝鸡</option>
<option value="延安">延安</option>
</optgroup>
</select>
</form>
</body>
<optgroup>
标签中的label
属性用来表示分组的名称。将会显示在下拉列表中,但无法被选择。
5、<button>
标签
在HTML5以前,表单的提交、重置按钮一般由<input>
标签来完成(type="submit"
及type="rest"
)。HTML5中,为了使语义更加清晰,推荐我们使用<button>
标签来实现按钮的功能。在<button>
元素内部,可以放置内容,比如文本或图像。这也是该标签与使用<input>
标签实现按钮在编码时最大的不同之处。
- 实例:
<body>
<form action="success.html" method="post" name="testForm" id="testForm">
<label for="user-name">用户名称</label>
<input type="text" id="user-name" name="userName"
placeholder="请输入用户名" value="" />
<br/>
<label for="user-pass">用户密码</label>
<input type="password" id="user-pass" name="userPass"
placeholder="请输入用户密码" value="" />
<br/>
<button type="submit" formaction="otherSuccess.html" name="subBtn">提交</button>
</form>
<button type="reset" form="testForm" name="resetBtn">重置</button>
</body>
说明:
<form>
标签的id
属性表示该表单的唯一标识。<button>
标签的type
属性表示用来指定该按钮的功能。具体如下:
属性值 | 说明 |
---|---|
type="button" | 普通按钮 |
type="submit" | 提交按钮 |
type="reset" | 重置按钮 |
formaction
属性规定当提交表单时向何处发送表单数据。覆盖form
元素的action
属性。该属性与type="submit"
配合使用。name
属性规定按钮的名称。form
属性规定按钮属于哪一个表单,其属性值应该是一个<form>
标签的id
属性值。上例中,重置按钮即在表单的标签之外,同样可以重置表单。但是,除非页面布局有特殊需要,并不需要也不建议这样做。- 其他一些常见属性介绍如下:
属性 | 说明 |
---|---|
autofocus | 值为autofocus ,表示当页面加载时按钮应当自动地获得焦点 |
disabled | 值为disabled ,表示禁用该按钮 |
formenctype | 覆盖标签的enctype 属性,该属性与type="submit" 配合使用 |
formmethod | 覆盖标签的method 属性,该属性与type="submit" 配合使用 |
formnovalidate | 值为formnovalidate 。如果使用该属性,则提交表单时不进行验证,覆盖<form> 标签的novalidate 属性,该属性与type="submit" 配合使用 |
6. <datalist>
标签
<datalist>
标签为其他输入控件提供一个预定义的选项列表,方便其他输入控件选择输入。
- 实例:
<body>
<form action="success.html" method="post" name="testForm">
<label for="user-hometown">用户家乡</label>
<input type="text" id="user-hometown"
name="userHometown" list="citys"/>
<datalist id="citys">
<option value="兰州" />
<option value="广州" />
<option value="苏州" />
<option value="杭州" />
</datalist>
</form>
</body>
说明:
- 当在其他输入控件中进行输入时,
<datalist>
标签便会提供一组输入建议。 - 其他输入控件的
list
属性值和<datalist>
标签的id
值需要一致。 - 请注意与下拉列表框进行区别。