这是关于HTML5网络表单的三部分系列文章的第一篇。 在介绍样式和客户端JavaScript验证API之前，我们将介绍本文的基本标记。 即使您已经熟悉表单，我还是建议您阅读此书-有许多新属性和陷阱！
HTML表单可能很平凡，但是对于大多数网站和应用程序来说，HTML表单是必不可少的。 在HTML4中，输入字段仅限于：
-
input type="text" -
input type="checkbox" -
input type="radio" -
input type="password" -
input type="hidden"-用户无法查看的数据 -
input type="file"-用于上传 -
textarea更长的文本输入 -
select—用于下拉列表 -
button-通常用于提交表单，尽管也可以使用input type="submit"和input type="image"。
也：
- CSS样式的可能性是有限的，
- 必须使用代码开发自定义控件（例如日期和颜色选择器），并且
- 客户端验证需要JavaScript。
其他HTML5输入类型
大量的新input类型已被引入。 这些提供本机输入帮助和验证，而无需任何JavaScript代码…
| 类型 | 描述 |
|---|---|
email | 输入电子邮件地址 |
tel | 输入电话号码-无需执行严格的语法，但会删除换行符 |
url | 输入网址 |
search | 自动删除带有换行符的搜索字段 |
number | 浮点数 |
range | 用于输入近似值的控件，通常由滑块表示 |
date | 输入日期，月份和年份 |
datetime | 根据当前UTC时区输入日，月，年，小时，分钟，秒和微秒 |
datetime-local | 输入没有时区的日期和时间 |
month | 输入没有时区的月份和年份 |
week | 输入没有时区的星期数 |
time | 输入没有时区的时间 |
color | 指定颜色 |
输入属性
除非另有说明，否则输入字段可以具有以下任何特定于表单的属性。 有一些是布尔属性，也就是说，它们不需要值，例如
<input type="email" name="email" required />尽管您可以添加它们（如果您希望使用更严格的类似XHTML的语法），例如
<input type="email" name="email" required="required" />| 属性 | 描述 |
|---|---|
name | 输入字段名称 |
value | 初始值 |
checked | 检查checkbox或radio输入 |
maxlength | 输入的字符串的最大长度。 这也可以应用于HTML5中的textarea字段 |
minlength | 输入字符串的最小长度。 有记录，但是在撰写本文时，浏览器支持不佳，并且该属性导致HTML验证程序出错。 另一种选择是pattern=".{3,}" ，它至少要强制三个字符。 |
placeholder | 输入框中显示的细微文字提示 |
autofocus | 页面加载时将焦点设置到此（非隐藏）字段 |
required | 表示必须输入一个值 |
pattern | 确保值符合正则表达式 |
min | 允许的最小值（数字和日期类型） |
max | 允许的最大值（数字和日期类型） |
step | 价值粒度。 例如， input type="number" min="10" max="19" step="2"仅允许值10、12、14、16或18。 |
autocomplete | 向浏览器提供自动完成提示，例如“计费电子邮件”，或者可以设置为“开”或“关”以相应地启用和禁用 |
inputmode | 指定输入机制。 最有用的选项：
|
size | text或password输入的字符大小， email ， tel ， url或search输入的像素大小。 最好避免使用，因为您应该使用CSS设置字段样式。 |
rows | 文本行数（仅限textarea ） |
cols | 文本列数（仅限textarea ） |
list | 指向一组数据列表选项 |
spellcheck | 设置为true或false以启用或禁用拼写检查 |
form | 此输入所属表单的ID。 通常，输入应嵌套在form ，但是此属性允许在页面上的任何位置定义输入 |
formaction | 指定一个URI，以在提交时覆盖form操作（仅提交按钮/图像） |
formmethod | 指定GET或POST以在提交时覆盖form方法（仅提交按钮/图像） |
formenctype | 指定提交时的内容类型（仅在提交按钮/图像上使用text/plain ， multipart/form-data或application/x-www-form-urlencoded ） |
formtarget | 指定提交时覆盖form目标的目标窗口/框架（仅提交按钮/图像） |
readonly | 尽管输入值将被验证并提交，但无法更改 |
disabled | 禁用输入-不会进行验证，也不会提交数据 |
请注意， date字段必须始终将YYYY-MM-DD用于value ， min和max属性。
以下示例请求以@ mysite.com结尾且在页面加载时具有焦点的强制性电子邮件：
<input
type="email"
name="login"
pattern="@mysite\.com$"
autocomplete="email"
autofocus
required />资料清单
数据列表包含一组适用于任何类型input选项，例如
<input type="text" name="browser" list="browsers" />
<datalist id="browsers">
<option value="Chrome" />
<option value="Firefox" />
<option value="Internet Explorer" />
<option value="Safari" />
<option value="Opera" />
</datalist> 如果支持datalist ，则在您开始键入时浏览器将显示自动完成选项。 如果双击控件或单击向下箭头（如果显示），通常会显示整个列表。 与标准select下拉菜单不同，用户可以随意覆盖这些选择并输入自己的值。
可以设置值和文本，例如标准选择选项，例如
<option value="IE">Internet Explorer</option>但请注意，实现方式有所不同。 例如，Firefox自动完成文本本身（Internet Explorer），而Chrome则首选值（IE）并以灰色显示文本：
如果您想通过Ajax检索选项，则可以用JavaScript填充数据列表。
禁用验证
可以通过在form元素上设置novalidate属性来禁用整个表单的验证。 或者，您可以在表单的“提交”按钮/图像上设置formnovalidate属性。
还要记住，设置输入的disabled属性将阻止对该字段的验证。
输出栏位
在我们主要讨论输入类型时，HTML5还提供了只读输出选项：
-
output-计算或用户操作的结果 -
progress—进度条（value和max属性定义状态） -
meter—一种刻度，可以根据为属性valuemin，max，low，high和optimum设置的值在绿色，琥珀色和红色之间切换
分隔和标记输入
表单的每个部分都被视为一个段落，通常使用<p>元素将其与其他部分分开
有趣。 我通常使用div尽管我从语义的角度怀疑它是否重要。 p标记较短，尽管您可能需要应用一个类来修改边距。
更重要的是，您应该在输入本身周围或旁边使用标签元素，并使用for属性来声明输入的ID，例如
<p>
<p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" placeholder="first name" required maxlength="20" />
</p>
<p>
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" placeholder="last name" required maxlength="20" />
</p>
<p>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="your@email.address" required maxlength="50" />
</p>
<p>
<label>
<input type="checkbox" name="newsletter" />
Sign up for our newsletter
</label>
</p>没有标准控件
没有特定的界面指南供浏览器供应商遵循。 这是有意的：典型的桌面鼠标控制的日期选择器在移动设备上可能太小，因此供应商可以实现基于触摸的替代方法。
浏览器支持
并非所有浏览器都支持每种输入类型和属性。 通常，大多数来自IE10 +的现代浏览器都包含诸如电子邮件和号码之类的基础知识。 但是，在撰写本文时，Webkit和Blink浏览器仅支持日期类型。
当特定类型时，浏览器将还原为标准text输入，而在不支持这些值时，将忽略属性。
始终使用正确的类型！
为您请求的数据使用正确的输入类型很重要。 这似乎很明显，但是当您尝试使用标准文本输入时，您会遇到一些情况。
考虑日期。 支持是不完整的，这会导致实现问题：
- 无论日期选择器在您的语言环境中如何显示，标准
date输入始终以YYYY-MM-DD格式返回日期。 - IE和Firefox将退回到标准
text输入，但是您的用户可能希望以US MM-DD-YYYY或欧洲DD-MM-YYYY格式输入值。 - JavaScript日期选择器（如jQuery UI中的日期选择器）使您可以定义自定义格式-甚至是YYYY-MM-DD以确保一致性-但您不能保证将启用JavaScript。
最简单的办法是放弃HTML5 date输入，恢复到text和实现自己的日期控件。 别。 您将永远不会创建可在所有设备上以所有屏幕分辨率在所有设备上使用，支持键盘，鼠标和触摸输入并在禁用JavaScript时继续运行的自定义日期选择器。 特别是，移动浏览器通常领先于台式机，并实现良好的触摸屏控制。
HTML5输入类型是未来。 使用它们，并在需要良好跨浏览器支持的情况下（如有必要）添加JavaScript polyfills。 但是请记住...
验证服务器端
无法保证浏览器验证。 即使您强迫所有人使用最新版本的Chrome进行访问，也无法阻止：
- 浏览器错误或JavaScript错误导致数据无效
- 用户使用浏览器工具更改HTML或脚本
- 来自您无法控制的系统的提交，或
- 浏览器和服务器之间的数据拦截（一定是通过HTTP）。
客户端验证永远不会，也永远不会替代服务器端验证。 验证服务器上的用户数据至关重要。 在客户端上，这是一个不错的选择 。
最后，请记住日期可能以YYYY-MM-DD或您指定给用户的任何格式（MM-DD-YYYY，DD-MM-YYYY等）接收。检查前四个字符中的数字或使用母语/框架日期解析方法（如有必要）。
我们在本文中介绍了很多内容。 在下一部分中，我们将讨论与表单相关的CSS属性。
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
