在HTML5中，几个新的表单字段已添加到HTML4中的现有表单字段中。这些表单字段旨在接收特殊类型的数据，例如电子邮件地址，URL，日期等，并带有内置的浏览器验证。这意味着我们不再需要使用JavaScript来验证它们或者生成它们。

HTML5表单字段还具有一组新属性。这些属性在本文结尾处介绍。

顺便说一句，我还有一个关于如何使用CSS设置表单样式的教程。

浏览器支持

并非所有浏览器都支持所有这些表单字段。每个表单字段均带有一个实时示例。如果浏览器尚不支持此表单字段，它将显示为普通文本字段。

电子邮件字段

电子邮件输入字段可以接受文本输入，并验证输入是否为有效的电子邮件地址。我们可以使用type =" email"属性将输入字段指定为电子邮件字段，如下所示：

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

这是一个实时示例。尝试输入电子邮件地址或者非电子邮件地址，按Enter键，然后查看浏览器显示的内容。

网址字段

URL字段可以接受文本输入，并验证输入是否为有效URL。我们可以使用type =" url"属性将输入字段指定为URL字段，如下所示：

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

这是一个实时示例。尝试输入URL，按Enter键，然后查看浏览器显示的内容。

数字字段

数字字段可以接受文本输入并验证输入是否为有效数字。浏览器可以通过显示数字键盘(例如，数字键盘)来帮助用户。在手机上。

我们可以使用type =" number"属性将输入字段指定为数字字段，如下所示：

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

这是一个实时示例。尝试输入数字，按Enter键，然后查看他们的浏览器说什么。

数字字段属性

数字字段还可以使用三个属性，这些属性会影响可以选择的数字。这些属性是：

• min
• max
• step

" min"属性设置该字段接受的最小数量。 " max"类似地设置最大接受数。 " step"属性可设置在数字字段中单击向上和向下箭头时应增加的数字的步数。这是一个代码示例：

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

这是一个实时示例。尝试单击箭头，看看会发生什么。

范围字段

范围字段的使用类似于数字字段，但没有滑动箭头来选择值，而是使用滑块。

我们可以使用type =" range"属性将输入字段指定为范围字段，如下所示：

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

这是一个实时示例。尝试移动滑块，然后单击按钮以查看范围字段的值。

如我们所见，范围字段的值的范围是0到100。

范围字段属性

范围字段还有三个可以使用的属性，它们会影响滑块可以选择的数字。这些属性是：

范围字段

" min"属性设置我们可以选择的最小数量。 " max"类似地设置范围的最大数目。 " step"属性在移动滑块时设置范围字段中值的增量。这是一个代码示例：

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

这是一个实时示例。尝试移动滑块，然后单击按钮以查看范围字段的值。

如我们所见，范围字段的值现在在100到200之间变化，以2为增量。

电话字段

tel字段用于电话号码。与数字字段不同，电话字段可以在数字之间包含空格，但仍然不能包含字母。

我们可以使用type =" tel"属性将输入字段指定为tel字段，如下所示：

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

这是一个实时示例。尝试输入电话号码，按Enter键，然后查看他们的浏览器说什么。

搜索字段

搜索字段用于输入网站搜索。搜索字段可以显示以前的搜索词的历史记录，以使搜索更加容易。

我们可以使用type =" search"属性将输入字段指定为搜索字段，如下所示：

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

这是一个实时示例。尝试输入搜索字词，按Enter键，然后查看他们的浏览器说什么。

注意：当我们单击Enter时，浏览器可能会刷新页面。但是，然后向下滚动到搜索字段，尝试输入上一个搜索词的第一个字母，然后查看浏览器给建议。

日期字段

日期字段可以接受文本输入，并验证输入是否为有效日期。我们可以使用type =" date"属性将输入字段指定为日期字段，如下所示：

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

这是一个实时示例。尝试输入日期，按Enter键，然后查看浏览器显示的内容。

时间字段

时间字段可以接受文本输入，并验证输入是否为有效时间。时间字段允许输入0到23之间的小时，以及0到59之间的分钟。我们可以使用type =" time"属性将输入字段指定为时间字段，如下所示：

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

这是一个实时示例。尝试输入一次时间，按Enter键，然后查看他们的浏览器说什么。

日期时间字段

datetime字段可以接受文本输入，并验证输入是否为有效的日期和时间。我们可以使用type =" datetime"属性将输入字段指定为日期字段，如下所示：

<input type="datetime" name="datetimeField"/>

这是一个实时示例。尝试输入日期和时间，按Enter键，然后查看他们的浏览器说什么。

月字段

