使用HTML制作的精美表单

Peter Leow

4.83/5 (19投票s)

2017年12月16日

CPOL

25分钟阅读

21703

334

创建您的第一个HTML表单

下载 style.zip - 982 B

引言

曾几何时，我们为了申请工作、开立银行账户、入学甚至婚姻登记等活动，不得不填写无数的纸质表格。这样的例子不胜枚举。在这些表格中，我们常常会遇到带下划线的空白处或带有“姓名”和“地址”等标签的空框，带有“男”和“女”等预设值的复选框，以及要求描述性信息的多行文本。这些表格必须填写完整，并通过手工或邮寄方式提交给提供表格的机构。

我们今天仍然会遇到纸质表格。然而，由于网络技术的发展，它们的使用和普及已被一种新“形式”的表格——网络表单——悄然侵蚀。如今，当我们想要注册某项活动时，只需访问相关网站并通过浏览器填写网络表单。从某种意义上说，网络表单已成为网站与其用户之间互动的实际方式。随着社交媒体的普及，网络表单也成为社交网站用户之间普遍的交流方式。

简而言之，网络表单通常由一个或多个表单控件组成，例如文本字段、文本区域、下拉列表、复选框、单选按钮、重置按钮或提交按钮。与纸质表格中的对应物一样，这些表单控件通常带有文字标签来描述其用途。通过这些表单控件，用户可以输入、选择和提交数据到服务器进行处理。

完成网络表单的学习分为两个部分——客户端和服务端。客户端侧重于使用 HTML 构建您的第一个网络表单，而服务器端则侧重于编写服务器端脚本来处理通过您的第一个网络表单提交的数据。

在本教程中，您将踏上创建现代网络表单的客户端动手学习之旅。

展望未来...

在学习之旅结束时，您将使用 HTML 创建如图1所示的动画网络表单。

图1：我的第一个网络表单

准备工作

在您的计算机上创建一个名为 webform 的文件夹。在该文件夹中，创建一个名为 index.html 的 HTML 文件，其中包含以下代码：

<!DOCTYPE html>
<html>
<head>
<title>Hands-on with Web Forms</title>
</head>
<body>
<div class="container">
  <header>
    <h1>Hands-on with Web Forms</h1>
  </header>
  <div class="form">
    <!-- Add your code here -->
  </div>
</div>
</body>
</html>

在 index.html 中，在标记为  的注释区域内，您将添加 HTML 代码来构建您的第一个网络表单。

在您继续操作时，您会注意到一些 HTML 元素的起始标签中包含了 class 属性，例如 index.html 中的 <div class="container"> 和 <div class="form">。如果您不熟悉 CSS，只需注意这些 class 属性被用作选择器来选择其相应 HTML 元素的样式。样式保存在一个外部 CSS 文件中。在本学习之旅结束时，您将学习如何将其导入 index.html 以产生您在图 1 中看到的外观和感觉。

为了使您的动手操作更具真实性，您需要另一个文件来接收和处理 index.html 提交的表单数据。在包含 index.html 的文件夹中，创建另一个名为 acknowledge.html 的 HTML 文件，其中包含以下代码：

<!DOCTYPE html>
<html>
<head>
<title>Acknowledgement</title>
</head>
<body>
<h1>Acknowledgement</h1>
<h3>Form data in <em>name=value</em> pairs delimited by <em>&</em> sign:</h3>
<div style="overflow-wrap: break-word">
  <script>
    document.write(decodeURIComponent(window.location.search).substring(1));
  </script>
<div> 
</body>
</html>

acknowledge.html 将简单地回显它收到的任何表单数据。

旅程开始…

构建您的第一个网络表单

首先，将以下 HTML 代码添加到 index.html 中

<form id="userform" action="acknowledge.html" method="get">

  <p class="caption">
    <label for="username">Name</label>
  </p>
  <p>
    <input type="text" id="username" name="username">
  </p>

  <p>
    <input type="submit" class="bottom" id="usersubmit" name="usersubmit" value="Sign up">
  </p>
  
</form>

在浏览器中启动 index.html，您应该会看到如图 2 所示的动画输出

图2：表单、文本字段和提交按钮

您已品尝到成果，是时候学习 index.html 中的代码了。

<form>...</form>

所有网络表单都以一个起始 <form> 标签和相应的结束 </form> 标签开始，其中包含文本字段等表单控件。在 index.html 中，<form> 标签被赋予了表 1 中描述的三个属性

