HTML5表格：标记-js教程-PHP中文网

钥匙要点

数据师

禁用验证

HTML5提供了一些增强可访问性的功能。例如，可以使用“必需”属性来确保填写基本字段。“占位符”属性可以向用户提供有关在字段中预期的信息类型的提示。此外，当页面加载时，“自动对焦”属性可以自动将光标聚焦在特定的输入字段上，从而指导用户与表单的互动。

使用HTML5进行表单标记？

首页

web前端

js教程

HTML5表格：标记

Joseph Gordon-Levitt

Feb 21, 2025 pm 12:24 PM

HTML5表格：标记

钥匙要点

HTML5引入了一系列新的输入类型和表格的属性，包括电子邮件，电话，URL，搜索，数字，范围，日期，日期，日期，日期，日期，日期，月份，每月，周，周，时间和颜色，可提供本机输入没有任何JavaScript代码的协助和验证。
> HTML5提供仅读取的输出选项，包括输出（计算或用户操作的结果），进度（进度栏）和仪表（根据属性设置的值可以在颜色之间更改颜色之间的比例）。它还可以使用在输入本身附近或旁边的标签元素，并带有表示输入ID的属性。

这是有关HTML5 Web表单的三部分系列中的第一个。在进行样式和客户端JavaScript验证API之前，我们将介绍本文中的基本标记。我建议您阅读此书，即使您已经熟悉表格 - 有许多新属性和陷阱！ HTML表格可能是平凡的，但对于大多数网站和应用程序至关重要。在HTML4中，输入字段仅限于：

输入type =“ text”

输入type =“复选框”
>输入type =“无线电”
>输入type =“密码”
>输入type =“隐藏” - 对于数据，用户无法查看
>输入type =“ file” - 用于上传
textarea-对于更长的文本条目
选择 - 用于下拉列表
>按钮 - 通常用于提交表单，尽管输入类型=“提交”和输入类型=“ image”。
还：

> CSS样式的可能性有限，

>客户端验证必需的JavaScript。

其他HTML5输入类型

已经引入了大量新输入类型。这些提供本机输入帮助和验证，没有任何JavaScript代码…
> type 描述电子邮件输入电子邮件地址电话输入电话号码 - 没有执行严格的语法，但将删除线路断路 URL 输入URL 搜索带有线断裂的搜索字段自动删除数字浮点号范围输入近似值的控件，通常由滑块表示日期输入一天，月和年 DateTime 根据当前的UTC时区输入日，月，年，小时，分钟，第二和微秒 DateTime-Local 输入没有时区的日期和时间月输入没有时区的月份和年度星期输入没有时区的一周号码时间输入没有时区的时间颜色指定颜色

>输入属性

除非另有说明，否则输入字段可以具有以下任何特定表格特定属性。几个是布尔属性，也就是说，它们不需要值，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

登录后复制

虽然可以添加它们，如果您喜欢更严格的XHTML式语法，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span>

登录后复制

属性描述姓名输入字段名称价值初始值检查检查复选框或无线电输入最大长度输入字符串的最大长度。这也可以应用于HTML5中的TextArea字段最小长度输入字符串的最小长度。这是记录的，但是在撰写本文时，浏览器支持很差，属性会导致HTML验证器出错。替代选项是模式=“。{3，}“这将至少执行三个字符。占位符输入框中显示的微妙文字提示自动对焦当页面加载时，将重点设置为（非隐藏）字段必需的表示必须输入值图案确保价值遵守正则表达式最小允许的最小值（数字和日期类型）最大限度允许的最大值（数字和日期类型）步价值粒度。例如，输入类型=“ number” min =“ 10” max =“ 19”步骤=“ 2”仅允许值10、12、14、16或18。自动完成为浏览器提供了用于自动完成的提示，例如“计费电子邮件”，也可以设置为“ ON”或“ OFF”以相应启用和禁用输入模式指定输入机制。最有用的选项：

逐字 - 非物品内容，例如用户名

拉丁 - 拉丁脚本（例如搜索字段）

拉丁名称 - 名称，即带有首字母大写字母

>拉丁文 - 散文内容，例如消息，推文等。

数字 - 数字输入，其中数字或范围是不合适的，例如信用卡号

尺寸文本或密码输入或像素的字符大小，用于电子邮件，TEL，URL或搜索输入。最好避免使用CSS来样式场。行文本行的数量（仅限文本）科尔斯文本列的数量（仅限文本）列表指向设置的数据师选项拼写检查设置为true或false以启用或禁用拼写检查形式此输入属于的形式的ID。通常，输入应嵌套在表单中，但是此属性允许在页面上任何地方定义输入形式指定URI提交时覆盖表单操作（仅提交按钮/图像） formMethod 提交时指定或发布以覆盖表单方法（仅提交按钮/图像） formenctype 提交时指定内容的类型（文本/平原，多部分/form-data或应用程序/x-www-form-urlCorm-urlCoded仅在提交按钮/图像上）格式提交时指定目标窗口/框架以覆盖表单目标（仅提交按钮/图像）可读尽管将验证和提交输入值，但无法更改输入值禁用禁用输入 - 不会进行验证，并且不会提交数据
请注意，日期字段必须始终使用yyyy-mm-dd进行价值，min和max 属性。
以下示例请求一条强制性电子邮件，该电子邮件在 @mysite.com上结束，并且在页面加载时重点是：

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

登录后复制

数据师

数据学家为任何类型的输入包含一组合适的选项，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span>

登录后复制

