HTML5教程 | HTML5表单字段

Range类型

range类型用于应该包含一定范围内数字值的输入域，它通过滑块的方式来选择一个范围内的数字值。 你可以通过type="range"来指定一个输入域为Range类型。

<input type="range" name="rangeField"/>                            
                            

下面是上面代码的返回结果，你可以尝试拖动滑块，并通过点击查看按钮来查看对应的数值。

Range类型的属性

Range类型有3个额外的属性，这些参数用于控制滑块上课选择的数值的范围。

• min
• max
• step

min属性设置可以选择的最小数值，max属性设置可以选择的最大数值，step属性设置滑块每次移动的步长值。下面是一个例子：

<input type="range" name="rangeField" min="100" max="200" step="2"/>
                            

上面的Range类型滑块的数值范围在100-200之间，每次移动滑块增加或减少2。

Tel类型

Tel类型用于输入电话号码。和number类型不同，tel类型可以在数字之间包含空白符，但是不能输入字母。

你可以通过type="tel"来指定一个输入域为tel类型。

<input type="tel" name="telField"/>                              
                            

下面是一个例子，你可以在输入框中输入一个电话号码，如010 336699，看看浏览器地址栏的变化。

Search类型

Search类型用于执行网站的搜索功能。搜索类型可以显示以前的搜索历史，通过下拉列表的方式进行展现。

你可以通过type="search"来指定一个输入域为search类型。

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

下面是一个例子。

注意在提交搜索后页面会进行刷新，当你再次进行相同的搜索时，可以只输入第一个字母就会得到提示。

Date类型

Date类型用于选择年月日，点击Date输入框的下拉箭头可以弹出一个日期选择器，你可以通过它来选择日期。你也可以直接输入数字，它会校验你输入的是否是一个合法的日期，非合法的日期是不能输入的。

你可以通过type="date"来指定一个输入域为Date类型。

<input type="date" name="dateField"/>                              
                            

下面是一个例子。你可以试试手动输入一个日期或通过日期选择器来选择日期。

Time类型

Time类型用于选择时间。和Date类型相同，你也可以直接输入时间数值，它会校验你输入的是否是一个合法的时间。Time类型允许小时在0-23之间，分钟在0-59之间。

你可以通过type="time"来指定一个输入域为Time类型。

<input type="time" name="timeField"/>                              
                            

下面是一个Time类型的例子。

Month类型

Month类型可以选择年和月。月的范围在1-12之间，你可以通过选择器来选择月份。

你可以通过type="month"来指定一个输入域为month类型。

<input type="month" name="monthField"/>                              
                            

下面是一个month类型的例子。

Week类型

Week类型用于选择星期。星期的值可以在1-53之间。你可以通过选择器来选择星期的值。一年中可能有52个星期，也可能有53个星期，浏览器会根据年份来判断。

你可以通过type="week"来指定一个输入域为week类型。

<input type="week" name="weekField"/>                              
                            

下面是一个Week类型的例子。

Color类型

Color类型用于选择颜色。你可以通过type="color"来指定一个输入域为color类型。

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

下面是一个Color类型的例子。

新的属性

HTML5还为表单输入域提供了一组新的属性。

autofocus

autofocus属性允许你指定在页面加载之后自动聚焦在哪一个输入域上。一个页面中只能有一个输入域设置这个属性。

autofocus属性可以使用在任何的表单输入域上。下面是一个示例代码。

<input type="text" name="comboBoxField" autofocus>                              
                            

placeholder

placeholder属性可以为表单的输入域提供一个占位字符串，用于说明这个输入域的作用。当用户开始输入的时候，这些占位文字将会消失。

placeholder属性的使用方法如下：

<input type="text" name="textField" placeholder="这里是一串占位文本">                              
                            

上面代码的返回结果如下：

required

required属性表明某个属性值必须给定。也就是说某个指定了required属性的输入字段不能为空，否则表单不能提交。required属性的用法如下：

<input type="text" name="textField" required>                               
                             

注意这个属性不必提供任何值，只填写一个属性即可。

multiple

multiple属性表明这个输入域可以输入多个值。例如email输入域可以包含多个Email地址，可以使用逗号隔开它们。

multiple属性还可以和文件上传域一起使用（type="file"），允许用户上传多个文件。

pattern

pattern属性使你能够指定一个正则表达式模式，此时输入的文本必须符合这个正则表达式模式。下面是一个例子：

<input type="text" name="textField" pattern="[A-Z][0-9]">                               
                             

上面的例子中，正则表达式的模式是第一个字母是A-Z中的任意字母，后面的数字是0-9中的任意数字。

下面是返回结果，你可以输入不是上面正则表达式模式的字符串看看结果。

这里的正则表达式语法和JavaScript正则表达式的语法基本相同，但是它会隐含一个^在表达式的前面，和一个$在表达式的后面。这两个符号会匹配输入的开始和结束字符。

autocomplete

autocomplete属性会自动完成输入。通常是以下拉列表的方式来提示用户可能的输入文本。

min + max

min和max属性用于限制一个输入域的输入。在number输入域中使用minimum和maximum来限制输入的数字。在date域中使用minimum和maximum来限制日期的输入。

你不必同时使用min和max属性，它们可以单独使用。

step

step属性用于设置步长。例如number或range在每次点击箭头后滑动滑块时数值变化的步长。

step属性还可以用于date域中，将它的值设置为any，用于对时间进行微调，如毫秒级。

form

form属性用于将一个输入域和一个表单简写关联，它们并不嵌套在一起。下面是一个例子：

<form id="theForm">
    <input type="text" >
</form>
    
<input type="range" form="theForm">                              
                            

注意上面的range域在表单的外面，通过form="theForm"和表单进行关联。浏览器会把range域作为表单的一部分处理。

返回HTML5教程目录