表1：`<form>` 属性
Attribute	描述
`id`	包含一个值，可用于在 JavaScript 和 CSS 中引用 HTML 元素。在我们的示例中，`userform` 是表单的 id。
`action`	包含表单数据提交时将被发送到的文件的 URL。在我们的示例中，`acknowledge.html` 是将接收表单数据的文件。
`method`	定义表单数据如何发送。在我们的示例中给出的值 `get` 将导致表单数据通过 HTTP GET 方法发送，该方法会将表单数据以 name=value 对的形式附加到接收页面提交时的 URL。method 属性的另一个值是 `post`，它将导致表单数据通过 HTTP POST 方法发送，该方法会将表单数据嵌入到请求消息的正文中，而不是作为 URL 的一部分暴露在浏览器地址栏中。

<input type="text">

<input type="text"> 定义了一个单行文本字段，可以接受任意字符串。在 index.html 中，我们添加了一个文本字段供用户输入姓名。它有两个属性，即 id 和 name，它们都被赋予了相同的值 username。（当然，您可以根据需要给它们赋予其他值或不同的值。）您已经了解了 id 的用途。至于 name 属性，它的值，即 username，以及用户输入的数据，将在表单提交时作为 name=value 对发送到接收文件，例如我们示例中的 acknowledge.html。例如，如果用户在此文本字段中输入值 Peter Leow，并点击 Sign up 按钮，此值将以 username=Peter+Leow 的查询字符串形式发送到服务器，并由在查询字符串中查找 username 的接收服务器端脚本获取。

value

value 属性包含输入到文本字段中的文本值。文本字段可以通过 value 属性给定一个默认值。例如，以下代码片段将呈现一个带有默认值 Peter Leow 的文本字段

<input type="text" id="username" name="username" value="Peter Leow">

请注意图 2 中的以下观察结果

由于 URL 编码，Peter 和 Leow 之间的空格已转换为 + 号

文本字段伴随着一个通过 <label> 标签分配的标题，Name。

<label>

从纸质表格时代起，就习惯于用描述性标题来标记输入字段，以反映其用途。这是 HTML <label> 标签的作用。每个 <label> 标签都有一个 for 属性，它获取与之绑定的元素的 id 值。例如，在 index.html 中，

<label for="username">Name</label>

绑定到

<input type="text" id="username" name="username">

通过这种方式，每当用户点击 <label> 元素的标题时，与此 label 绑定的元素就会获得焦点。

<input type="submit">

<input type="submit"> 定义一个提交按钮。当用户点击提交按钮时，它会将表单数据发送到 <form> 标签的 action 属性值指定的文件。与其他表单元素不同，提交按钮不需要单独的 <label> 标签。它的标题通过它自己的 value 属性分配。例如，在 index.html 中，提交按钮的标题是“Sign up”，它是通过 value 属性分配的，如所示

<input type="submit" class="bottom" id="usersubmit" name="usersubmit" value="Sign up">

请注意图 2 中的以下观察结果

在表单提交时，提交按钮本身也以 name=value 对的形式，即 usersubmit=Sign+up，发送到 acknowledge.html，在我们的示例中，它在查询字符串中通过 & 符号与 username=Peter+Leow 分隔。这解释了您在图 2 中看到的查询字符串 username=Peter+Leow&usersubmit=Sign+up。

由于表单是通过 get 方法提交的，此查询字符串附加到 URL 并显示在浏览器的地址栏中，如图 2 所示。

继续在 <form>...</form> 中添加不同的表单控件...

<input type="password">

<input type="password"> 定义一个密码字段。它本质上是一个文本字段，不同之处在于输入其中的字符被星号或圆圈遮蔽。

将以下代码添加到 index.html 中，位于 Name 文本字段和 Sign up 按钮之间。

<p class="caption">
  <label for="userpassword">Password</label>
</p>
<p>
  <input type="password" id="userpassword" name="userpassword">
</p>

在浏览器中启动 index.html，您将看到以上代码添加了一个密码字段，如图 3 所示

图3：密码字段

密码字段看起来与它上面的文本字段完全一样。然而，一旦您开始输入文本，相似之处就结束了：您输入的每个字符都用星号或圆圈标记。

提交时，密码条目作为 userpassword=123456 添加到查询字符串中。

注意

