从历史上看，HTML的形式非常棘手 - 首先，因为至少需要一点点JavaScript，其次，因为没有任何数量的CS可以使它们行为。 但是，在现代网络的情况下，这不一定是正确的，所以让我们学习如何仅使用HTML和CSS标记表单。 钥匙要点 可以仅使用html和css创建>元素创建的，并且数据是使用操作属性提交的。可以使用其他属性（例如enctype和target）来定义数据编码类型以及显示输出的位置。 标签对于可用性和可访问性至关重要，描述了输入的目的。有三种声明标签的方法：相邻标签，ARIA标签和包装标签。最有效的方法是将输入包装在标签中。占位符也可用于提供输入字段中预期的示例。 >有多种输入类型可供选择，例如按钮，复选框，颜色，日期，电子邮件，文件等。由于浏览器默认值，样式输入可能会具有挑战性，但是外观属性可用于覆盖这些属性。输入验证对于确保用户输入符合某些条件至关重要，并且可以使用本机HTML验证或JavaScript实现。 基本结构 从元素开始。 >这里没有什么花哨的。只是覆盖基本结构。 >如果您自然地提交表单数据（也就是说，没有JavaScript），则需要包含操作属性，其中值是您将向您发送表单数据的URL。该方法应取决于您要实现的目标（不要用GET发送敏感数据）。。 >此外，还有较少使用的Enctype属性，该属性定义了发送的数据的编码类型。另外，虽然不一定是表单所特有的属性，但可以用于在新选项卡中显示输出。 基于JavaScript的表单不一定需要这些属性。> >表单由输入组成，这些输入期望数据值。> 参见笔> ... > 表单1 by sitepoint（@sitepoint） 在Codepen上。 包括可提供更好可用性和可访问性的标签 method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 每个输入都需要一个标签。>标签是一个文本描述符，描述了输入的用途。有三种宣布标签的方法，但其中一个优于其他两个标签。让我们现在深入研究这些。 相邻标签 >相邻标签需要最多的代码，因为我们需要明确声明标签所描述的输入。对于大多数人来说，这是违反直觉的，因为我们可以将输入包装在标签内部以实现相同的效果。 话虽如此，相邻的方法在延长的情况下可能是必要的，所以这就是外观：> > ... > >从上面的示例中可以看到，>必须匹配输入的ID属性，而这是对文本描述符属于哪个文本描述符的输入设备的说明输入。然后，输入设备将将其传达给用户（例如，屏幕读取器将通过语音决定它。 aria标签 >语义HTML更好，但ARIA（可访问的互联网应用程序）可以在缺席的情况下进行补偿。在这种情况下，如果没有实际的html ：>，这就是标签的样子 不幸的是，这种方法的缺点是缺乏视觉标签。但是，对于某些标记，这可能很好（例如，带有标题和占位符的单输入表格）： method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > （我将稍后解释占位符。 包装标签 标签内包装输入是最干净的方法。另外，多亏了CSS的：Focus-Within，我们甚至可以在他们的孩子投入获得焦点时样式标签，但我们稍后会讨论。> type="text"> type="text" value="Prefilled value"> > > 占位符与标签 简短的比较： for="firstName">First name> id="firstName"> 标签陈述输入期望的> 占位符展示上述期望的例子 占位符并非被设计为标签的替代方案，尽管正如我们在上面的Aria示例中看到的那样，他们可以添加一些在没有视觉标签的情况下丢失的某些上下文。 理想情况下，我们应该同时使用两者：> 参见笔 sitepoint（@sitepoint）的表格2 在Codepen上。 选择输入类型 aria-label="First name"> 占位符仅适用于基于文本的输入，但实际上有各种不同的输入类型，其中包括：> 语义输入类型在表单验证期间很有用，尤其是在依靠本机验证时，我们将在不久后查看。首先，让我们学习如何设置这些输入。>>样式输入 可以说，编码表格中最令人发指的方面是覆盖浏览器的默认样式。值得庆幸的是，今天，外观：无；根据Caniuse.com。 >使用以下CSS代码重置Web浏览器的默认样式后，我们可以按照需要进行样式输入，这甚至包括广播和复选框输入类型： 但是，其中一些输入可能带有难以克服甚至不可能克服的怪癖（取决于Web浏览器）。因此，许多开发人员倾向于回到默认类型=“ text”属性= value如果他们发现这些怪异不希望的话（例如，输入type =“ number”上的“ caret”）。 但是，是> ... > 一个银色的衬里… 指定输入模式 根据Caniuse.com，新的InputMode属性指定哪些键盘布局将在手持设备上显示哪些键盘布局，无论使用的输入类型如何。 总比没有好，对吗？ 验证用户输入 >是否应该在JavaScript解决方案上选择Native-HTML验证，请记住，InputMode在这方面什么都没有实现。 inputMode =“ email” 不会验证电子邮件地址，而输入type =“ email” will will。这就是区别。 method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 搁置一边，让我们讨论什么触发验证：> 创建自定义规则 >自定义规则需要REGEXP对象使用的JavaScript正则表达式知识（但没有包装斜线或引号）。这是一个示例，在一个规则中强制执行小写字符（A – Z）和最小/最大长度： 更多信息在这里。 > type="text"> type="text" value="Prefilled value"> > >注意：前端验证（本机HTML或其他）永远不应用作服务器端验证的替代！ >样式有效/无效状态 for="firstName">First name> id="firstName"> 为了额外的清晰，这就是我们的样式有效性：> 休斯顿，我们有问题！ > >输入试图立即验证其值（或缺乏其值），因此以下代码（仅显示有效/无效状态，而输入保存值则有效）可能会更好：> >这显示了有效/无效的样式，但仅在未显示占位符>的情况下（因为用户输入了某些内容）。 参见笔 aria-label="First name"> sitepoint（@sitepoint）的表格3 在Codepen上。 其他基本事物 发送表单数据 >将表单数据发送到服务器通常要求输入具有名称属性。这也适用于隐藏的输入： > ... > 接受长形输入 本质上， 与是同一件事，除了textareas具有多行支持的事实。是的，肯定会更直观，但是alas 是接受用户长期输入的正确方法。另外，它接受输入所具有的大多数（如果不是全部）属性。> >分组输入以获得更好的可访问性 >较短的表格提供了更好的用户体验，但有时不可避免地会有更长的用户体验。在这种情况下，元素可用于包含相关输入，而儿童被用作 的标题/标题：： >知道的事物 method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 禁用输入 添加禁用属性可以使输入（或任何焦点元素）已解决，尽管通常会通过JavaScript应用/未应用。但是，它的工作方式是： 和随附的CSS，如果需要： > type="text"> type="text" value="Prefilled value"> > 但是，如果您要做的就是添加一个额外的视觉提示，暗示用户的输入无效，那么您很可能需要使用一般的同胞组合（〜）。以下代码基本上是指“遵循任何具有无效输入的元素的提交按钮”。这不会改变任何功能，但是当我们利用本机html形式验证（该验证会自动处理/启用提交性）时，这很好：> for="firstName">First name> id="firstName"> 禁用输入，但无论如何发送数据 和的混合，以下示例将确保无法更改该值。不同之处在于，与残疾人不同，可读值作为表单数据发送。与隐藏不同，可见的是：> aria-label="First name"> 更改增量 基于数字的输入具有“自旋按钮”来调整数值，并且他们还接受一个步骤属性，该属性确定了每种调整的替代增量值：> >样式表格，标签和fieldsets集focus >Subscribe> > aria-label="Email address" placeholder="bruce@wayneenterpris.es"> > 我们可以使用focus-within：用于当前接收焦点的输入的任何父。最有可能的元素将是输入的，或容器： 发送多个值，一个输入 > First name> > 倍数对文件和电子邮件输入类型有效：> 编写速记表单代码 >仅由一个单数，或组成，有一种标记html表单的简写方法。这是一个示例： > ... > 与此相反：> method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 我错过了什么吗？ HTML的直观比10年前的直观要多得多。它一直在不断发展，毫无疑问，在适当的时候，将增加更多有关HTML/CSS形式的主题。脑海中浮现的一个例子是数据库元素，目前可能是很大的障碍（尤其是在Firefox中）。但除此之外，我错过了什么吗？> >我将注意到HTML表格的某些方面我没有讨论，因为不建议使用它们，包括：> >自动对焦（不适合可访问性） >自动完整（不使用自动完成应该是用户的选择，而不是默认的）> AccessKey（不良支持和可访问性） novalidate（没有JavaScript的情况下这是无用的） 关于HTML表单的常见问题 什么是HTML形式？ HTML表单是用于在网页上收集和收集用户输入的关键元素。它允许用户输入数据，进行选择并将信息提交给服务器进行处理。 >如何创建基本的HTML表单？ 为创建基本的HTML表单，您可以使用元素，并在其中包含各种输入元素，例如文本字段，复选框，无线电按钮和按钮。表单标签具有诸如操作和方法之类的属性，可以指定应发送数据以及如何处理数据。 >常见输入类型包括文本字段（），复选框（），无线电按钮（），下拉列表（）和按钮（）。 >如何处理HTML表单中的用户输入？使用服务器端脚本或客户端脚本（例如JavaScript）处理>用户输入。表单的操作属性指定发送数据的位置，该方法属性定义用于提交的HTTP方法（GET或POST）。表格？ GET方法将数据附加到URL，在地址栏中可见，适用于较低敏感的数据。邮政方法在请求主体中发送数据，使其对用户隐藏，从而使其更加安全，以获取敏感信息。 >如何验证形式数据？ >表单数据可以使用HTML属性（例如必需）验证，也可以使用JavaScript进行更复杂的验证。 JavaScript允许您执行实时验证，确保输入的数据在提交之前符合特定条件。 >我可以样式的HTML表单吗？ 是的，您可以使用CSS设计HTML表单。您可以修改表单元素的外观，调整布局并应用样式以改善整体视觉吸引力和用户体验。我可以使用HTML表单上传文件吗？ 是的，您可以使用元素启用文件上传。这使用户可以通过表格选择和提交文件。表格的递观属性应设置为文件上传的“多部分/form-data”。
>