HTML 表单示例

<form action="/login" method="POST">
    <h2>用户登录</h2>
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div>
        <label>
            <input type="checkbox" name="remember"> 记住我
        </label>
    </div>
    <button type="submit">登录</button>
</form> 

<form action="/register" method="POST">
    <fieldset>
        <legend>基本信息</legend>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" minlength="3" maxlength="20" required>

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" minlength="8" required>

        <label for="confirm-password">确认密码：</label>
        <input type="password" id="confirm-password" name="confirm-password" required>
    </fieldset>

    <fieldset>
        <legend>详细信息</legend>
        <label for="phone">手机号：</label>
        <input type="tel" id="phone" name="phone" pattern="1[3-9][0-9]{9}">

        <label for="birthday">生日：</label>
        <input type="date" id="birthday" name="birthday">

        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option value="">请选择</option>
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="other">其他</option>
        </select>
    </fieldset>

    <div>
        <label>
            <input type="checkbox" name="terms" required>
            我已阅读并同意<a href="/terms">服务条款</a>
        </label>
    </div>

    <button type="submit">注册</button>
</form> 

<form action="/contact" method="POST">
    <h2>联系我们</h2>

    <div class="form-row">
        <div>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required>
        </div>
    </div>

    <div>
        <label for="subject">主题：</label>
        <select id="subject" name="subject" required>
            <option value="">请选择咨询类型</option>
            <option value="general">一般咨询</option>
            <option value="technical">技术支持</option>
            <option value="billing">账单问题</option>
            <option value="feedback">意见反馈</option>
        </select>
    </div>

    <div>
        <label for="message">留言内容：</label>
        <textarea id="message" name="message" rows="5" cols="50" placeholder="请输入您的留言内容..." required></textarea>
    </div>

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

<form action="/survey" method="POST">
    <h2>用户满意度调查</h2>

    <fieldset>
        <legend>您的职业：</legend>
        <label>
            <input type="radio" name="occupation" value="student" required> 学生
        </label>
        <label>
            <input type="radio" name="occupation" value="developer"> 开发人员
        </label>
        <label>
            <input type="radio" name="occupation" value="designer"> 设计师
        </label>
        <label>
            <input type="radio" name="occupation" value="other"> 其他
        </label>
    </fieldset>

    <fieldset>
        <legend>您使用过以下哪些功能？（多选）</legend>
        <label>
            <input type="checkbox" name="features" value="editor"> 在线编辑器
        </label>
        <label>
            <input type="checkbox" name="features" value="converter"> 格式转换器
        </label>
        <label>
            <input type="checkbox" name="features" value="validator"> 代码检验器
        </label>
        <label>
            <input type="checkbox" name="features" value="tutorial"> 教程文档
        </label>
    </fieldset>

    <fieldset>
        <legend>总体满意度评分：</legend>
        <label for="rating">请评分（1-10）：</label>
        <input type="range" id="rating" name="rating" min="1" max="10" value="8">
    </fieldset>

    <button type="submit">提交调查</button>
    <button type="reset">重置</button>
</form> 

<form action="/upload" method="POST" enctype="multipart/form-data">
    <h2>文件上传</h2>

    <div>
        <label for="avatar">上传头像：</label>
        <input type="file" id="avatar" name="avatar" accept="image/png,image/jpeg,image/gif" required>
        <p>支持的格式：PNG、JPEG、GIF，最大 2MB</p>
    </div>

    <div>
        <label for="documents">上传文档：</label>
        <input type="file" id="documents" name="documents" accept=".pdf,.doc,.docx" multiple>
        <p>支持 PDF、Word 文档，可选择多个文件</p>
    </div>

    <div>
        <label for="description">文件描述：</label>
        <textarea id="description" name="description" rows="3"></textarea>
    </div>

    <button type="submit">上传</button>
</form> 

<form action="/search" method="GET" class="search-form">
    <input type="search" name="q" placeholder="搜索教程..." autofocus>
    <button type="submit">搜索</button>
</form>