在实际应用中，切勿使用表单 `get` 方法通过网络传输机密数据，因为它们在浏览器地址栏中对窥探者可见。请使用 post 方法以及 HTTP 安全 (HTTPS) 协议，即 https:// 而不是 "http://。出于学习目的，我们使用 get 方法，以便您可以直观地看到原始查询字符串。

<input type="radio">

<input type="radio"> 定义一个单选按钮。单选按钮通常至少成组出现，它们共享相同的 name 属性值（以识别它们为一个组），但 value 属性值不同（表示不同的选项）。用户只能从一个组中选择一个选项。

将以下代码添加到 index.html 中，位于 Password 文本字段和 Sign up 按钮之间。

<fieldset>
  <legend>Gender</legend>

  <label for="male">Male</label> 
  <input type="radio" id="male" name="gender" value="male">

  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">

</fieldset>

在浏览器中启动 index.html，您将看到以上代码添加了两个用于性别选择的单选按钮，如图 4 所示

图4：单选按钮

这两个单选按钮的 value 属性值不同，即 value="male" 和 value="female"，用于表示不同的性别选项，同时共享相同的 name 属性值，即 name="gender"，这将其识别为一个组，并且在该组中只能选择一个性别选项。如果您为 name 属性分配不同的值，您将违反此规则，并且两个单选按钮可以同时被选中。当然，这对于性别选择来说是没有意义的。

提交时，所选的性别选项作为 gender=male 添加到查询字符串中。

checked

您可以通过向默认值的单选按钮添加 checked 属性，将单选按钮组中的一个选项设置为默认选择。例如，您可以将 female 选项设置为默认选择，如下所示

<input type="radio" id="female" name="gender" value="female" checked>

在图 4 中，请注意单选按钮被一个带有标题 Gender 的边框包围。它们是由 <fieldset> 和 <legend> 创建的。

<fieldset>

<fieldset> 标签用于通过在 HTML 元素周围绘制边框来将其可见地分组。

<legend>

与 <fieldset> 结合使用，<legend> 标签指定了由 <fieldset> 创建的边框的标题。

<input type="select"> and <option>

<input type="select"> 和 <option> 标签一起用于创建下拉列表。下拉列表的每个项目都分配给 <option> 标签的 value 属性，其文本描述放置在起始 <option> 标签和结束 </option> 标签之间。所有 <option> 和 </option> 对的集合然后放置在起始 <select> 标签和结束 </select> 标签之间。

将以下代码添加到 index.html 中，位于 Gender 单选按钮组和 Sign up 按钮之间。

<p class="caption">
  <label for="resstatus">Residential Status</label>
</p>
<p>  
  <select id="resstatus" name="resstatus">      
    <option value="Citizen">Citizen</option>
    <option value="PR">Permanent Resident</option>
    <option value="Foreigner">Foreigner</option>
  </select> 
</p>

在浏览器中启动 index.html，您将看到以上代码添加了一个居住状态下拉列表，如图 5 所示

图5：下拉列表

提交表单时，选定的居住状态将作为 resstatus=Citizen 添加到查询字符串中。

selected

您可以通过向要预选的 <option> 标签添加 selected 属性来预选一个选项。以下代码片段预选“永久居民”选项

<option value="PR" selected>Permanent Resident</option>

multiple

默认情况下，用户只能在 <select> 下拉列表中选择一个选项。可以通过向 <select> 标签添加 multiple 属性来修改此行为以允许多选，如以下代码片段所示：

<select id="resstatus" name="resstatus" multiple>

<input type="textarea">

<input type="textarea"> 定义了一个多行文本区域，其大小可以使用 rows 和 cols 属性指定，如下所示：

rows

rows 属性以行数的形式指定文本区域的高度，例如 rows="10"。默认值为 2。

cols

cols 属性以平均字符宽度的形式指定文本区域的宽度，例如 cols="30"。默认值为 20。

将以下代码添加到 index.html 中，位于 Residential Status 下拉列表和 Sign up 按钮之间。

<p class="caption">
  <label for="aboutme">About Me</label>
</p>
<p>
  <textarea id="aboutme" name="aboutme" rows="10" cols="30"></textarea>
</p>

在浏览器中启动 index.html，您将看到以上代码添加了一个高 10 行、宽 30 列的文本区域，如图 6 所示

图6：文本区域

提交表单时，在文本区域中输入的多行文本将添加到查询字符串中。

