钟文志的部落格

Appearance

HTML 表单用于收集用户输入数据并将其发送到服务器进行处理。表单是交互性网页的基础部分。以下是关于 HTML 表单的详细说明和示例：

基本表单元素 ​

HTML 表单由 <form> 标签定义，表单元素包括文本输入、密码输入、单选按钮、复选框、提交按钮等。

示例 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本表单示例</title>
</head>
<body>
    <h2>用户注册表单</h2>
    <form action="/submit_form" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br><br>

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

        <label for="dob">生日:</label>
        <input type="date" id="dob" name="dob"><br><br>

        <label for="gender">性别:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>

        <label for="interests">兴趣:</label>
        <input type="checkbox" id="sports" name="interests" value="sports">
        <label for="sports">体育</label>
        <input type="checkbox" id="music" name="interests" value="music">
        <label for="music">音乐</label><br><br>

        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="uk">英国</option>
        </select><br><br>

        <label for="bio">自我介绍:</label><br>
        <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>

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

表单元素详细介绍 ​

  1. 文本输入（Text Input）

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

  2. 密码输入（Password Input）

    html
    <label for="password">密码:</label>
<input type="password" id="password" name="password" required>

  3. 电子邮件输入（Email Input）

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

  4. 日期输入（Date Input）

    html
    <label for="dob">生日:</label>
<input type="date" id="dob" name="dob">

  5. 单选按钮（Radio Button）

    html
    <label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

  6. 复选框（Checkbox）

    html
    <label for="interests">兴趣:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">体育</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">音乐</label>

  7. 下拉列表（Select Box）

    html
    <label for="country">国家:</label>
<select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
</select>

  8. 文本区域（Textarea）

    html
    <label for="bio">自我介绍:</label><br>
<textarea id="bio" name="bio" rows="4" cols="50"></textarea>

  9. 提交按钮（Submit Button）

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

  10. 重置按钮（Reset Button）

    html
    <input type="reset" value="重置">

表单属性 ​

  • action：表单提交的目标 URL。
  • method：表单数据提交的方法（get 或 post）。
  • name：表单的名称。
  • id：表单的唯一标识符。

通过使用这些表单元素和属性，您可以创建复杂且功能齐全的用户输入界面。表单在收集和处理用户数据方面发挥着重要作用。