当前位置主页 > 资料库 > 前端教程 > HTML5教程 | HTML5表单字段

HTML5教程 | HTML5表单字段

2015-08-16

HTML5中新增了许多表单输入类型,这些表单字段用于接收特殊的数据类型,例如Email地址,URL,日期等等,并且带有内置的浏览器校验功能。这意味着你不在需要使用javascript来校验它们。这些新的表单输入类型包括:

  • email
  • url
  • number
  • range
  • Tel
  • Date pickers
  • search
  • color
浏览器支持

不是所有的浏览器都支持这些表单输入字段的。在下面的每一个表单输入字段的介绍中都提供一个例子,如果你的浏览器不支持某个表单输入字段,它将显示为一个普通的文本输入框。

Email类型

Email输入类型用于应该包含E-mail地址的输入域,并且可以验证该输入是否是一个有效的Email地址。你可以通过type="email"来指定一个输入域为Email输入域。

<input type="email" name="emailField"/>                              
                            

下面是上面代码的返回结果,你可以尝试输入一个无效的Email地址来看看效果。

URL字段

URL类型接收一串代表URL地址的字符串,并验证该字符串是否为有效的URL地址。你可以通过type="url"来指定一个输入域为URL输入域。

<input type="url" name="urlField"/>                             
                            

下面是上面代码的返回结果,你可以尝试输入一个无效的URL地址来看看效果。

Number类型

Number类型只可以接收数值类型的数据,它会校验输入的字符串是否为一个有效的数值。在手机上使用这个字段会在该输入框聚焦时弹出一个数字键盘让用户选择数字。你可以通过type="number"来指定一个输入域为Number输入域。

<input type="number" name="numberField"/>                              
                            

下面是上面代码的返回结果,你可以尝试输入一个无效的数字来看看效果。

Number类型的属性

Number类型有3个扩展属性,这些属性可以影响用户对数字的选择。这3个属性是:

  • min
  • max
  • step

min属性规定可以选择的最小数值,max属性规定可以选择的最大数值,step属性规定在点击上下箭头按钮时合法的数字间隔,例如step="3",则合法的数是 -3,0,3,6。

<input type="number" name="numberField"
            min="10" max="20" step="2" />                             
                            

上面的代码返回的结果如下,点击输入框中的箭头按钮看看效果。

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

minmax属性用于限制一个输入域的输入。在number输入域中使用minimummaximum来限制输入的数字。在date域中使用minimummaximum来限制日期的输入。

你不必同时使用minmax属性,它们可以单独使用。

step

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

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

form

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

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

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

返回HTML5教程目录
Previous:
上一篇:HTML5教程 | 认识HTML5
Next:
下一篇:HTML5教程 | HTML5数据存储
返回顶部