除了 rows 和 cols 属性之外，您还可以向 <textarea> 标签或其他表单元素添加 disabled 和 readonly 属性，以控制用户如何使用表单元素。

disabled

disabled 属性指定表单元素不可用且不可点击。禁用的表单元素将不会被提交。例如，以下代码片段将呈现一个不可选择的下拉列表

<select id="resstatus" name="resstatus" disabled>

readonly

readonly 属性指定表单元素的内容不能被修改。例如，以下代码片段将呈现一个只读文本区域

<textarea id="aboutme" name="aboutme" rows="10" cols="30" readonly>write something about yourself</textarea>

<input type="email">

<input type="email"> 定义了一个电子邮件字段，它期望一个电子邮件地址，并在表单提交时自动验证该条目是否为有效的电子邮件格式。

将以下代码添加到 index.html 中，位于 About Me 文本区域和 Sign up 按钮之间。

<p class="caption">
  <label for="useremail">Email</label>
</p>
<p>
  <input type="email" id="useremail" name="useremail">
</p>

在浏览器中启动 index.html，您将看到以上代码添加了一个电子邮件字段，如图 7 所示

图7：电子邮件字段

如观察到的，如果您在电子邮件字段中输入非电子邮件文本，并点击 Sign up 按钮，表单将不会被提交。相反，会弹出一个消息框，提示您输入电子邮件地址。

<input type="url">

<input type="url"> 定义了一个 URL 字段，它期望一个 URL 地址，并在表单提交时自动验证该条目是否为有效的 URL 格式。

将以下代码添加到 index.html 中，位于 Email 字段和 Sign up 按钮之间。

<p class="caption">
  <label for="weblink">Web Link</label>
</p>
<p>
  <input type="url" id="weblink" name="weblink">
</p>

在浏览器中启动 index.html，您将看到以上代码添加了一个 URL 字段，如图 8 所示

图8：URL 字段

如观察到的，如果您在电子邮件文本字段中输入非 URL 文本，并点击 Sign up 按钮，表单将不会被提交。相反，会弹出一个消息框，提示您输入 URL 地址。

<input type="date">

<input type="date"> 定义了一个日期字段，它期望一个日期，并在表单提交时自动验证该条目是否为有效日期。

将以下代码添加到 index.html 中，位于 URL 字段和 Sign up 按钮之间。

<p class="caption">
  <label for="dateofbirth">Date of Birth</label>
</p>
<p>
  <input type="date" id="dateofbirth" name="dateofbirth">
</p>

在浏览器中启动 index.html，点击后，日期字段会打开一个交互式日历，用户可以在其中选择日期，如图 9 所示

图9：日期字段

如观察到的，如果您在不调用日期选择器的情况下直接在日期字段中输入无效日期，并点击 Sign up 按钮，表单将不会被提交。相反，会弹出一个消息框，提示您输入日期。

提交表单时，选定的日期作为查询字符串的一部分发送，例如 dateofbirth=2017-02-28。

<input type="color">

<input type="color"> 定义一个颜色字段。

将以下代码添加到 index.html 中，位于 Date of Birth 字段和 Sign up 按钮之间。

<p class="caption">
  <label for="favoritecolor">Favorite Color</label>
</p>
<p>
  <input type="color" id="favoritecolor" name="favoritecolor">
</p>

在浏览器中启动 index.html，点击后，颜色字段会打开一个交互式颜色选择器，用户可以在其中选择颜色，如图 10 所示

图10：颜色字段

提交表单时，将发送所选颜色的颜色代码，例如红色为 #ff0000。

<input type="checkbox">

<input type="checkbox"> 定义一个复选框。与单选按钮类似，复选框通常至少成组出现，它们共享相同的 name 属性值（以识别它们为一个组），但 value 属性值不同（表示不同的选项）。然而，与单选按钮不同，用户可以从一个组中选择多个复选框选项。

将以下代码添加到 index.html 中，位于 Favorite Color 字段和 Sign up 按钮之间。

<p class="caption">
  <label for="hobbies">Hobbies</label>
</p>
<p>
  <input type="checkbox" class="hobbies" name="hobbies[]" value="coding">Coding<br>
  <input type="checkbox" class="hobbies" name="hobbies[]" value="reading">Reading<br>
  <input type="checkbox" class="hobbies" name="hobbies[]" value="swimming">Swimming<br> 
  <input type="checkbox" class="hobbies" name="hobbies[]" value="jogging">Jogging<br>
  <input type="checkbox" class="hobbies" name="hobbies[]" value="eating">Eating<br>
  <input type="checkbox" class="hobbies" name="hobbies[]" value="others">Others<br>
