引言
我们将探究不同widget的功能，查看哪些选项可用于收集哪些类型的数据。
公共属性
widgets既有自己私有属性，也有公共属性，以下是公共属性列表
| 属性名 | 默认值 | 描述 |
|---|---|---|
| autofocus | (false) | 这个值是布尔值，用于指定页面载入时自动确认输入焦点。一个页面中只有一个与表单关联的元素可以指定该值为真 |
| disabled | (false) | 该值是布尔值，用以确定用户是否能与该元素交互。如果该属性未赋值，元素将继承父元素(如fieldset)的设置，如果父元素的是disabled，则该元素也是disabled。 |
| form | 用于确定该widget关联的表单，该属性的值必须是同一文档中表单的id值。这个属性允许你将一个widget放置与表单外。但是，还没有任何浏览器支持该属性 | |
| name | 元素的name，与表单数据一起提交 | |
| value | 元素的默认值 |
文本输入框
文本框是最基本的widget，文本框允许用户输入任何类型的数据。也有一部分文本框只接收某一类型的输入
所有文本框都拥有以下行为：
- 可以被标志为 只读（readonly） 或 不可用（disabled）
- 可以有占位符（placeholder），用以说明。
- 可以指定文本框的大小，可输入的最大字符数
- 从拼写检查中获益（？）
单文本框
创建方法：<input type = "text">
<input>元素的默认类型是text，当浏览器不支持所设定的类型时（如type = "date"），type值也会被设为text。
一个简单地例子：
<input type = "text" id = "comment" name = "comment" value = "I am a text field>
当文本框有一个约束（constraint）：浏览器会在传输数据前移除换行符。
HTML5新增了type 的取值，在普通的文本框内有更多的限制。
E-mail address field
<input type = "email" name = "email" multiple>
这个属性限定用户只能输入有效的email地址。
password field
<input type = "password" id = "pwd" name = "pwd">
该文本框将使用*覆盖显示输入
search field
<input type = "search" id = "search" name = "search">
该类型的文本框与普通文本框在样式上有一点不同，此外，该文本框的末尾会有一个"x"，方便用户清除输入。
phone number field
<input type = "tel" id = "phone" name = "phone">
该文本框并没有任何限制（因为世界上的电话号码格式多种多样），只提供语义。典型的应用场景是在某些手机识别到该文本框时，提供方便输入电话号码的键盘。
URL field
<input type = "url" id = "url" name = "url">
限制用户输入正确的URL
多行文本框
<textarea cols = "30" rows = "30"></textarea>
相比于单行文本框，多行文本框在发送数据时允许换行符
<textarea> 元素的属性
| 属性名 | 默认值 | 描述 |
|---|---|---|
| cols | 20 | 文本框的可视宽度 |
| rows | 文本的可视行数 | |
| wrap | soft | 控件如何包裹文本，可能的取值：hard和soft |
下拉列表
HTML主要有两种类型的下拉列表
- select box
- autocomplete box
select box
<select id = "simple" name = "simple">
<option>香蕉</option>
<option selected>樱桃</option>
<option>柠檬</option>
</select>
使用<option> 的 selected 属性可以设定select box的默认值。
如果一个<option> 拥有value 属性，那么该值将会随着表单一起提交，没有value 属性时，将会使用<option> 元素的内容。
multiple choice select box
给select 元素加上multiple 属性之后，就可以选择多行文本（需按住ctrl/cmd）
<select multiple id = "simple" name = "simple">
<option>香蕉</option>
<option selected>樱桃</option>
<option>柠檬</option>
</select>
自动填充
<input type = "text" list = "suggestion">
<datalist id = "suggestion">
<option>苹果</option>
<option>香蕉</option>
</datalist>
复选/单选 按钮
- check box（复选框）
- radio button（单选框）
<inout type = "checkbox" checked id = "aaa" name = "aaa" value = "aaa">
<input type = "radio" checked id = "bbb" name = "bbb"
当一组radio button拥有相同name 值时，它们中只有一个可以被选中（单选）。
button
- submit
- reset
- anonymous
高级表单widget
numbers
<input type = "number" name = "age" id = "age" min = "1" max = "10" step = "2">
sliders
<input type = "range" name = "beans" id = "beans" min = "0" max = "500" step = "3">
日期，时间选择器
date
<input type = "date" name = "date" id = "date">
datetime-local
<input type = "datetime-local" name = "datetime" id = "datetime">
month
<input type = "month" name = "month" id = "month">
time
<input type = "time" name = "time" id = "time">
week
<input type = "week" name = "week" id = "week">
只有少数浏览器支持日期和时间选择器
颜色选择器
<input type = "color" name = "color" id = "color">
其它一些widget
文件选择器
<input type = "file" name = "file" id = "file" accept = "image/*" multiple>
隐藏内容
同表单一起发送至服务器，但不显示给用户
<input type = "hidden" id = "timestamp" name = "timestamp" value = "123456">
image button
<input type = "image" alt = "click me" src = "1.jpg" width = "80" height = "30">
网友评论