HTML表单由文本框、按钮、下拉菜单和其他选择部件组成。网站开发人员使用这些元素来接收用户在网站上的信息。

如果你曾经在谷歌上搜索过，注册过或登录过一个网站，进行过支付，或回答过一个问卷，你都与网络表单进行过互动。

当为网络构建时，你必须确保你的应用程序对所有用户都是无障碍的。这包括那些需要辅助技术（如屏幕阅读器）来浏览网站的用户。

HTML5有语义表单元素，这是实现这一目标的最佳方式。值得庆幸的是，其好处不仅仅是可访问性。

它们使开发更容易，因为它们带有一些免费的功能，而且通常更容易理解。
在移动端上更好--语义HTML更容易为不同的屏幕尺寸做出响应。它的文件通常比非语义的面条代码更轻。
有利于搜索引擎优化 - 您的网页被客户发现的机会更高，因为搜索引擎会优先考虑标题、链接等里面的关键词，而不是非语义的<div>等。

在这篇文章中，我们将讨论HTML5表单中的最新元素和属性，你可以用它们来构建和验证你在这里看到的简单而现代的表单。

如何使用新的HTML5表单元素

多年来，网络表单经历了各种变化，直到HTML5的到来。

随着新的和改进的HTML5元素及其属性的引入，任何人都可以学会构建漂亮、实用和无障碍的表单。

在众多的表单元素中，一些最基本的元素包括。

表单概要 - 如何使用字段集、图例和标签标签

你使用<fieldset> 标签，通过在它们周围画一个框，将Web表单中的相关元素（控件和标签）分组。它通常包含图例、标签和输入等元素。

你使用<legend> 标签来定义字段集元素的标题。这样，它也可以作为分组元素的一种方式来使用。而<label> 标签给几个元素下了一个定义。

你应该总是把<label> 标签链接到一个<input> 元素，因为：

用户可以通过点击标签来关注输入的内容
当输入被聚焦时，屏幕阅读器会读出标签，以帮助有不同障碍的用户。
对于复选框，特别是在移动设备上，不能轻易点击小项目的用户可以点击标签来切换复选框的开关。

<fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
</fieldset>

字段集、图例和标签标签代码示例

在上面的代码中，我们使用字段集标签来创建一个标记为 "第一节 "的初始组。图例标签包含为该组元素提供描述的文本。最后，label标签标识了每个输入和它们的用途。

Fieldset-2

字段集、图例和标签

如何使用占位符文本

你在输入字段内使用占位符文本，只有当输入字段被聚焦或填充时，它才会被移除。

通常，占位符文本的字体颜色要比输入标签和值的颜色浅一些。你大多会使用占位符来让用户进一步了解在表单中应该填写什么。这里有一个例子。

<input type="email" id="email" placeholder="ob2@hotmail.com">

电子邮件输入占位符代码示例

type="email "属性确保该输入元素不接受email以外的任何其他值。id属性将输入元素与它的标签联系起来，以允许关联和聚焦。ob2@hotmail.com "给用户一个提示，告诉他们输入的值是什么类型的。

电子邮件输入占位符

如何使用聚焦

最初，用户必须在表单的第一个输入框内点击，才能开始填写。但HTML5让网络开发者强调用户应该首先与哪些输入进行互动。

自动聚焦是一个属性，你可以为此目的在<input> 或<textarea> 元素上添加。这也是一个重要的无障碍功能，因为它使使用屏幕阅读器的人的生活更容易，例如。

下面是一个如何使用自动聚焦的例子：

<input autofocus type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" required>

输入焦点代码示例

从上面的代码中可以看出，你可以把自动聚焦属性放在输入标签的任何地方。它通常跟在其他通用属性（如name、id等）后面或被包围。

Focus

输入焦点

如何使用新的 HTML5 输入法

可能可以说，<input> 是网络表单中最受欢迎的属性。实际上，表单中的一切都属于输入，因为它需要用户提供某种形式的数据。你用得最多的是这个属性来接收文本、数字和电子邮件，等等。