</p>

在浏览器中启动 index.html，您将看到以上代码添加了六个复选框，如图 11 所示

图11：复选框

这六个复选框的 value 属性值不同，例如 value="coding"、value="reading" 等，以表示不同的爱好，同时共享相同的 name 属性值，即 name="hobbies[]"，这将其识别为一个组。

注意

由于复选框组允许并期望多选，因此它们的名称后缀为 []，以便服务器端脚本可以将其作为数组读取。

提交表单时，所选的爱好选项将作为 hobbies[]=reading&hobbies[]=jogging 添加到查询字符串中。

与单选按钮一样，您可以通过向适当的复选框添加 checked 属性，将复选框组中的一些选项设置为默认选择。例如，您可以将 Coding 和 Reading 选项设置为默认选择，如下所示

<input type="checkbox" class="hobbies" name="hobbies[]" value="coding" checked>Coding<br>
<input type="checkbox" class="hobbies" name="hobbies[]" value="reading" checked>Reading<br>

<input type="list"> and <datalist>

<input type="list"> 定义了一个自动完成字段，其值取自 <datalist> 下定义的选项值列表。它类似于 <select> 下拉列表，但增加了自动完成功能 — 当用户在文本字段中键入时，<datalist> 中匹配的选项值将显示在下拉列表中。

将以下代码添加到 index.html 中，位于 Hobbies 复选框组和 Sign up 按钮之间。

<p class="caption">
  <label for="zodiac">Zodiac</label>
</p>
<input list="zodiac" name="zodiac">
<datalist id="zodiac">
  <option value="Aries">
  <option value="Taurus">
  <option value="Gemini">
  <option value="Cancer">
  <option value="Leo">
  <option value="Virgo">
  <option value="Libra">
  <option value="Scorpio">
  <option value="Sagittarius">
  <option value="Capricorn">
  <option value="Aquarius">
  <option value="Pisces">
</datalist>

在浏览器中启动 index.html，您将看到以上代码添加了一个生肖自动完成下拉列表，如图 12 所示

图12：自动完成下拉列表

在 Zodiac 文本字段中输入 L，您应该会看到一个包含匹配值（即 Leo 和 Libra）的下拉列表出现。

提交表单时，所选的生肖名称将添加到查询字符串中，例如 zodiac=Leo。

<input type="file">

<input type="file"> 定义了一个上传按钮，供用户选择和上传文件。

将以下代码添加到 index.html 中，位于 Zodiac 字段和 Sign up 按钮之间。

<p class="caption">
  <label for="portrait">Portrait</label>
</p>
<p>
  <input type="file" id="portrait" name="portrait">
</p>

在浏览器中启动 index.html，您将看到以上代码添加了一个上传按钮，用户可以在其中浏览文件进行上传，如图 13 所示

图13：文件上传

在我们的示例中，只有文件名作为 portrait=koala.jpg 在查询字符串中发送到 acknowledge.html，而不是文件内容。为了能够将文件内容上传到服务器，您的代码必须实现以下功能：

<form> 必须使用 method="post"；并且
<form> 必须包含此属性 enctype="multipart/form-data"。它声明内容类型是二进制的，并且不会被编码。

将它们放在一起，用于文件上传的网页表单应如下所示：

<form id="userform" action="process.php" method="post" enctype="multipart/form-data">
  <input type="file" id="portrait" name="portrait">
  <!-- other form widgets -->
</form>

在服务器端，需要一个脚本，例如 process.php，来处理上传的文件内容。由于本教程侧重于客户端，因此将不再深入探讨。

<input type="reset">

<input type="reset"> 定义一个重置按钮。当用户点击重置按钮时，它会将所有表单控件重置为它们的默认值。与提交按钮一样，重置按钮不需要单独的 <label> 标签。它的标题通过它自己的 value 属性分配。

将以下代码添加到 index.html 中，紧邻 Sign up 提交按钮上方。

<input type="reset" class="bottom" value="Reset">

在浏览器中启动 index.html，您将看到以上代码添加了一个重置按钮，用户可以点击该按钮将所有表单控件重置为其默认值，如图 14 所示

图14：重置按钮

