html表单制作

作者：氵冗氵孚发布日期:2025-11-06 浏览:69

<!DOCTYPE html>
<html>
<head>
    <title>HTML 表单示例</title>
</head>
<body>
    <h2>用户注册表单</h2>
    <form action="/submit_form" method="post">
        <!-- 文本输入框 -->
        <label for="username">用户名:</label><br>
        <input type="text" id="username" name="username" required><br><br>

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

        <!-- 电子邮件输入框 -->
        <label for="email">电子邮件:</label><br>
        <input type="email" id="email" name="email" required><br><br>

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

        <!-- 爱好选择 -->
        <label>爱好:</label><br>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">阅读</label><br>
        <input type="checkbox" id="sports" name="hobbies" value="sports">
        <label for="sports">运动</label><br><br>

        <!-- 下拉菜单 -->
        <label for="country">国家:</label><br>
        <select id="country" name="country">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="uk">英国</option>
        </select><br><br>

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

解释说明：

<form> 标签：定义了一个 HTML 表单，用于收集用户输入。action 属性指定了表单数据提交的 URL，method 属性指定了提交方式（GET 或 POST）。
文本输入框 (<input type="text">)：用于输入文本信息，如用户名。
密码输入框 (<input type="password">)：用于输入密码，输入的内容会以掩码形式显示。
电子邮件输入框 (<input type="email">)：用于输入电子邮件地址，浏览器会进行基本的格式验证。
单选按钮 (<input type="radio">)：用于选择一个选项，同一组单选按钮的 name 属性必须相同。
复选框 (<input type="checkbox">)：用于选择多个选项。
下拉菜单 (<select> 和 <option>)：用于从多个选项中选择一个值。
提交按钮 (<input type="submit">)：用于提交表单数据。

希望这段代码和解释对你有帮助！

上一篇：html爱心烟花特效代码

下一篇：html

标签