HTML 表单用于搜集不同类型的用户输入。标签定义了HTML表单。
<form action="/echo" method="POST" name="myForm">
<p>用户名:<input type="text" name="username">p>
<p>密码:<input type="password" name="password">p>
<p><button type="submit">登录button>p>
form>
form
元素中的属性列表
属性 | 值 | 描述 |
---|---|---|
accept-charset | UTF-8/ISO-8859-1/gb2312 | 规定服务器可处理的表单数据字符集 |
action | URL | 规定当提交表单时向何处发送表单数据 |
method | GET/POST | 规定用于发送表单数据的 HTTP 方法 |
target | _blank/_self(默认)/_parent/_top/framename | 规定在何处打开 action URL |
autocomplete | on/off | 规定是否启用表单的自动完成功能(默认开启) |
name | form_name | 规定表单的名称 |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证 |
说明:
form
元素是块级元素,其前后会产生折行method
属性:
- 如果表单提交是被动的,并且没有敏感信息,一般使用GET(默认方法);其表单数据在页面地址栏中是可见的
- 如果表单正在更新数据或者包含敏感信息,一般使用POST;其安全性更加,在页面地址栏中被提交的数据是不可见的
表单设计要领:
- 帮助用户不出错
- 尽早提示错误
- 扩大选择/点击区域
- 控件较多时要分组
- 主要动作和次要动作
下面一一介绍 HTML 的表单元素。
标签用于搜索用户信息。
元素是最重要的表单元素,它根据不同的
type
属性值有很多形态。
下表列出了type
属性值
type 属性值 |
描述 |
---|---|
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和 “浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符 |
date | 选取日、月、年 |
month | 选取月、年 |
week | 选取周和年 |
time | 选取时间(小时和分钟) |
datetime | 选取时间、日、月、年(UTC 时间) |
datetime-local | 选取时间、日、月、年(本地时间) |
更多HTML5 Input类型请参照该网站。
其他重要属性如下表所示
属性 | 值 | 描述 |
---|---|---|
alt |
text | 定义图像输入的替代文本 |
autocomplete |
on/off | 规定是否使用输入字段的自动完成功能 |
autofocus |
autofocus | 规定输入字段在页面加载时是否获得焦点 |
checked |
checked | 规定此 input 元素首次加载时应当被选中 |
disabled |
disabled | 当 input 元素加载时禁用此元素(变灰) |
maxlength |
number | 规定输入字段中的字符的最大长度 |
max 、min |
number/date | 规定输入字段的最大值、最小值 |
multiple |
multiple | 如果使用该属性,则允许一个以上的值 |
pattern |
regexp_pattern | 规定输入字段的值的模式或格式 |
placeholder |
text | 规定帮助用户填写输入字段的提示 |
readonly |
readonly | 规定输入字段为只读 |
required |
required | 指示输入字段的值是必需的 |
size |
number_of_char | 定义输入字段的宽度 |
src |
URL | 定义以提交按钮形式显示的图像的 URL |
value |
value | 规定 input 元素的值 |
说明:
- 对于
和
,size 属性定义的是可见的字符数。而对于其他类型,size 属性定义的是以像素为单位的输入字段宽度,它是一个可视化的设计属性
- 对于
type
值为checkbox
或radio
的input,可以在其外面添加label
标签,方便勾选操作
<label>
<input type="checkbox" name="fruit" value="apple">苹果
label>
更多关于标签的信息可参照该网站。
定义和用法
select 元素可创建单选或多选菜单。
元素中的
标签用于定义列表中的可用选项。
实例
select
元素中的属性列表
属性 | 值 | 描述 |
---|---|---|
autofocus |
autofocus | 规定在页面加载后文本区域自动获得焦点 |
disabled |
disabled | 规定禁用该下拉列表 |
form |
form_id | 规定文本区域所属的一个或多个表单 |
multiple |
multiple | 规定可选择多个选项 |
name |
name | 规定下拉列表的名称 |
size |
number | 规定下拉列表中可见选项的数目 |
标签还可以与
标签一起使用来把相关的选项组合在一起。
<label>目的城市:label>
<select name="country">
<optgroup label="美洲">
<option>多伦多option>
<option>温哥华option>
<option>旧金山option>
<option>洛杉矶option>
<option>纽约option>
<option>华盛顿option>
<option>里约热内卢option>
optgroup>
<optgroup label="亚洲">
<option>北京option>
<option>上海option>
<option>首尔option>
<option>东京option>
<option>香港option>
optgroup>
<optgroup label="欧洲">
<option>伦敦option>
<option>巴黎option>
<option>马德里option>
<option>柏林option>
<option>雅典option>
optgroup>
select>
说明:
- optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易
- option 元素定义下拉列表中的一个选项(一个条目)
定义和用法
标签定义多行的文本输入控件。
实例
<textarea rows="3" cols="20">
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
textarea>
textarea
元素中的属性列表
属性 | 值 | 描述 |
---|---|---|
autofocus |
autofocus | 规定在页面加载后文本区域自动获得焦点 |
disabled |
disabled | 规定禁用该文本区 |
form |
form_id | 规定文本区域所属的一个或多个表单 |
name |
name | 规定文本区域的名称 |
cols |
number | 规定文本区内的可见宽度 |
rows |
number | 规定文本区内的可见行数 |
maxlength |
number | 规定文本区域的最大字符数 |
placeholder |
text | 规定描述文本区域预期值的简短提示 |
readonly |
readonly | 规定文本区为只读 |
required |
required | 规定文本区域是必填的 |
wrap |
hard/soft | 规定当在表单中提交时,文本区域中的文本如何换行 |
定义和用法
标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
说明:请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”,而其他浏览器中(包括 W3C 规范)的默认值是 “submit”。
实例
更多关于标签的信息可参照该网站。
HTML5 增加了如下表单元素:
定义和用法
元素为
元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
注:
元素的 list 属性必须引用
元素的 id 属性
- 所有主流浏览器都支持
标签,除了 Internet Explorer 和 Safari
实例:通过 设置预定义值的
元素
定义和用法
标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
注:所有主流浏览器都支持
标签,除了 Internet Explorer 和 Safari。
实例
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
form>
keygen
元素中的属性列表
属性 | 值 | 描述 |
---|---|---|
form |
formname | 定义该 keygen 字段所属的一个或多个表单 |
keytype |
disabled | 定义 keytype,rsa 生成 RSA 密钥 |
name |
fieldname | 定义 keygen 元素的唯一名称 |
定义和用法
标签定义不同类型的输出,比如脚本的输出。
注:Internet Explorer 8 以及更早的版本不支持
标签。
实例
output
元素中的属性列表
属性 | 值 | 描述 |
---|---|---|
for |
element_id | 定义输出域相关的一个或多个元素 |
form |
form_id | 定义输入字段所属的一个或多个表单 |
name |
name | 定义对象的唯一名称 |