输入类型汇总

您现在应该已经注意到，虽然 <input> 标签是 HTML 表单最重要的构建块，但 type 属性是 <input> 标签最重要的属性。简而言之，<input> 标签定义了一个接受用户输入的数据字段，而它的 type 属性则控制要接受的数据类型。

我已将所有输入类型（其中一些您以前见过）整理到表 2 中，并附有描述和代码片段，方便查阅和尝试。

眼见为实，了解这些输入类型（尤其是您以前见过的那些）的最佳方法是亲手尝试。打开文本编辑器，创建一个 HTML 文档，例如 test.html，其中包含以下代码：

<!DOCTYPE html>
<html>
<body>
  <!-- add code snippet below -->

</body>
</html>

当您浏览表 2 中的各种输入类型时，请将相应的代码片段添加到 test.html 中的注释标签下方，并通过在浏览器中启动 test.html 来观察结果。我在此宣布，这将是您的家庭作业。

表2：输入类型总结
类型	描述 / 代码片段
`文本`	`<input type="text ">` 标签定义一个没有换行符的单行自由文本字段。 <form onsubmit="alert(document.getElementById('name').value);return false;"> Name: <input type="text" id="name" name="name"> <input type="submit" value="Submit"> </form>
`密码`	`<input type="password">` 标签定义一个用于密码的单行自由文本字段，该字段被遮蔽且没有换行符。 <form onsubmit="alert(document.getElementById('password').value);return false;"> Password: <input type="password"id="password" name="password"> <input type="submit" value="Submit"> </form>
`radio`	`<input type="radio">` 标签定义了一个单选按钮。单选按钮通常至少成组出现，它们共享相同的 `name` 属性值，但 `value` 属性值不同。 <input type="radio" id="male" name="gender" value="male">Male <input type="radio" id="female" name="gender" value="female">Female
`checkbox`	`<input type="checkbox">` 标签定义一个复选框，供用户选择或取消选择一个选项。用户可以在一组相关的复选框中选择多个复选框选项。 <input type="checkbox" id="hobbies" name="hobbies" value="Coding">Coding
`文件`	`<input type="file">` 定义了一个文件上传控件，供用户选择和上传文件。 Portrait: <input type="file" id="portrait" name="portrait">
`submit`	`<input type="submit">` 定义了一个提交按钮。当用户点击提交按钮时，它会将表单数据发送到 `<form>` 标签的 `action` 属性中指定的文件。 <form onsubmit="alert('Welcome to PeterLeowBlog.com!');return false;"> <input type="submit" name="submit" id="submit" value="Sign up"> </form>
`reset`	`<input type="reset">` 定义了一个重置按钮，用于将表单中的所有条目和选择重置为默认值。 <input type="reset" value="Reset">
`button`	`<input type="button">` 定义了一个可点击按钮，可用于在点击按钮时触发事件。 <input type="button" value="Click Me" onclick="alert('Welcome to PeterLeowBlog.com!')"> 您也可以使用 HTML `<button>` 标签创建可点击按钮，如下所示： <button type="button" onclick="alert('Welcome to PeterLeowBlog.com!')">Click Me</button>
`图像`	`<input type="image">` 定义了一个可点击图像按钮，可用于在点击图像时触发事件。 <form onsubmit="alert('Welcome to PeterLeowBlog.com!');return false;"> <input type="image" src="https://en.gravatar.com/userimage/89030985/4e416e4d0b5f28768d4ad747299a099b.jpeg" name="img" alt="Workspace"> </form>
`hidden`	`<input type="hidden">` 用于保存数据但不将其显示在浏览器中。这通常是有意通过代码完成的。尽管隐藏，这些数据在表单提交时会随其余表单数据一起发送。 <input type="hidden" name="secret" id="secret" value="I love PeterLeow's Code Blog!"> <input type="button" value="I have a secret" onclick="alert(getElementById('secret').value)">
`email`	`<input type="email">` 定义了一个文本字段，它期望一个电子邮件地址，并在表单提交时自动验证该条目是否为有效的电子邮件格式。 <form onsubmit="alert(document.getElementById('email').value);return false;"> Email: <input type="email" id="email" name="email"> <input type="submit" value="Submit"> </form>
`date`	`<input type="date">` 定义了一个日期字段。 <form onsubmit="alert(document.getElementById('dateofbirth').value);return false;"> Date of Birth: <input type="date" id="dateofbirth" name="dateofbirth"> <input type="submit" value="Submit"> </form>
`color`	`<input type="color">` 定义了一个颜色字段。 <form onsubmit="alert(document.getElementById('favoritecolor').value);return false;"> Favorite Color: <input type="color" id="favoritecolor" name="favoritecolor"> <input type="submit" value="Submit"> </form>
`url`	`<input type="url">` 定义了一个文本字段，它期望一个 URL 地址，并在表单提交时自动验证该条目是否为有效的 URL 格式。 <form onsubmit="alert(document.getElementById('weblink').value);return false;"> My Home Page: <input type="url" id="weblink" name="weblink"> <input type="submit" value="Submit"> </form>
`number`	`<input type="number">` 定义了一个输入字段，它期望一个数值，并在表单提交时自动验证该条目是否为数字。大多数浏览器将其渲染为带有向上/向下按钮的微调器。 <form onsubmit="alert(document.getElementById('capacity').value);return false;"> Capacity: <input type="number" id="capacity" name="capacity" min="1" max="9" step="2"> <input type="submit" value="Submit"> </form>
`range`	`<input type="range">` 定义了一个输入字段，它期望一个范围内的数值。大多数浏览器将其渲染为一个带有滑块的手柄，用于在两个数字之间滑动。 <form onsubmit="alert(document.getElementById('rate').value);return false;"> Rate: 1 <input type="range" id="rate" name="rate" min="1" max="5"> 5 <input type="submit" value="Submit"> </form>
`search`	`<input type="search">` 本质上与文本字段相似，但语义上设置为包含搜索关键词。 <form onsubmit="window.open('http://lmgtfy.com/?q='+document.getElementById('askgoogle').value);return false;"> Ask Google: <input type="search" id="askgoogle" name="askgoogle"> <input type="submit" value="Submit"> </form>
`tel`	`<input type="tel">` 本质上与文本字段相似，但语义上设置为包含电话号码。 <form onsubmit="alert(document.getElementById('mobile').value);return false;"> Mobile: <input type="tel" id="mobile" name="mobile"> <input type="submit" value="Submit"> </form>

