HTML＆CSS表单指南（无黑客！）-css教程-PHP中文网

HTML＆CSS表单指南（无黑客！）

从历史上看，HTML的形式非常棘手 - 首先，因为至少需要一点点JavaScript，其次，因为没有任何数量的CS可以使它们行为。但是，在现代网络的情况下，这不一定是正确的，所以让我们学习如何仅使用HTML和CSS标记表单。

钥匙要点

可以仅使用html和css创建>元素创建的，并且数据是使用操作属性提交的。可以使用其他属性（例如enctype和target）来定义数据编码类型以及显示输出的位置。标签对于可用性和可访问性至关重要，描述了输入的目的。有三种声明标签的方法：相邻标签，ARIA标签和包装标签。最有效的方法是将输入包装在标签中。占位符也可用于提供输入字段中预期的示例。

>有多种输入类型可供选择，例如按钮，复选框，颜色，日期，电子邮件，文件等。由于浏览器默认值，样式输入可能会具有挑战性，但是外观属性可用于覆盖这些属性。输入验证对于确保用户输入符合某些条件至关重要，并且可以使用本机HTML验证或JavaScript实现。

从元素开始。
>这里没有什么花哨的。只是覆盖基本结构。

>如果您自然地提交表单数据（也就是说，没有JavaScript），则需要包含操作属性，其中值是您将向您发送表单数据的URL。该方法应取决于您要实现的目标（不要用GET发送敏感数据）。。

>此外，还有较少使用的Enctype属性，该属性定义了发送的数据的编码类型。另外，虽然不一定是表单所特有的属性，但可以用于在新选项卡中显示输出。

基于JavaScript的表单不一定需要这些属性。 HTML＆CSS表单指南（无黑客！） >

>表单由输入组成，这些输入期望数据值。

参见笔

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

表单1 by sitepoint（@sitepoint）

在Codepen上。

包括可提供更好可用性和可访问性的标签

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

每个输入都需要一个标签。>

标签是一个文本描述符，描述了输入的用途。有三种宣布标签的方法，但其中一个优于其他两个标签。让我们现在深入研究这些。

相邻标签

>相邻标签需要最多的代码，因为我们需要明确声明标签所描述的输入。对于大多数人来说，这是违反直觉的，因为我们可以将输入包装在标签内部以实现相同的效果。

话虽如此，相邻的方法在延长的情况下可能是必要的，所以这就是外观：

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

>从上面的示例中可以看到，

>必须匹配输入的ID属性，而这是对文本描述符属于哪个文本描述符的输入设备的说明输入。然后，输入设备将将其传达给用户（例如，屏幕读取器将通过语音决定它。 aria标签

>语义HTML更好，但ARIA（可访问的互联网应用程序）可以在缺席的情况下进行补偿。在这种情况下，如果没有实际的html ：

>，这就是标签的样子

不幸的是，这种方法的缺点是缺乏视觉标签。但是，对于某些标记，这可能很好（例如，带有标题和占位符的单输入表格

）：

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

（我将稍后解释占位符。 包装标签

标签内包装输入是最干净的方法。另外，多亏了CSS的：Focus-Within，我们甚至可以在他们的孩子投入获得焦点时样式标签，但我们稍后会讨论。

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登录后复制

占位符与标签

简短的比较：

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

登录后复制

标签陈述输入期望的

占位符展示上述期望的例子 HTML＆CSS表单指南（无黑客！）

占位符并非被设计为标签的替代方案，尽管正如我们在上面的Aria示例中看到的那样，他们可以添加一些在没有视觉标签的情况下丢失的某些上下文。

理想情况下，我们应该同时使用两者：

sitepoint（@sitepoint）的表格2

选择输入类型

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

登录后复制

占位符仅适用于基于文本的输入，但实际上有各种不同的输入类型，其中包括：

>

语义输入类型在表单验证期间很有用，尤其是在依靠本机验证时，我们将在不久后查看。首先，让我们学习如何设置这些输入。

>样式输入