各种元素都是用输入中的type属性值来区分的。下面是三个新的、有用的例子。

如何使用搜索元素

你使用搜索元素让用户在需要搜索的时候输入查询。它与文本输入非常相似。

区别它们的主要地方在于样式设计，因为使用type input[type=search]访问输入往往比给文本输入一个类别要方便得多：

<input type="search" id="email" placeholder="ob2@hotmail.com">

搜索输入代码示例

在某些浏览器上，比如Chrome，一旦你开始输入，一个 "x "图标就会放在输入框的末端。点击这个图标可以清除输入的数值，使用键盘上的esc键也可以得到同样的结果。

搜索输入

如何使用隐藏元素

网络开发者使用隐藏元素将输入的内容隐藏起来，让与表单交互的用户无法看到。这种输入类型并不完全是视觉上的渲染。它的内容不被用户看到，但在提交表单时，它被发送到服务器：

<input type="hidden" id="indexNumber" name="indexNumber" value="00202010">

隐藏的输入代码示例

如何使用进度元素

这是一个你可以用来表示任务进度的元素。max属性用来表示进度条的总数值。value属性实质上是通过给进度条着色来显示已经完成的任务的百分比，达到这个程度。id属性和往常一样，被用来链接到标签。

 <label for="days">Proficiency:</label>
<progress id="days" value="27" max="100"> 27% </progress>

进度条代码示例

与类型范围的输入不同，进度元素不允许用户进行修改。相反，它以只读的方式进行交流。

Progress bar

进度条

如何使用数据列表元素

数据列表元素为一个元素指定了一个预先定义的选项列表。它经常被用来为一个列表中的项目提供自动完成功能。这是因为一旦你开始键入，你就会得到一个可用选项列表的预览。

如下所示，为了将<input> 标签与<datalist> ，你必须确保'list'属性的值与datalist上的'id'相同：

<label for="gender">Gender ??</label>
      <input list="genders" name="gender" id="gender">
      <datalist id="genders">
        <option value="female">
        <option value="male">
        <option value="other">
      </datalist>

数据列表代码示例

这个输入在不同的浏览器上呈现的效果是不同的。

浏览器。一旦你将鼠标悬停在输入框上，在输入框的末端就会有一个下拉图标。当你在输入框内或标签上点击时，各种选项的值也会显示在下拉菜单中。

Datalist-Chrome

火狐：为了看到选项的值，用户必须输入部分文字，选项将以某种自动完成的方式显示。

数据列表

什么是表单验证？

建立表单是这个过程的第一步。作为一个开发者，你必须始终确保你的用户提供准确的回应。这是必要的，因为你不应该假设用户会做正确的事情。

这就是表单验证的概念--防止错误或在错误发生时立即抓住它们。

表格验证的类型

有两种流行的网络表单验证类型。它们是。

客户端验证

客户端验证可以与验证的 "防止错误 "部分联系起来。它涉及的策略是在提交表单之前在浏览器中进行某些检查。

客户端验证的方法包括添加错误弹出窗口，以及在用户填写正确的信息之前不允许他们继续操作。

服务器端验证

服务器端验证可以与验证的 "抓错 "部分联系起来。

与客户端不同，这种类型的验证不会在用户还在表单上时检查错误。相反，它在表单数据被发送到你的网络服务器时进行检查。

在这种情况下，你会显示一个错误页面作为反馈，以显示错误的存在。

流行的客户端验证方法

基本的客户端验证

基本的客户端验证的一些例子包括 "这个字段是必须的"，"输入有效的电子邮件"，以及 "密码应该至少有8个字符"。

这些只是当用户没有按照表单所期望的格式输入数据时被抛出的许多错误信息中的几个而已。

这些属性中最常用的包括：

需要：指定在提交表单前需要填写的输入字段。
Minlength和Maxlength：指定一个字符串的最小和最大预期长度。
Min和Max：指定数字的最小和最大值。

