html5学习17：定制input元素

1、用input元素输入文字

type属性设置为text的input元素在浏览器中显示为一个单行文本框。上一章用到的input元素就是这个样子,这是未设置type属性情况下的默认形式。

text型input元素可用的额外属性

属性	说明
dirname	指定元素内容文字方向的名称
list	指定为文本框提供建议值的datalist元素，其值为datalist元素的id值
maxlength	设定用户可以在文本框中输入的字符的最大数目
pattern	指定一个用于输入验证的正则表达式
placeholder	指定关于所需数据类型的提示
readonly	用来将文本框设为只读以阻止用户编辑其内容
required	表明用户必须输入一个值，否则无法通过输入验证
size	通过指定文本框中可见的字符数目设定其宽度
value	设置文本框的初始值

1.1 设定元素大小

有两个属性能够对文本框的大小产生影响。maxlength属性设定了用户能够输人的字符的最大数目，size属性则设定了文本框能够显示的字符数目。二者的字符数目均以正整数表示。

<input maxlength="10"/>浏览器自行确定该文本框在屏幕占据的宽度，但用户最多只能在其中输入10个字符
<input size="10"/> 浏览器必须确保该文本框的宽度足以显示10个字符，该属性对用户能够输入的字符数目未作限制

1.2 设置初始值和占位式提示

先前的例子中的文本框在文档刚载人时都是空的，不过它们不是非这样不可。设计者可以用value属性设置一个默认值，还可以用placeholder属性设置一段提示文字，告诉用户应该输人什么类型的数据。

<input placeholder="your name" id="name"/>
<input value="apple"/>

1.3 datalist元素，使用数据列表

可以将input元素的list属性设置为一个datalist元素的id属性值,这样用户在文本框中输人数据时只需要从后一元素提供的一批选项中进行选择就行了。

内容可以是option元素和其他一些短语元素。datalist元素提供的值以自动补全建议值的方法呈现，提供给用户选择的值各用一个option元素指定。

option元素允许具有的父元素有datalist,select,optgroup,具有属性：disabled,selected,label,value

<input list="fruitlist" id="fave" name="fave"/>
<datalist id="fruitlist">
	<option value="apples" label="lovely apples"/>
    <option value="oranges">refreshing oranges</option>
</datalist>

使用这种text型input元素时要注意:如果某个option元素的内容或label值与其value值不同，那么用户可能会搞不懂为什么点击Lovely Apples结果却是在文本框中输入Apples。有些浏览器（如Opera)对这种情况采用的处理方式略有不同。

1.4 生成只读或被禁用的文本框

readonly和disabled属性都可以用来生成用户不能编辑的文本框，其结果的外观不同。

disabled属性会让该文本框显示为灰色，不会发给服务器

readonly属性不会影响其外观，会发给服务器

1.5 指定文字方向数据的名称

通过设置dirname属性，可以将用户输入文字的方向数据发送给服务器，该属性的值就是方向数据项的名称。还没有主流浏览器支持这个属性。

2、用input元素输入密码

type属性值设置为password的input元素用于输人密码。用户输人的字符在这种文本框中显示为星号(*)之类的掩饰字符。下面列出input元素在type属性被设置为password时可用的一些额外属性。这些属性text型input元素也有，而且用法相同。

属性	说明
maxlength	设定用户可以在密码框中输人的字符的最大数目
pattern	指定一个用于输入验证的正则表达式
palceholder	指定关于所需数据类型的提示
readonly	将密码框设为只读以阻止用户编辑其中的内容
required	表明用户必须输入一个值，否则无法通过输入验证
size	通过指定密码框中可见的字符数目设定其宽度
value	设置初始密码值

3、用Input元素生成按钮

将input元素的type属性设置为submit、reset和button会生成类似button元素钮。

type属性值	说明
submit	生成用来提交表单的按钮
reset	生成用来重置表单的按钮
button	生成不执行任何操作的按钮

submit型input元素可用的额外属性与button元素的同名属性用法相同。reset和button型input元素没有定义任何额外的属性。

4、用input元素为输入数据把关

input元素的type属性在HTML5中新增的一些值可以对用户输人的数据类型提出更具体的要求。

用于输入受限数据的Input元素的type的属性值

属性	说明
checkbox	将输入限制为在一个“是/否”二态复选框中进行选择
color	只能输入颜色信息
date	只能输人日期
datetime	只能输入带时区信息的世界时（包括日期和时间)
datetime-local	只能输入不带时区信息的世界时（包括日期和时间)
email	只能输入规范的电子邮箱地址
month	只能输入年和月
number	只能输入整数或浮点数
radiobutton	将输入限制为在一组固定选项中进行选择
range	只能输入指定范围内的数值
tel	只能输入规范的电话号码
time	只能输入时间信息
week	只能输人年及星期信息
url	只能输入完全限定的URL

4.1 用input元素获取数值

type属性设置为number的input元素生成的输入框只接受数值。有些浏览器（如Chrome)还会在旁边显示用来上调和下调数值的箭头形小按钮。

number型Input元素可用的额外属性

属性	说明
list	指定为文本框提供建议值的datalist元素。其值为datalist元素的id值。
min	设定可接受的最小值(也是下调按钮〔如果有的话〕的下限)以便进行输入验证。
max	设定可接受的最大值(也是上调按钮〔如果有的话〕的上限)以便进行输人验证。
readonly	用来将文本框设置为只读以阻止用户编辑其内容。
required	表明用户必须输入一个值，否则无法通过输人验证。
step	指定上下调节数值的步长
value	指定元素的初始值

<input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/>

