HTML 表单元素是通过 <form> 标签和其他相关控件来收集用户输入的数据。通过表单控件，用户可以提交各种类型的数据，如文本、选项、日期、文件等。每种控件都有不同的输入类型、属性和用途。

以下是 HTML 表单中常见的元素及其使用说明。

1. <form> 元素

<form> 是表单的容器元素，用于包裹其他表单控件。它指定了表单的 action（数据提交地址）、method（数据提交方式）等属性。

<form action="submit_form.php" method="POST">
    <!-- 表单控件 -->
</form>
  • action：指定数据提交到的服务器地址。
  • method：指定表单数据的提交方法，通常是 GET 或 POST。

2. <input> 元素

<input> 是最常用的表单控件，支持多种不同类型的输入字段。通过 type 属性，<input> 可以变成文本框、按钮、单选按钮、复选框等。

常见类型：

  • 文本框：type="text" 用于单行文本输入。<input type="text" name="username" placeholder="请输入用户名">
  • 密码框：type="password" 用于输入密码，显示为星号（*）。<input type="password" name="password" placeholder="请输入密码">
  • 单选按钮：type="radio" 用于选择一个选项（同组的单选按钮需有相同的 name 值）。<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女
  • 复选框：type="checkbox" 用于选择多个选项。<input type="checkbox" name="subscribe" checked> 订阅新闻
  • 按钮：type="button"、type="submit" 或 type="reset" 用于提交表单、重置表单或执行其他操作。<button type="submit">提交</button> <button type="reset">重置</button>
  • 文件上传：type="file" 允许用户选择并上传文件。<input type="file" name="profile_picture">
  • 隐藏输入：type="hidden" 用于隐藏数据字段，提交时不会显示给用户。<input type="hidden" name="user_id" value="12345">
  • 日期选择器：type="date" 用于选择日期。<input type="date" name="birthday">
  • 邮箱输入框：type="email" 用于输入邮箱地址，浏览器会验证格式是否正确。<input type="email" name="email" placeholder="请输入邮箱">

3. <textarea> 元素

<textarea> 用于创建多行文本框，通常用于输入长文本（如留言、评论等）。

<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>
  • rows：指定文本框的行数。
  • cols：指定文本框的列数。

4. <select> 和 <option> 元素

<select> 用于创建下拉菜单，<option> 定义下拉菜单中的选项。

<select name="country">
    <option value="us">美国</option>
    <option value="cn">中国</option>
    <option value="jp">日本</option>
</select>
  • <select>：定义一个下拉菜单。
  • <option>：定义下拉菜单中的每一个选项。
  • selected：指定默认选中的选项。

5. <button> 元素

<button> 用于定义按钮，通常用来提交表单或执行 JavaScript 操作。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('按钮点击')">点击我</button>
  • type="submit"：提交表单。
  • type="reset"：重置表单。
  • type="button"：定义常规按钮，通常与 JavaScript 一起使用。

6. <label> 元素

<label> 元素定义了表单控件的标签，通常与表单控件配合使用，增加可访问性。通过 for 属性与表单控件关联。

<label for="username">用户名:</label>
<input type="text" id="username" name="username">
  • for：指定 <label> 与哪个表单控件关联。

7. <fieldset> 和 <legend> 元素

<fieldset> 用于分组表单中的元素，<legend> 提供该分组的标题。常用于表单控件的组织和结构化。

<fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br>
</fieldset>
  • <legend>：为 <fieldset> 提供标题。

8. <optgroup> 元素

<optgroup> 用于将 <select> 中的选项分组。

<select name="country">
    <optgroup label="亚洲">
        <option value="cn">中国</option>
        <option value="jp">日本</option>
    </optgroup>
    <optgroup label="欧洲">
        <option value="us">美国</option>
        <option value="fr">法国</option>
    </optgroup>
</select>
  • <optgroup>：对选项进行分组。
  • label：定义分组的标题。

9. <input type="image"> 元素

<input type="image"> 用作提交按钮，显示为图像按钮。src 属性指定图像路径，alt 提供替代文本。

<input type="image" src="submit_button.png" alt="提交" />

10. <datalist> 元素

<datalist> 提供一组预定义的选项，供 <input> 控件使用。它可以在用户输入时显示一个建议列表。

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>
  • list：指定与 <input> 控件关联的 <datalist> 元素的 id。
  • <option>：定义提供给用户的预选项。

11. <progress> 和 <meter> 元素

  • <progress>：表示一个进度条，用于显示任务的进展。
  • <meter>：表示度量（如统计值），用来显示范围内的值。
<progress value="70" max="100">70%</progress>
<meter value="0.7">70%</meter>
  • value：表示当前值。
  • max：定义最大值。

总结

HTML 表单元素提供了多种控件来收集不同类型的用户输入。通过合理选择和组合这些元素，你可以创建各种类型的表单，如登录表单、注册表单、搜索表单等。每个控件元素都有不同的属性和用途，可以根据需求灵活应用。