4. 类型：指定特定输入字段需要什么样的数据，例如日期、数字、姓名、电子邮件等等。

约束验证API

顾名思义，约束验证API是一个网络API，为网络表单提供验证功能。你可以使用它的新属性和方法来修改表单输入的有效性。

开发人员现在可以很容易地赋予自定义功能和错误信息。基本上，这个API允许你检测错误并根据错误的类型显示一个自定义的消息。

你可以用setCustomValidity方法以及validationMessage属性创建自定义验证和错误信息。

其他需要了解的有用的元素

元素	说明
`autocomplete`	你可以使用自动完成来调用最近在一个给定输入中输入的值。除了敏感数据和一次性PIN码，这是一个节省时间的功能。你可以打开它的值，为特定的输入字段推荐它，反之亦然。
`autocorrect`	使用这些属性来控制某些移动设备（即在iPad和iPhone上运行的Safari版本）上的自动更正和大写功能
`spellcheck`	你可以把这个属性设置为 "真"，表示用户应该检查一些文本的拼写，特别是在输入法中输入的字符串。由此产生的唯一问题是，并不是所有在输入法中输入的文本都应该是有意义的，是实际的单词。

把它放在一起

下面是将你在本文中学到的各种元素放在一起的结果。

下面是这方面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootcamp Registration</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="form">
    <h1>Bootcamp Registration Form</h1>
  <p>Complete this form to express your interest in the upcoming web development bootcamp.</p>
  <form>
<!-- Contact Details -->
    <fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input autofocus type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
    </fieldset>
    <!-- Personal Information -->
    <fieldset class="second-section">
      <legend>Personal Information</legend>
      <label for="dob">Birth Date</label>
      <input type="date" id="dob"> <br><br>
        <label for="gender">Gender ??</label>
      <input list="genders" name="gender" id="gender">
      <datalist id="genders">
        <option value="female">
        <option value="male">
        <option value="other">
      </datalist><br><br>
     <div class="proficiency">
        <label for="profeciency">Proficiency</label>
      <input type="range" value="4" max="10" id="profeciency" name="profeciency">
     </div>

    </fieldset>
     <!-- Preferred Language -->
     <div class="terms">
        <input type="checkbox" id="scales" name="scales" class="checkbox">
      <label for="scales">I have read and agree to the terms and conditions</label>
     </div>
    <button>Submit</button>
  </form>
  </div>
</body>
</html>

HTML代码

* {
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 80vh;
  margin-top: 5rem;
  background-image: url("https://images.unsplash.com/photo-1595675024853-0f3ec9098ac7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29kaW5nJTIwYm9vdGNhbXB8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 10px;
}

.form {
  background-color: #fff;
  border-radius: 5px;
  padding: 15px 25px;
  width: 80%;
  margin: 0 auto;
}

.checkbox {
  width: 20px !important;
}

.first-section input {
  width: 85%;
  height: 25px;
  margin-left: 5px;
}

.second-section input{
  width: 80%;
  height: 25px;
  margin-left: 5px;
}

.form h1, p {
  text-align: center;
}
button {
  border: none;
  color: white;
  background: #1560BD;
  padding: 8px 25px;
  border-radius: 5px;
  display: block;
  margin: 20px auto 10px auto;
  width: 120px;
}

.second-section {
  margin-top: 15px;
}

.proficiency {
  display: flex;
  align-items: center;
}

.terms {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

CSS代码

结论

新的HTML5表单元素和属性使得访问某些基本功能变得容易。尤其是那些原本只能通过CSS或多行JavaScript实现的功能。

现在，只用HTML就能创建既现代又实用的网络表单，这比以往任何时候都容易。最重要的是，它给网络开发者带来了安心。因为你知道，你可以很容易地创建在各种浏览器上统一的表单。

谢谢你阅读👋🏾。我希望你认为这对你有帮助。

如何用HTML5创建和验证现代Web表单