表单

在现代网页开发中，表单是实现用户与网站交互的核心组件。无论是注册账号、登录系统、提交评论、进行搜索还是在线购物，表单始终承担着收集和传递用户数据的重要职责。 通过表单，用户得以有效地与网站进行信息交换，使静态页面具备了动态交互的能力。

表单的容器：<form> 标签

所有用于收集用户输入的元素，都必须被包裹在一个 <form> 标签内。这个标签就像一个“包裹”，它把所有相关的输入项（如用户名、密码、按钮等）都打包在一起，准备发送给服务器进行处理。

|
<form>
  <!-- 所有表单元素都放在这里 -->
</form>

<form> 标签有两个重要的属性，action 和 method。action 属性指定了当用户提交表单时，这些数据应该被发送到哪个服务器地址去处理。method 属性则定义了数据发送的方式（最常见的是GET和POST）。

最万能的输入框：<input> 标签

<input> 标签是表单的“瑞士军刀”，它通过改变自身的 type 属性，可以变身为各种不同的输入控件。

文本输入

• type="text": 创建一个单行的文本输入框，用于输入姓名、邮箱等。
• type="password": 创建一个密码输入框，用户输入的内容会自动显示为星号或圆点。

|
<p>用户名: <input type="text"></p>
<p>密 码: <input type="password"></p>

作出选择

• type="radio": 创建一个单选按钮。对于同一组的单选按钮，你必须为它们设置相同的 name 属性，这样浏览器才知道它们是“互斥”的选项，一次只能选择一个。
• type="checkbox": 创建一个复选框，允许用户选择零个、一个或多个选项。

|
<p>性别:
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女
</p>
<p>兴趣爱好:
  <input type="checkbox" name="hobby"

提交动作

type="submit"，其实它就是用来生成表单里的“提交”按钮的。当我们把这个按钮加到表单里，用户填写好内容后只要轻轻一点，浏览器就会自动把表单里所有的数据按照表单的 action 属性指定的地址打包发送出去。

更智能的输入框：HTML5新特性

HTML5为<input>标签带来了许多新的type类型和属性，它们不仅能提供更好的用户体验，还自带了基础的浏览器验证功能。

• type="email": 专门用于输入邮箱地址。在支持的浏览器上，如果用户输入的内容不符合标准的邮箱格式，提交时会自动提示错误。
• type="number": 提供一个只能输入数字的输入框，在很多浏览器上还会带有一个方便的上下箭头来增加/减少数值。
• type="date": 在支持的浏览器上，点击这个输入框会弹出一个日历控件，让用户方便地选择日期。

|
<p>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
</p>
<p>
  <label for="age">年龄:</label>
  <input type=

除了新的类型，还有两个非常有用的属性：

• placeholder: 在输入框为空时，显示一些提示性的示例文字。当用户开始输入时，这些文字会自动消失。
• required: 一个布尔属性。如果给输入框加上这个属性，那么在提交表单时，该输入框必须被填写，否则浏览器会阻止提交并提示用户。

|
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="例如：王小明" required>

在这个例子中，输入框会预先显示“例如：王小明”作为提示，并且用户必须填写姓名才能成功提交表单。这些HTML5的新特性，让你无需编写任何JavaScript代码，就能实现更友好、更健壮的表单。

提升可用性：<label> 标签

我们之前的例子里，都是用纯文本来描述输入框的。但这样有一个问题：当用户点击“用户名”这三个字时，并不能自动聚焦到对应的输入框。为了解决这个问题，并提升网页的可访问性（特别是对于屏幕阅读器），我们应该使用 <label> 标签。

通过给 <input> 设置一个唯一的 id 属性，然后在 <label> 中使用 for 属性指向这个id，就可以将它们关联起来。

|
<label for="username">用户名:</label>
<input type="text" id="username" name="username">

现在，当用户点击“用户名”这个标签时，光标就会自动跳到输入框内，用户体验会好很多。

多行文本输入：<textarea>

如果希望用户输入大段的文字，比如一篇文章或一条评论，单行的<input>就不够用了。这时我们需要 <textarea> 标签。

|
<label for="comment">请留下你的评论:</label><br>
<textarea id="comment" name="comment" rows="5" cols="30"></textarea>

下拉选择菜单：<select>

当你想让用户从一组预定义的选项中进行选择时，单选按钮或复选框可能会占用太多空间。这时，一个紧凑的下拉菜单就是更好的选择。我们使用<select>和<option>标签来创建它。

• <select>: 整个下拉菜单的容器。
• <option>: 下拉菜单中的一个选项。value属性是提交给服务器的值，而标签之间的内容是用户看到的可选文本。

|
<label for="city">你所在的城市:</label>
<select id="city" name="city">
  <option value="">--请选择--</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>

选项分组 <optgroup>

有时候，我们会遇到下拉菜单里的选项特别多，比如要让大家选择喜欢的食物，水果、蔬菜、零食一大堆都混在一起，找起来就很麻烦。 这时候，<optgroup>标签就像是给超市的货架分区一样，可以帮我们把相关的选项归类分组。这样一来，用户在选择时就能一目了然，效率也高了不少。

|
<select name="food">
  <optgroup label="水果">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value

为表单控件分组：<fieldset> 和 <legend>

当一个表单非常长，包含多个部分时（比如注册表单包含“账户信息”和“个人资料”两部分），我们可以使用<fieldset>和<legend>来对相关的控件进行分组。

• <fieldset>: 像一个“栅栏”，把一组相关的表单控件圈起来。浏览器通常会为它渲染一个边框。
• <legend>: “栅栏”的标题，它描述了这个控件组是关于什么的。

|
<form>
  <fieldset>
    <legend>账户信息</legend>
    <p><label>用户名: <input type="text" name="username"></label></p>
    <p><label>密码: <input type="password" name="password"></

更灵活的按钮：<button>

除了 <input type="submit">，我们还可以使用 <button> 标签来创建按钮。<button> 标签的好处是它更灵活，你可以在开始和结束标签之间放入文字、图片甚至其他HTML元素。

|
<button type="submit">
  <strong>立即注册</strong>
</button>

一个简单完整的联系表单

我们已经一起学习了表单的各种基础知识，比如输入框、单选按钮、文本区域和按钮。接下来，我们就像拼积木一样，把这些知识点一块块组合起来，亲手搭建一个功能齐全的联系表单。 这个表单不仅能收集用户的姓名、邮箱，还能让用户选择咨询类型，并填写详细的问题描述。通过这个例子，我们可以更直观地理解表单各个部分是如何协同工作的。

|
<form>
  <h2>联系我们</h2>
  <p>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <label for

在这个例子中，“广州”选项因为有selected布尔属性，所以会作为默认选中的项。

这样做不仅在视觉上让表单结构更清晰，在语义上也增强了可访问性，屏幕阅读器会告诉用户他们正在填写哪一组信息。

这个表单虽然还不能真正地发送邮件（因为那需要后端程序），但它在结构上已经是一个完整、专业、且具有良好可访问性的HTML表单了。