表单是互联网应用程序最重要的功能之一，它提供了一个界面，以一种简单而有效的方式在客户和用户之间分享信息。使用表单是任何商业应用的一个关键部分，无论是在线还是离线使用。网络表单一直是网络应用程序和网站的基础。没有它们，各种交易、讨论和聊天就难以实现。
什么是HTML5表单？
在HTML5之前就有表单，但处理输入的过程有点麻烦。HTML5为表单带来了新的功能，并为整个应用程序接受输入提供了一致性。在开发过程中，HTML5 表单也消耗了更少的时间。现在，网络开发人员不仅可以构建视觉效果极佳的表单，而且还可以通过定制的HTML5表单收集有效的、有价值的数据。
HTML5中引入的新输入类型
HTML5 带来了一些新的输入类型，通过提供本地输入来帮助用户，并使验证数据更加容易，而无需使用任何 JavaScript 代码。下表列出了HTML5中的新输入类型：
| 类型 | 解释 | 用法 |
| date | 一个用于输入日期的控件。 | <input type="date"> |
| datetime | 使用UTC日期和时间格式的日期和时间 | <input type="datetime"> |
| datetime-local | 根据你当地时间的日期和时间 | <input type="datetime-local"> |
| month | 月份和年份 | <input type="month"> |
| time | 一天中的时间 | <input type="time"> |
| week | 允许你挑选星期和年份。 | <input type="week"> |
| color | 允许你输入一个简单的颜色值（该值为十六进制的颜色符号 | <input type="color""> |
| 使用标准的电子邮件格式验证输入 | <input type="email"> | |
| tel | 让你能够根据一个模式验证电话号码的格式 | <input type="tel"> |
| search | 搜索一个数据集（像<datalist>HTML元素）。 | <input type="search"> |
| range | 一个用于在两个数字之间挑选数字的滑块控件 | <input type="range"> |
| number | 只接受数字 | <input type="number"> |
| url | 只接受URL | <input type="url"> |
HTML5表单与简单HTML表单的优势？
HTML5表单的内置验证功能将语义标记提升到了一个新的水平。它为编写脚本和样式提供了便利，而这在早期版本的HTML中是一项繁琐的任务。
即使在浏览器中禁用了Javascript，你仍然可以利用HTML5表单的优势。
如何创建HTML5表单
让我们通过查看在 HTML5 中创建用户注册表单的实际示例来了解 HTML5 表单的工作原理。
我们将学习如何创建一个简单的 HTML5 注册表单。首先，让我们从一个空白的 HTML 模板页面开始，如以下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> HTML5 表单教程 </title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
</body>
</html>我们需要使用标签来告诉浏览器表单从这里开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> HTML5 表单教程 </title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<form>
</form>
</body>
</html>从现在开始，我们将只检查位于 标签内的代码。
考虑到这一点，让我们使用form标签创建一个简短的用户注册表单，并创建输入字段，例如Name和Email。要使 ' name ' 字段成为必填项，请将required属性添加到该输入字段。
对于email address，您可以通过添加 email 属性来检查电子邮件地址的有效性，该属性将确保输入的文本是有效的电子邮件地址 - 否则会提示错误。此外，添加一个required属性以使其成为必填字段：
<form action="" method="">
<legend>Registration Details</legend>
<label>Name: <input type="text" required /></label>
<label>Email: <input type="email" required /></label>
….
<input type="submit" value="Register"/>
</form>您还可以使用autofocus属性在加载表单页面时自动聚焦在“名称”输入字段上：
<input type="text" placeholder="Your Name" required autofocus/>某些设备的屏幕空间可能有限，因此在这种情况下，您可以删除标签并用占位符替换它们。占位符也有助于向最终用户提供提示。
<input type="text" placeholder="Your Name" required autofocus/>
<input type="email" placeholder="Email address" required />用户可以通过从选项中选择来使用以前输入的数据。所述autocompete属性存储在数据列表中的数据，并允许用户选择先前插入的输入值。这样，用户只需选择值并在输入字段中使用它。请注意，应在字段（例如密码）中关闭自动完成功能，以避免未经身份验证的访问。
该自动完成属性可以被应用于特定领域。如果要将其应用于表单的所有子元素（输入），则直接将其应用于表单元素。
下一步是使用地址字段。地址的文本可能有点长，所以这里最好使用<textarea>。
<textarea rows="3" cols="50" id="address" placeholder="Address"></textarea>请注意，我们使用了两个新属性：' rows ' 和' cols '。' rows ' 属性描述了在出现滚动条之前出现在字段中的文本行数。另一方面，“ cols ”定义了每行中的字符数。
您可以尝试更改行和列的值，看看textarea如何相应地收缩和扩展。
现在，我们有了最终的形式。完整代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 表单教程</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<form action="" method="">
<legend>注册详情</legend>
<div>
<input type="text" placeholder="Name" required autofocus/>
</div >
<div>
<input type="email" placeholder="Email address" required />
</div>
<div>
<textarea rows="3" cols="50" id="address" placeholder="Address"></textarea>
</div>
<div>
<input type="submit" value="Register"/>
</div>
</form>
</body>
</html>
