4. HTML 表单 和 它的输入元素们

HTML 表单 和 它的输入元素们

HTML 表单 是用于 收集用户输入信息 的 区域，这些信息可以被 发送到服务器 进行处理，比如 用户注册、登录、数据提交 等操作。它是 用户与服务器交互 的重要手段。

<form action="process_data.php" method="post">
    <!-- 表单内的输入元素等放在这里 -->
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

1 <form> 表单 标签属性

1. action 属性，指定 表单数据提交 的 目标 URL，也就是 服务器端脚本 的 位置，用于处理 表单数据；
2. method 属性，定义 表单数据的 提交方式，主要有 get 和 post 两种方法：
   1. get 方法，将表单数据 附加在 URL 后面 发送，适用于 简单的、非敏感的 数据，并且 有长度限制；
   2. post 方法，将表单数据 放在请求体中 发送，更适用于 提交 大量数据 或 敏感数据，如 密码 等。

2 <form> 表单 最常用元素

2.1 <input> 输入标签

<input> 标签 是最常用的 表单元素之一，它有 多种类型，每种类型 用于收集 不同类型 的 用户信息。

1 <input> 标签的 type 属性

1. type="text"，收集用户输入的 单行文本，如 姓名、地址 等信息；
2. type="paassword"，用户输入 密码 等敏感信息。输入的内容会以 黑点 或 星号 等形式 显示，以保护隐私。
3. type="email" 电子邮件 和 type="tel" 电话号码，HTML5 新增的输入类型：
   1. email 类型的输入框 会对用户输入的内容 进行基本的 格式验证，看是否符合 电子邮件 的格式；
   2. tel 类型用于 输入电话号码，在一些移动设备上可能会显示 合适的 键盘布局（如数字键盘）。
4. type="radio" 单选框，用于在 一组选项中 让用户选择 一个选项；
5. type="checkbos" 复选框，允许用户选择 多个选项。通常用于 收集用户的 兴趣爱好、权限选择 等信息；
6. type="submit" 提交按钮 和 type="reset" 重置按钮：
   1. submit 按钮，用于将 表单数据 提交到 服务器；
   2. reset 按钮，用于将 表单中的 输入元素 重置为 初始状态。

2 <input> 标签的 name 属性

name 属性 用于 在表单提交时 作为 变量名 来 标识 这个 输入的值。

3 <input> 标签的 placeholder 属性

placeholder 属性 可以在 输入框为空时 显示 提示文本。