可以说，编码表格中最令人发指的方面是覆盖浏览器的默认样式。值得庆幸的是，今天，外观：无；根据Caniuse.com。

>使用以下CSS代码重置Web浏览器的默认样式后，我们可以按照需要进行样式输入，这甚至包括广播和复选框输入类型：但是，其中一些输入可能带有难以克服甚至不可能克服的怪癖（取决于Web浏览器）。因此，许多开发人员倾向于回到默认类型=“ text”属性= value如果他们发现这些怪异不希望的话（例如，输入type =“ number”上的“ caret”）。

但是，

是

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

一个银色的衬里…

指定输入模式

根据Caniuse.com，新的InputMode属性指定哪些键盘布局将在手持设备上显示哪些键盘布局，无论使用的输入类型如何。 总比没有好，对吗？

验证用户输入

>是否应该在JavaScript解决方案上选择Native-HTML验证，请记住，InputMode在这方面什么都没有实现。 inputMode =“ email”

不会

验证电子邮件地址，而输入type =“ email” will will。这就是区别。

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

搁置一边，让我们讨论什么触发验证：>

创建自定义规则

>自定义规则需要REGEXP对象使用的JavaScript正则表达式知识（但没有包装斜线或引号）。这是一个示例，在一个规则中强制执行小写字符（A – Z）和最小/最大长度：

更多信息在这里。

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登录后复制

注意：前端验证（本机HTML或其他）永远不应用作服务器端验证的替代！

>样式有效/无效状态

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

登录后复制

为了额外的清晰，这就是我们的样式有效性：>

休斯顿，我们有问题！

>

>输入试图立即验证其值（或缺乏其值），因此以下代码（仅显示有效/无效状态，而输入保存值则有效）可能会更好：>

HTML＆CSS表单指南（无黑客！） >这显示了有效/无效的样式，但仅在未显示

占位符

>的情况下（因为用户输入了某些内容）。

参见笔

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

登录后复制

sitepoint（@sitepoint）

的表格3 在Codepen上。

其他基本事物

发送表单数据

>将表单数据发送到服务器通常要求输入具有名称属性。这也适用于隐藏的输入：

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

接受长形输入

本质上，与是同一件事，除了textareas具有多行支持的事实。是的，肯定会更直观，但是alas 是接受用户长期输入的正确方法。另外，它接受输入所具有的大多数（如果不是全部）属性。>

>分组输入以获得更好的可访问性

>较短的表格提供了更好的用户体验，但有时不可避免地会有更长的用户体验。在这种情况下，

元素可用于包含相关输入，而儿童被用作

的标题/标题：：

>知道的事物

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

禁用输入

添加禁用属性可以使输入（或任何焦点元素）已解决，尽管通常会通过JavaScript应用/未应用。但是，它的工作方式是：

和随附的CSS，如果需要：

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登录后复制

但是，如果您要做的就是添加一个额外的视觉提示，暗示用户的输入无效，那么您很可能需要使用一般的同胞组合

（〜）。以下代码基本上是指“遵循任何具有无效输入的元素的提交按钮”。这不会改变任何功能，但是当我们利用本机html形式验证（该验证会自动处理/启用提交性）时，这很好：

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

登录后复制

禁用输入，但无论如何发送数据 和的混合，以下示例将确保无法更改该值。不同之处在于，与残疾人不同，可读值作为表单数据发送。与隐藏不同，可见的是：>

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

登录后复制

更改增量

基于数字的输入具有“自旋按钮”来调整数值，并且他们还接受一个步骤属性，该属性确定了每种调整的替代增量值：>

>样式表格，标签和fieldsets集focus

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登录后复制

我们可以使用focus-within：用于当前接收焦点的输入的任何父

。最有可能的元素将是输入的，或

容器：

发送多个值，一个输入

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span>></span>
</span><span><span><span></label</span>></span>
</span>

登录后复制

倍数对文件和电子邮件输入类型有效：>

编写速记表单代码

>仅由一个单数

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制

与此相反：

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登录后复制