表单是网页中收集用户输入数据的基本方式。通过表单标签 <form> 和一系列输入元素（如 <input>, <textarea>, <select> 等），我们可以创建一个互动的用户界面，允许用户提交信息。掌握如何使用 HTML 表单和输入元素能帮助你构建具有数据收集、处理和交互功能的网页。

---

1. 表单标签：<form>

<form> 标签用于创建表单，并包含用户输入的所有字段。表单通过 action 和 method 属性指定数据提交的目标和方法。

示例：

<form action="/submit" method="POST">
    <!-- 输入字段将在这里 -->
</form>

• action：指定数据提交的服务器端地址。可以是一个 URL，表示表单数据提交的目标。
• method：指定表单提交的 HTTP 方法，常用的有 GET 和 POST：
• GET：将表单数据附加在 URL 后提交，适用于获取数据。
• POST：将表单数据作为请求的主体发送，适用于提交敏感数据或大数据量。

---

2. 输入元素：<input>, <textarea>, <select>, <option>, <button>

HTML 提供了多种输入元素，用于不同类型的数据收集。

• <input>：最常用的输入元素，支持多种类型（如文本框、密码框、单选框等）。

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

• <textarea>：用于多行文本输入，常用于评论或留言框。

<textarea name="comments"></textarea>

• <select>：下拉列表框，允许用户从多个选项中选择。

<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

• <option>：在 <select> 中定义单个选项。

<option value="beijing">北京</option>

• <button>：按钮元素，通常用于触发表单提交或执行某些动作。

<button type="submit">提交</button>

---

3. 输入类型：text, password, radio, checkbox, date, email

<input> 元素通过 type 属性来指定输入字段的类型，常见的输入类型包括：

• type="text"：普通文本输入框。

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

• type="password"：密码输入框，输入的内容会以星号或圆点显示。

<input type="password" name="password">

• type="radio"：单选框，允许用户在多个选项中选择一个。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

• type="checkbox"：复选框，允许用户在多个选项中选择多个。

<input type="checkbox" name="interests" value="music"> 音乐
<input type="checkbox" name="interests" value="sports"> 体育

• type="date"：日期输入框，允许用户选择日期。

<input type="date" name="dob">

• type="email"：电子邮件输入框，浏览器会验证用户输入是否符合电子邮件格式。

<input type="email" name="email">

作用：不同类型的输入字段帮助根据数据的需求提供不同的输入方式。通过合理选择输入类型，可以提高用户体验和表单验证的准确性。

---

4. 表单的 action 和 method 属性

• action：指定表单数据提交的目标 URL。例如，当表单提交时，数据会发送到 /submit 页面进行处理。

<form action="/submit" method="POST">
    <!-- 表单内容 -->
</form>

• method：指定表单提交数据的方式。常用的有 GET 和 POST：
• GET：适合用来获取数据，表单数据会附加在 URL 后。适用于查询或过滤。
• POST：适合用来提交数据，表单数据作为请求体发送，适用于传输敏感数据或大数据量。

<form action="/submit" method="POST">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>

---

5. 提交按钮：<input type="submit">, <button>

表单提交通常通过点击提交按钮来触发。HTML 提供了两种常见的提交按钮：

• <input type="submit">：提交按钮，点击后表单会被提交。

<input type="submit" value="提交">

• <button>：按钮元素，也可作为提交按钮使用，通常具有更多自定义功能。

<button type="submit">提交</button>

作用：

• <input type="submit"> 和 <button> 都是表单提交的触发器。在多数情况下，使用 <button> 可以提供更多的样式和功能自定义。

---

总结

表单和输入元素是创建用户交互界面不可或缺的部分。通过使用 <form>、<input>、<textarea>、<select> 等标签，你可以收集用户输入的数据并进行提交。不同的输入类型（如 text、password、radio 等）帮助用户根据需求选择不同的输入方式，提升用户体验。合理使用 action 和 method 属性可以确保表单数据正确地提交到服务器端进行处理。掌握表单和输入元素的用法，你可以创建功能丰富、用户友好的网页表单。