html表单标签详细说明以及案例

HTML表单标签用于创建用户输入数据的界面。以下是常用的表单标签及其说明和案例：

1. <form>: 定义表单。

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

2. <input>: 定义输入字段。

   <input type="text" name="username" placeholder="输入用户名">

3. <label>: 为输入字段定义标签。

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

4. <textarea>: 定义多行文本输入。

   <textarea name="message" rows="4" cols="50"></textarea>

5. <button>: 定义按钮。

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

6. <select>: 定义下拉列表。

   <select name="cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </select>

7. <option>: 定义下拉列表中的选项。
   见<select>示例。

8. <fieldset>: 将表单中的相关元素分组。

   <fieldset>
     <legend>个人信息:</legend>
     <label for="name">姓名:</label>
     <input type="text" id="name" name="name">
   </fieldset>

9. <legend>: 定义<fieldset>的标题。
   见<fieldset>示例。

10. <datalist>: 定义输入字段的预定义选项列表。

    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
    </datalist>

11. <output>: 定义计算结果。

    <output name="result" for="a b">0</output>

案例：

<form action="/submit" method="post">
  <fieldset>
    <legend>用户注册</legend>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required><br>
    <label for="gender">性别:</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select><br>
    <label for="bio">个人简介:</label><br>
    <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br>
    <button type="submit">注册</button>
  </fieldset>
</form>