4.2 用input元素获取指定范围内的数值

获取数值的另一种办法是使用range型input元素。用户只能用它从事先规定的范围内选择一个数值。range型input元素支持的属性与number型相同，但二者在浏览器中的显示结果不同。

<input type="range" step="1" min="0" max="100" value="1" id="price" name="price"/>

4.3 用Input元素获取布尔型输入

checkbox型input元素会生成供用户选择是或否的复选框。这种类型的input元素支持的额外属性。

checkbox型input元素可用的额外属性：

属性	说明
checked	设置了该属性的复选框刚显示出来时或重置表单后呈勾选状态
required	表示用户必须勾选该复选框,否则无法通过输入验证。
value	设定在复选框呈勾选状态时提交给服务器的数据值。默认为on

<label for="veggie"> are you vegetarian:<input type="checkbox" id="veggie" name="veggie"/></label>

4.4 用input元素生成一组固定选项

radio型input元素可以用来生成一组单选按钮，供用户从一批固定的选项中作出选择。它适合于可用有效数据不多的情况。

属性	说明
checked	设置了该属性的单选按钮刚显示出来时或重置表单后呈选定状态
required	表示用户必须在一组单选按钮中选择一个，否则无法通过输入验证
value	设定在单选按钮呈选定状态时提交给服务器的数据值

<input type="radio" value="apple" id="apple" name="fave"/>
<input type="radio" value="oranges" id="oranges" name="fave"/>

将name都设置为fave，以便浏览器把他们关联起来，这样选中其中任何一个按钮都会取消另外两个按钮的选择。

4.5 用input元素获取有规定格式的字符串

type属性设置为email、tel和url的input元素能接受的输人数据分别为有效的电子邮箱地址、电话号码和URL。

email型，tel型和url型，input元素可用的额外属性：

属性	说明
list	指定为文本框提供建议值的datalist元素，其值为datalist元素的id值
maxlength	设定用户能够在文本框中输入的字符的最大数目
pattern	指定一个用于输人验证的正则表达式
placeholder	指定关于所需数据类型的提示
readonly	用来将文本框设为只读以阻止用户编辑其内容
required	表示用户必须提供一个值，否则无法通过输人验证
size	通过指定文本框中可见的字符数目设定其宽度
value	指定元素的初始值。对于email型input元素，其值可能是单个邮箱地址，也可能是以逗号分隔的多个邮箱地址

email型input元素还支持一个名为multiple的属性。设置了该属性的input元素可以接受多个电子邮箱地址。

4.6 用input元素获取时间和日期

HTML5中增加了一些input元素的新类型，供用户输人日期和时间。

用来获取时间和日期的input元素类型

type属性值	说明
datetime	获取世界时日期和时间，包括时区信息,例2011-07-19T16:49:39.491Z
datetime-local	获取本地日期和时间（不含时区信息）,例2011-07-19T16:49:39.491
date	获取本地日期（不含时间和时区信息),例2011-07-19
month	获取年月信息（不含日、时间和时区信息),例2011-07
time	获取时间,例16:49:39.491
week	获取当前星期,例2011-W30

4.7 用input元素获取颜色值

color型input元素只能用来选择颜色。list属性。这种input元素中的颜色值以7个字符的格式表示:以#开头，接下来是三个两位十六进制数，它们分别代表红、绿、蓝三种原色的值（如#FF1234)。CSS中的颜色名(如red和black )不能用在这里。

<input type="color" id="color" name="color"/>

5、用Input元素获取搜索用词

search型input元素会生成一个单行文本框，供用户输入搜索用词。这种input元素有点与众不同，它实际上什么事都不做。它既不会对用户输人的数据作出限制，也没有诸如搜索本页或借助用户的默认搜索引擎进行搜索这样的功能。这类input元素支持的额外属性与text型input元素相同。

<input type="search" id="search" name="search"/>

6、用input元素生成隐藏的数据项

有时设计者会希望使用一些用户看不到或不能编辑的数据项,但又要求提父表里时也能符只反送给服务器。下面举个常见的例子。Web应用程序让用户查看并编辑一些数据库记录时，在在需要用一种简便易行的方法将主键保存在网页上以便知道用户编辑的是哪条记录,但是又不想让用户看到它。hidden型input元素可以用来达到这个目的。

<input type="hidden" name="recordID" value="1234"/>

7、用input元素生成图像按钮和分区响应图

image型input元素生成的按钮显示为一幅图像，点击它可以提交表单。

image型input元素可用的额外属性

属性	说明
alt	提供元素的说明文字。对需要借助残障辅助技术的用户很有用
formaction	等价于button元素的同名属性
formenctype	等价于button元素的同名属性
formmethod	等价于button元素的同名属性
formtarget	等价于button元素的同名属性
formnovalidate	等价于button元素的同名属性
height	以像素为单位设置图像的高度（不设置这个属性的话图像将以其本身的高度显示)
src	指定要显示的图像的URL
width	以像素为单位设置图像的宽度（不设置这个属性的话图像将以其本身的宽度显示)

<input type="image" src="accept.png" name="submit"/>

8、用input元素上传文件

最后一种input元素类型是file型,它可以在提交表单时将文件上传到服务器。

file型input元素可用的额外属性：

属性	说明
accept	指定接受的MIME类型。关于MIME类型的定义，参见RFC 2046( http://tools.ietf.org/html/rfc2046)
multiple	设置这个属性的input元素可一次上传多个文件。尚无主流浏览器支持这个属性
required	表明用户必须为其提供一个值,否则无法通过输入验证。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
    <input type="file" name="filedata"/>
</form>