month字段可以接受文本输入，并验证输入是否为有效月份。月份可以在1到12之间。浏览器还可以通过以文本表示形式显示月份列表(帮助用户选择自己的语言)来帮助用户选择月份。

我们可以使用type =" month"属性将输入字段指定为日期字段，如下所示：

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

这是一个实时示例。尝试输入一个月，按Enter键，然后查看他们的浏览器说什么。

周字段

周字段可以接受文本输入，并验证输入是否为有效周。周可以在1到53之间。浏览器还可以通过显示某种日历小部件来帮助用户选择有效的周。某些年份有52周，有些年份有53周。浏览器可以确保所选的星期数确实存在于给定的年份中。

我们可以使用type =" week"属性将输入字段指定为日期字段，如下所示：

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

这是一个实时示例。尝试输入一周时间，按Enter键，然后查看他们的浏览器说什么。

颜色字段

颜色字段用于选择颜色，例如在绘图程序中。

我们可以使用type =" color"属性将输入字段指定为颜色字段，如下所示：

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

这是一个实时示例。

组合框字段

组合框字段实际上只是一个文本字段，我们可以其中关联选项列表。这是你的写法：

<input type="text" name="comboBoxField" list="comboBoxList">

<datalist id="comboBoxList">
    <option label="Anna">
    <option label="John">
    <option label="Xavier">
</datalist>

注意"输入"字段的"列表"属性。 list属性的值是datalist元素的id。这样，浏览器就知道datalist元素应与input字段相关联，并用作自动完成在text字段中写入的文本的选项。

" datalist"元素包含一个" option"元素的列表，每个元素都包含一个" label"属性。标签属性是当用户在文本字段中输入文本时在自动完成选项中使用的选项的值。

我们也可以在类型为email和url的输入字段中使用list属性和datalist元素。

这是上面的示例代码，是一个实时示例。尝试输入姓名Anna，John或者Xavier之一，然后查看输入时会发生什么。

新属性

HTML5中也添加了一组新的表单字段属性。以下各节将介绍它们中的每一个。

自动获取焦点

" autofocus"属性使我们可以指定在加载页面时应自动为哪个字段赋予焦点。在任何给定的页面上，我们只能有一个这样的字段。例如，搜索字段或者登录框中的字段之一。

autofocus属性可以与任何类型的表单字段一起使用。这是一个例子：

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

占位符

" placeholder"属性提供了一种在用户在字段中键入任何内容之前指定要在表单字段中显示的值的方法。一旦用户开始键入，占位符值就会消失。

"占位符"属性可以与任何接受文本输入的表单字段一起使用。这是一个例子：

<input type="text" name="textField" placeholder="Type in here">

required必需的

" required"属性指定需要一个给定的属性。意味着在给定字段中输入值之前无法提交表单。这是一个例子：

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

请注意，我们不必为属性提供值。它的存在就足够了。

multiple属性

" multiple"属性表示该字段中允许多个值。例如，"电子邮件"字段可以包含多个电子邮件地址，以逗号分隔。

" multiple"属性还可以与文件上传字段(" type =" file"")一起使用，从而允许用户上传多个文件。

pattern模式

使用pattern属性可以指定一个正则表达式模式，给定输入字段中的文本类型必须匹配该模式。我将不在这里解释正则表达式。这是一个例子：

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

本示例设置一个模式，该模式匹配A和Z之间的一个字符以及0到9之间的数字。

所使用的正则表达式语法与JavaScript相同，但是开头是隐式的" ^"，结尾是" $"。这两个字符与输入的开头和结尾匹配，但是现在我们不必每次都添加它们。

自动完成

autocomplete属性可用于向浏览器发送信号，表示可以自动完成给定的输入字段。这很可能不是我们会经常使用的属性。

最小min和最大max

" min"和" max"属性限制了输入字段允许的输入。我们可以将这些属性用于设置"数字"字段允许的最小和最大数字，或者"日期"字段允许的最小和最大日期。

我们不需要同时拥有min和max属性。我们也可以只使用" min"或者" max"属性之一。

step

step属性用于设置多少，例如每次单击箭头按钮或者移动滑块时，"数字"或者"范围"字段都会增加。

也可以将step属性与值字段any一起使用，以指定可以使用非常精细的粒度(例如毫秒)来设置时间。

form

form属性用于将表单字段与未嵌套其中的form元素相关联。这是一个例子：

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

注意最后一个"范围"字段。它被放置在form元素之外。 "范围"字段的"表单"属性指向"表单"元素的" id"。这样，即使输入字段未嵌套在form元素内，浏览器也知道此输入字段属于该表单。