html表单代码大全

<!-- HTML表单代码大全 -->

<!-- 1. 基本表单 -->
<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br><br>

    <input type="submit" value="提交">
</form>

<!-- 解释: 这是一个基本的HTML表单，包含两个输入字段（姓名和邮箱），以及一个提交按钮。表单数据将通过POST方法发送到服务器上的/submit路径。 -->

<!-- 2. 包含多种输入类型的表单 -->
<form action="/submit" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><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="hobbies">爱好:</label>
    <input type="checkbox" id="reading" name="hobbies" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" id="traveling" name="hobbies" value="traveling">
    <label for="traveling">旅行</label><br><br>

    <label for="bio">个人简介:</label><br>
    <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>

    <input type="submit" value="提交">
</form>

<!-- 解释: 这个表单包含了多种输入类型，如文本框、密码框、日期选择器、单选按钮、复选框和文本区域。用户可以根据需要选择不同的选项，并通过提交按钮将数据发送到服务器。 -->

<!-- 3. 文件上传表单 -->
<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="file">选择文件:</label>
    <input type="file" id="file" name="file"><br><br>

    <input type="submit" value="上传">
</form>

<!-- 解释: 这个表单用于文件上传。enctype属性设置为"multipart/form-data"，表示表单数据将以二进制格式编码并发送到服务器。 -->

<!-- 4. 表单验证示例 -->
<form action="/submit" method="post">
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="phone">电话:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    <small>格式: 123-456-7890</small><br><br>

    <input type="submit" value="提交">
</form>

<!-- 解释: 这个表单使用了HTML5的内置验证功能。required属性确保用户必须填写这些字段，而pattern属性用于定义电话号码的格式。如果用户输入不符合要求，浏览器会显示错误提示。 -->