Web 前端学习笔记之 HTML 入门（3）

HTML 表单

HTML 表单用于搜集不同类型的用户输入。<form>标签定义了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	如果使用该属性，则提交表单时不进行验证

说明：

1. form元素是块级元素，其前后会产生折行
2. method属性：
   
   • 如果表单提交是被动的，并且没有敏感信息，一般使用GET（默认方法）；其表单数据在页面地址栏中是可见的
   • 如果表单正在更新数据或者包含敏感信息，一般使用POST；其安全性更加，在页面地址栏中被提交的数据是不可见的

---

表单设计要领:

• 帮助用户不出错
• 尽早提示错误
• 扩大选择/点击区域
• 控件较多时要分组
• 主要动作和次要动作

下面一一介绍 HTML 的表单元素。

---

input 元素

<input>标签用于搜索用户信息。
<input>元素是最重要的表单元素，它根据不同的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 元素的值

说明：

1. 对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度，它是一个可视化的设计属性
2. 对于type值为checkbox或radio的input，可以在其外面添加label标签，方便勾选操作

<label>
    <input type="checkbox" name="fruit" value="apple">苹果
</label>

更多关于<input>标签的信息可参照该网站。

---

select 元素

定义和用法
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
实例

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

select元素中的属性列表

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点
disabled	disabled	规定禁用该下拉列表
form	form_id	规定文本区域所属的一个或多个表单
multiple	multiple	规定可选择多个选项
name	name	规定下拉列表的名称
size	number	规定下拉列表中可见选项的数目

<select>标签还可以与<optgroup>标签一起使用来把相关的选项组合在一起。

<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>

说明：

1. optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易
2. option 元素定义下拉列表中的一个选项（一个条目）

---

textarea 元素

定义和用法
<textarea> 标签定义多行的文本输入控件。
实例

<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 元素

定义和用法
<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

说明：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

实例

<form action="/example/html/form_action.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

更多关于<button>标签的信息可参照该网站。

---

其它表单元素

HTML5 增加了如下表单元素：

• <datalist>
• <keygen>
• <output>

datalist 元素

定义和用法
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。

注：

1. <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性
2. 所有主流浏览器都支持 <datalist> 标签，除了 Internet Explorer 和 Safari

实例：通过 <datalist> 设置预定义值的 <input> 元素

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

keygen 元素

定义和用法
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

注：所有主流浏览器都支持 <keygen> 标签，除了 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 元素的唯一名称

output 元素

定义和用法
<output> 标签定义不同类型的输出，比如脚本的输出。

注：Internet Explorer 8 以及更早的版本不支持 <output> 标签。

实例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 

output元素中的属性列表

属性	值	描述
for	element_id	定义输出域相关的一个或多个元素
form	form_id	定义输入字段所属的一个或多个表单
name	name	定义对象的唯一名称

参考资料

1. w3school