当支持数据库时，当您开始键入时，浏览器会呈现自动完成选项。如果双击控件或单击向下箭头，通常会显示整个列表（如果显示）。与标准选择的下拉菜单不同，用户可以自由覆盖这些选择并输入自己的价值。可以设置值和文本，例如标准选择选项，例如

<span><span><span><input</span>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span>

登录后复制

但是请注意，实现不同。例如，文本本身（Internet Explorer）上的Firefox自动填充时，Chrome更喜欢该值（IE）并显示出灰色的文字：
HTML5表格：标记

如果您想通过AJAX检索选项，则数据师可以由JavaScript填充。

禁用验证

可以通过在表单元素上设置一个Novalidate属性来禁用整个表单的验证。另外，您可以在表单的提交按钮/图像上设置formnaloalication属性。还请记住，设置输入的残疾属性将阻止该字段验证。

>输出字段

虽然我们主要讨论输入类型，但HTML5还提供只读输出选项：

>输出 - 计算或用户操作的结果
进度 - 进度栏（值和最大属性定义状态）
米 - 可以根据属性值设置的值，最小，最大，低，高和最佳

分开和标记输入

whatwg.org表格指出：

表格的每个部分都被视为段落，通常使用
元素与其他部分分开有趣的。我通常使用DIV，尽管我怀疑从语义的角度重要。 p标签较短，尽管您可能需要应用课程来修改利润率。更重要的是，您应该使用输入本身附近或旁边的标签元素，并使用属性表示输入的ID，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

登录后复制

没有标准控件

没有供浏览器供应商遵循的特定接口准则。这是有意的：典型的桌面鼠标控制的日期选择器在移动设备上可能太小，因此供应商可以实现基于触摸的替代方案。

>浏览器支持

并非所有浏览器中都支持所有输入类型和属性。通常，来自IE10的大多数现代浏览器都包含电子邮件和编号等基础知识。但是，仅在撰写本文时，仅在Webkit和眨眼浏览器中支持日期类型。当不支持这些值时，当特定类型并忽略属性时，浏览器将恢复为标准文本输入。

始终使用正确的类型！

> 使用正确的输入类型来进行您要求的数据很重要。这似乎很明显，但是当您想使用标准文本输入时，您会遇到情况。考虑日期。支持是零散的，这导致了实施问题：

简单的解决方案是放弃HTML5日期输入，恢复文本并实现您自己的日期控件。不。您将永远不会创建一个自定义日期选择器，该选择器在所有屏幕分辨率的所有设备中都可以使用，支持键盘，鼠标和触摸输入，并在禁用JavaScript时继续操作。特别是，移动浏览器通常位于其桌面表亲之前，并实施良好的触摸屏控件。 HTML5输入类型是未来。使用它们，如有必要，在需要良好的跨浏览器支持的情况下添加JavaScript polyfills。但是记得……

>验证服务器端

不能保证浏览器验证。即使您强迫所有人使用最新版本的Chrome访问您也永远无法阻止：

>浏览器错误或JavaScript失败允许无效数据
用户使用浏览器工具更改HTML或脚本
>

客户端验证永远不会和永远不会代替服务器端验证。验证服务器上的用户数据至关重要。在客户端上，它是一个不错的经常询问有关HTML5表格标记的问题（常见问题解答）

>在表单标记中使用HTML5的重要性是什么？这些新功能允许更具体的输入类型，例如电子邮件，日期和时间，可以通过浏览器本身验证，从而减少了对其他JavaScript的需求。这会导致更清洁，更有效的代码和更顺畅的用户体验。> html5如何改善表单标记的可访问性？

HTML5提供了一些增强可访问性的功能。例如，可以使用“必需”属性来确保填写基本字段。“占位符”属性可以向用户提供有关在字段中预期的信息类型的提示。此外，当页面加载时，“自动对焦”属性可以自动将光标聚焦在特定的输入字段上，从而指导用户与表单的互动。

使用HTML5进行表单标记？

>一个常见的错误是没有正确使用HTML5中引入的新输入类型和属性的一个常见错误。例如，使用错误的输入类型可能会导致提交错误的数据。另一个错误不是为不支持HTML5的较旧浏览器提供足够的后备。对于使用较旧技术的人来说，这可能会导致差的用户体验。

>我如何使用HTML5创建更多的交互式形式？

html5引入了几种可用于创建更多的新形式元素交互式形式。例如，“数据级”元素可用于创建输入字段选项的下拉列表，而“进度”和“仪表”元素可用于视觉上表示任务的进度或在一个内部的当前值已知范围分别。

html5如何处理形式验证？

html5通过使用某些属性引入内置的形式验证。例如，可以使用“必需”属性来确保字段不会空，而“模式”属性可用于指定输入字段值必须匹配的正则表达式。如果输入不符合这些条件，则将不提交表格，并提示用户纠正其输入。

>

>在HTML5中使用语义元素有什么好处HTML5中的元素清楚地表明了其中包含哪种类型的内容，使开发人员和机器（如搜索引擎）都更容易理解一个的结构和内容网页。这可以改善搜索引擎的优化和可访问性。

>如何确保我的HTML5表格与较旧的浏览器兼容？

，而HTML5得到了现代浏览器的广泛支持，很重要的是，为较旧的倒退提供的倒退很重要可能不支持所有HTML5功能的浏览器。这可以通过使用JavaScript检测浏览器是否支持特定功能并提供替代实现。 🎜> HTML5引入了几个可以改善表单移动体验的功能。例如，“自动对焦”属性可用于在页面加载时自动将光标聚焦在特定的输入字段上，从而减少了用户手动点击字段的需求。此外，“电子邮件”和“ tel”等新输入类型在移动设备上提出了专门的键盘，从而使用户更容易输入正确的数据类型。