够了吗？

到目前为止，您可能认为自己已经学够了。您可能觉得可以跳过本教程的其余部分，然后就此打住。突然，您的手机响了。您的客户刚刚发来一条消息，其中包含要在 index.html 中实现的以下四项新要求：

页面加载时，光标始终定位在“姓名”字段上；
将“姓名”、“电子邮件”和“密码”字段设为必填项；
在“姓名”、“电子邮件”、“密码”和“网址”字段上提供提示；以及
密码字段必须由八个或更多字母数字字符组成。

这及时出现的消息让您意识到，您还有一段路要走。所以，继续努力...

表单属性

为了实现这四项新要求，您必须熟悉更多表单属性，而不是您之前遇到的那些。让我们逐一了解它们。

placeholder

当包含在 <input> 标签中时，placeholder 属性会在空输入字段中显示一个提示，描述预期值或格式，例如名字后跟姓氏，或预期的电子邮件格式。placeholder 属性适用于 text、password、email、url、search 和 tel 输入类型。

<input type="text" placeholder="First name Last name">

required

当包含在 <input> 标签中时，required 属性指定在提交表单之前必须填写该输入字段。当点击提交按钮时，如果带有 required 属性的输入字段未填写，则会显示错误消息。required 属性适用于 text、password、email、radio、checkbox、date、file、url、search、tel 和 number 输入类型。

<input type="text" required>

autofocus

当包含在 <input> 标签中时，autofocus 属性指定输入字段在页面加载时应自动获得焦点。

<input type="text" autofocus>

pattern

当包含在 <input> 标签中时，pattern 属性指定输入值的预期模式（长度、数据类型、格式），并在点击提交按钮时自动执行验证。（该模式用正则表达式表示，这超出了本教程的范围。）当输入值不匹配该输入字段的 pattern 属性的正则表达式时，将显示错误消息。在我们的示例中，index.html 中密码字段的 pattern 属性指定其输入值（密码）必须由八个或更多字母数字字符组成。

<code><input type="password" pattern="[\w]{8,}"></code>

autocomplete

autocomplete 属性指定表单或输入字段是否应开启或关闭其自动完成功能。当自动完成开启时，浏览器会根据用户之前输入的值自动填充值。autocomplete 属性适用于 <form> 以及 text、password、email、url、date、range、color、search 和 tel 输入类型。

