HTML 表单和输入

HTML 表单（Forms）是用户与网页交互的重要方式之一，允许用户输入数据并通过提交的方式将数据发送到服务器。表单常用于登录、注册、搜索、支付等功能的实现。

1. HTML 表单基本结构

一个表单是由 <form> 标签包裹的，其中包含不同的输入元素（如文本框、单选框、复选框、提交按钮等）。表单通过 action 属性指定数据提交的目标 URL，通过 method 属性指定数据提交方式（如 GET 或 POST）。

基本语法：

<form action="submit_form.php" method="POST">
    <!-- 表单输入元素 -->
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">提交</button>
</form>

• action：指定数据提交的 URL。
• method：定义数据提交的方法，常见的是 GET 和 POST。
  • GET：数据附加在 URL 后面，适用于获取数据。
  • POST：数据放在请求体中，适用于提交数据。

2. 表单输入元素

a. 文本框（<input type="text">）

文本框用于让用户输入单行文本。

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

• 用户可以在文本框中输入单行文本。

b. 密码框（<input type="password">）

密码框用于让用户输入密码，输入的内容会以星号（*）显示。

<form>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
</form>

c. 电子邮件框（<input type="email">）

电子邮件框用于输入电子邮件地址，浏览器会自动验证输入的格式。

<form>
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email">
</form>

• 如果用户输入的电子邮件格式不正确，浏览器会显示错误提示。

d. 单选按钮（<input type="radio">）

单选按钮用于从一组互斥的选项中选择一个选项。

<form>
    <label for="gender-male">男：</label>
    <input type="radio" id="gender-male" name="gender" value="male">
    
    <label for="gender-female">女：</label>
    <input type="radio" id="gender-female" name="gender" value="female">
</form>

• name 属性必须相同，表示它们属于同一组单选按钮。

e. 复选框（<input type="checkbox">）

复选框允许用户选择一个或多个选项。

<form>
    <label for="subscribe">订阅新闻邮件：</label>
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
</form>

• 用户可以选择一个或多个复选框。

f. 下拉菜单（<select> 和 <option>）

下拉菜单允许用户从预设的选项中选择一个或多个。

<form>
    <label for="country">选择国家：</label>
    <select id="country" name="country">
        <option value="us">美国</option>
        <option value="cn">中国</option>
        <option value="jp">日本</option>
    </select>
</form>

• 使用 <select> 定义下拉框，<option> 定义每一个选项。

g. 文本区域（<textarea>）

文本区域允许用户输入多行文本，适合长文本或多行数据的输入。

<form>
    <label for="comments">评论：</label>
    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
</form>

• rows 和 cols 属性定义文本区域的行数和列数。

h. 文件上传（<input type="file">）

文件上传允许用户选择文件并上传。

<form>
    <label for="file-upload">上传文件：</label>
    <input type="file" id="file-upload" name="file-upload">
</form>

• 通过 <input type="file"> 允许用户选择并上传文件。

i. 按钮（<button> 和 <input type="button">）

按钮用于触发表单的提交或其他操作。

<form>
    <button type="submit">提交</button>
    <input type="reset" value="重置">
</form>

• <button> 和 <input type="button"> 可以用于触发提交、重置表单或执行其他 JavaScript 动作。

---

3. 表单验证

HTML 提供了多种方法来验证用户输入的数据。可以使用以下属性来进行简单的表单验证：

a. required

指定该输入框是必填的，用户必须输入内容才能提交表单。

<form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
</form>

b. min 和 max

对于数字输入，可以指定最小值和最大值。

<form>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="18" max="100" required>
</form>

c. pattern

用于指定一个正则表达式，用于验证用户输入的数据格式。

<form>
    <label for="phone">手机号码：</label>
    <input type="text" id="phone" name="phone" pattern="\d{11}" title="请输入 11 位数字">
</form>

d. type="email"

对于电子邮件输入框，浏览器会自动验证是否符合电子邮件格式。

<form>
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email" required>
</form>

---

4. 表单提交

提交表单时，可以使用两种方式：GET 和 POST。

a. GET 方法

GET 方法将表单数据附加到 URL 后面，适用于不敏感数据的提交（如查询、搜索等）。

<form action="/search" method="GET">
    <label for="query">搜索：</label>
    <input type="text" id="query" name="query">
    <button type="submit">提交</button>
</form>

b. POST 方法

POST 方法将表单数据放在请求体中，适用于提交敏感数据（如登录、注册等）。

<form action="/login" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">登录</button>
</form>

• GET 方法适用于获取数据，数据附加在 URL 中，较不安全。
• POST 方法适用于提交数据，数据放在请求体中，较为安全。

---

5. 总结

HTML 表单是网页交互中不可或缺的部分，它使得用户能够与网站进行数据交换。表单可以包含各种输入元素（如文本框、密码框、单选框、复选框、下拉菜单等），并通过 GET 或 POST 方法将数据发送到服务器。表单的验证也可以通过 HTML 属性（如 required、min、max、pattern 等）来实现，确保用户输入的数据符合要求。

通过 HTML 表单，我们能够构建各种互动功能，如注册、登录、搜索、留言等。如果有更多问题或想要更详细的示例，随时向我提问！