sunsetz の 窝

切换主题

HTML 表单 ​

1. <form> 元素： ​

  • 定义一个表单，包含action属性（表单数据提交到的URL）和method属性（数据提交的方式，通常是GET或POST）。

2. 输入字段： ​

  • <input>：定义输入字段，类型可以是text、password、checkbox、radio、file等。

3. 文本区域： ​

  • <textarea>：定义一个多行文本输入控件。

4. 按钮： ​

  • <button>：定义一个按钮，可以用于提交表单或执行其他动作。
  • <input type="submit">：定义一个提交按钮。

5. 选择菜单： ​

  • <select>：定义一个下拉选择菜单。
  • <option>：定义下拉菜单中的选项。

6. 单选按钮组： ​

  • 使用<input type="radio">元素创建一组单选按钮，通常这些按钮共享相同的name属性值。

7. 复选框组： ​

  • 使用<input type="checkbox">元素创建复选框组，每个复选框可以独立选中或取消。

8. 隐藏字段： ​

  • <input type="hidden">：定义一个隐藏的输入字段，用户看不到，但会随表单一起提交。

9. 字段集： ​

  • <fieldset>：将表单中相关的元素分组。
  • <legend>：为<fieldset>元素定义标题。

10. 标签： ​

  • <label>：为<input>、<textarea>、<select>等元素定义标签，提高可访问性。

11. 表单验证： ​

  • required：表示字段必须填写。
  • pattern：定义字段必须匹配的正则表达式。
  • min、max：定义输入的最小或最大值。
  • maxlength、minlength：定义输入的最大或最小长度。

12. 按钮类型： ​

  • submit：提交表单。
  • reset：重置表单到默认值。
  • button：普通按钮，不执行任何默认行为。

13. 表单属性： ​

  • autocomplete：定义表单是否应该自动完成输入字段。
  • novalidate：定义表单提交时不应进行验证。

14. 表单方法： ​

  • GET：通过URL发送表单数据，数据可见。
  • POST：通过请求主体发送表单数据，数据不可见。

15. 响应处理： ​

  • 表单提交后，服务器可以返回响应，这可以是一个新的页面、一个确认消息或更新后的数据。

16. JavaScript 增强： ​

  • 使用JavaScript可以增强表单的功能，例如实时验证、动态更新表单元素等。

示例 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例表单</title>
</head>
<body>

    <form action="/submit_form" method="post">
        <fieldset>
            <legend>注册信息</legend>

            <!-- 文本输入 -->
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>

            <!-- 密码输入 -->
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required minlength="8">

            <!-- 性别选择 -->
            <label>性别:</label>
            <input type="radio" id="male" name="gender" value="male" required>
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>

            <!-- 爱好复选框 -->
            <label>爱好:</label>
            <input type="checkbox" id="hobby1" name="hobby" value="sports">
            <label for="hobby1">运动</label>
            <input type="checkbox" id="hobby2" name="hobby" value="reading">
            <label for="hobby2">阅读</label>

            <!-- 下拉选择菜单 -->
            <label for="country">国家:</label>
            <select id="country" name="country">
                <option value="">请选择国家</option>
                <option value="china">中国</option>
                <option value="usa">美国</option>
                <option value="japan">日本</option>
            </select>

            <!-- 文本区域 -->
            <label for="bio">个人简介:</label>
            <textarea id="bio" name="bio" rows="4" cols="50"></textarea>

            <!-- 隐藏字段 -->
            <input type="hidden" name="hiddenField" value="someValue">

            <!-- 提交按钮 -->
            <button type="submit">提交</button>
        </fieldset>
    </form>

</body>
</html>