<input type=text" name="fullname" autocomplete="on">

注意

为了使自动完成功能生效，您可能需要在浏览器设置中开启此功能。自动完成有时也称为自动填充。

height and width

height 和 width 属性仅用于 image 输入类型。它们指定 <input type="image"> 控件的高度和宽度。

<input type="image" src="someimage.png" height="32" width="330">

min and max

min 和 max 属性指定输入字段的最小值和最大值。它在表 2 中 number 类型和 range 类型的示例中使用过。

<input type="range" id="rate" name="rate" min="1" max="5">

step

step 属性指定 <input> 控件的合法数字间隔。它适用于 date、number 和 range 输入类型。它在表 2 中 number 类型的示例中使用过。

<input type="number" id="capacity" name="capacity" min="1" max="9" step="2">

multiple

multiple 属性与 <input type="file">、<input type="mail"> 和 <select> 控件一起使用。当存在时，它指定在相应的控件中可以多选文件、输入多个电子邮件和选择多个选项。

Upload photos: <input type="file" name="photos" multiple>

form

我们之前学习过，所有表单控件都必须明确放置在 <form> 和 </form> 标签之内。然而，现代 HTML 通过引入一个字面名为 form 的新属性打破了这一限制。这个 form 属性通过 HTML 表单的 id 指定表单控件所属的 HTML 表单。通过这种方式，表单元素不再局限于 <form> 和 </form> 标签之间，可以放置在 HTML 文档的任何位置。

<form onsubmit="alert(document.getElementById('firstname').value + document.getElementById('lastname').value);return false;">
  First Name: <input type="text" id="firstname"><br>
  <input type="submit" value="Submit">
</form>
 
Last Name: <input type="text" id="lastname" form="form1">

novalidate

novalidate 是一个 <form> 属性。当它附加到 <form> 时，它指定表单的输入数据在表单提交时不会被验证。

<form novalidate>

formaction

formaction 属性用于 submit 和 image 输入类型。它指定一个文件的 URL，该文件在表单提交时将接收并处理输入数据。当存在时，formaction 属性会覆盖 <form> 标签的 action 属性。

<input type="submit" formaction="process.php" value"Submit">

formenctype

formenctype 属性用于 submit 和 image 输入类型。它指定表单数据应如何编码以供提交。当存在时，formaction 属性会覆盖 <form> 标签的 enctype 属性。

<input type="submit" formenctype="multipart/form-data" value="Submit">

formmethod

formmethod 属性用于 submit 和 image 输入类型。它指定在表单提交时将表单数据发送到文件 URL 的 HTTP 方法。当存在时，formmethod 属性会覆盖 <form> 标签的 method 属性。

<input type="submit" formaction="process.aspx" formmethod="post" value"Submit">

formnovalidate

formnovalidate 属性用于 submit 输入类型。它指定表单数据在提交时不会被验证。当存在时，formnovalidate 属性会覆盖 <form> 标签的 novalidate 属性。

<input type="submit" formnovalidate value="Submit">

满足新要求

学习了许多表单属性后，您现在可以将 autofocus、placeholder、required 和 pattern 添加到 index.html 中相应的 input 元素，如下所示：

<input type="text" id="username" name="username" placeholder="First name Last name" required autofocus>

<input type="email" id="useremail" name="useremail" placeholder="someone@gmail.com" required>

<input type="password" id="userpassword" name="userpassword" required pattern="[\w]{8,}">

<input type="url" id="weblink" name="weblink" placeholder="http://">

这段新代码应该能满足您的客户提出的四项新要求。

即将抵达终点线...

我们即将跨越终点线。等等，好像有什么不对劲！您的表单看起来和感觉起来都不像图 1 中动画所示的那样。噢，您还没有对 index.html 应用任何 CSS 样式。

下载并解压 style.css 文件到与 index.html 相同的文件夹中，然后在 index.html 的 <head> 部分添加以下代码行，以便它可以利用 style.css 文件中声明的 CSS 规则。

<head>
  <title>Formidable Forms with HTML</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

在浏览器中启动您的 index.html，您应该能看到它显示出如图 1 中动画所示的效果。

恭喜！您已成功使用现代 HTML 创建了您的第一个网络表单。

文章用 HTML 创建强大的表单最初发布于 Peter Leow's Code Blog。