HTML表单

<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">登录</button>
</form>

<form>
    <fieldset>
        <legend>组标题</legend>
        <div>
            <label for="input1">标签1</label>
            <input id="input1" name="input1">
        </div>
        <div>
            <label>
                <input type="checkbox" name="check1">
                选项1
            </label>
        </div>
    </fieldset>
    <button type="submit">提交</button>
</form>

<!-- 单行文本 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码 -->
<input type="password" name="password" placeholder="请输入密码">

<!-- 搜索 -->
<input type="search" name="search" placeholder="搜索...">

<!-- 邮箱 -->
<input type="email" name="email" placeholder="example@email.com">

<!-- 电话 -->
<input type="tel" name="phone" placeholder="123-456-7890">

<!-- URL -->
<input type="url" name="website" placeholder="https://example.com">

<!-- 数字 -->
<input type="number" name="quantity" min="1" max="10" step="1">

<!-- 范围 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 日期 -->
<input type="date" name="birthday">

<!-- 时间 -->
<input type="time" name="meeting-time">

<!-- 颜色 -->
<input type="color" name="favcolor">

<!-- 复选框 -->
<input type="checkbox" name="interest" value="sports"> 运动
<input type="checkbox" name="interest" value="music"> 音乐

<!-- 单选按钮 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*">

<!-- 隐藏字段 -->
<input type="hidden" name="user_id" value="12345">

<!-- 日期时间 -->
<input type="datetime-local" name="meeting">

<!-- 月份 -->
<input type="month" name="birthmonth">

<!-- 周 -->
<input type="week" name="week">

<!-- 搜索 -->
<input type="search" name="q">

<!-- 电话号码 -->
<input type="tel" name="phone">

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

<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="languages">编程语言：</label>
<select id="languages" name="languages" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
</select>

<fieldset>
    <legend>联系信息</legend>
    
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
</fieldset>

<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

<!-- 进度条 -->
<label for="progress">下载进度：</label>
<progress id="progress" value="70" max="100">70%</progress>

<!-- 度量器 -->
<label for="storage">存储使用：</label>
<meter id="storage" value="6" min="0" max="10">6 out of 10</meter>

<input type="text" name="username" required>

<!-- 邮箱格式 -->
<input type="email" name="email" required>

<!-- URL格式 -->
<input type="url" name="website">

<!-- 数字范围 -->
<input type="number" name="age" min="18" max="100">

<!-- 手机号码格式 -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
       title="格式：123-456-7890">

<!-- 邮政编码 -->
<input type="text" name="zipcode" pattern="[0-9]{5}" 
       title="5位数字邮政编码">

<input type="text" id="username" name="username" 
       oninvalid="this.setCustomValidity('请输入有效的用户名')"
       oninput="this.setCustomValidity('')" required>

// 检查字段有效性
if (input.validity.valid) {
    // 字段有效
} else {
    // 字段无效
    if (input.validity.valueMissing) {
        // 缺少值
    }
    if (input.validity.typeMismatch) {
        // 类型不匹配
    }
    if (input.validity.patternMismatch) {
        // 模式不匹配
    }
}

// 显示自定义验证消息
input.setCustomValidity('自定义错误消息');

<!-- 使用for属性 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 隐式关联 -->
<label>
    邮箱：
    <input type="email" name="email">
</label>

<div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" 
           aria-describedby="password-help" required>
    <div id="password-help">密码必须包含至少8个字符</div>
</div>

<div role="alert" aria-live="polite" id="error-message"></div>

<div class="form-group">
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" 
           aria-invalid="false"
           aria-describedby="email-error">
    <div id="email-error" class="error-message"></div>
</div>

<script>
    const emailInput = document.getElementById('email');
    const emailError = document.getElementById('email-error');
    
    emailInput.addEventListener('blur', function() {
        if (!this.validity.valid) {
            this.setAttribute('aria-invalid', 'true');
            emailError.textContent = '请输入有效的邮箱地址';
        } else {
            this.setAttribute('aria-invalid', 'false');
            emailError.textContent = '';
        }
    });
</script>

// 表单提交事件
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交
    
    // 表单数据
    const formData = new FormData(this);
    
    // 验证表单
    if (this.checkValidity()) {
        // 发送数据
        fetch('/submit', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // 处理响应
            console.log('成功:', data);
        })
        .catch(error => {
            console.error('错误:', error);
        });
    }
});

// 动态表单字段
function addField() {
    const container = document.getElementById('fields-container');
    const newField = document.createElement('div');
    newField.innerHTML = '<input type="text" name="dynamic-field[]">';
    container.appendChild(newField);
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册 - 表单练习</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        fieldset {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>
    
    <form action="/register" method="post">
        <fieldset>
            <legend>基本信息</legend>
            
            <div class="form-group">
                <label for="fullname">姓名：</label>
                <input type="text" id="fullname" name="fullname" required>
            </div>
            
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="phone">电话：</label>
                <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
                       title="格式：123-456-7890">
            </div>
            
            <div class="form-group">
                <label for="birthdate">出生日期：</label>
                <input type="date" id="birthdate" name="birthdate">
            </div>
        </fieldset>
        
        <fieldset>
            <legend>账户信息</legend>
            
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" 
                       pattern="[A-Za-z0-9]{5,}" 
                       title="用户名必须至少5个字符，只能包含字母和数字" required>
            </div>
            
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" 
                       minlength="8" required>
            </div>
            
            <div class="form-group">
                <label for="confirm-password">确认密码：</label>
                <input type="password" id="confirm-password" name="confirm-password" required>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>其他信息</legend>
            
            <div class="form-group">
                <label for="country">国家：</label>
                <select id="country" name="country">
                    <option value="">请选择国家</option>
                    <option value="china">中国</option>
                    <option value="usa">美国</option>
                    <option value="uk">英国</option>
                    <option value="japan">日本</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>兴趣：</label>
                <div>
                    <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>
                    
                    <input type="checkbox" id="reading" name="interests" value="reading">
                    <label for="reading">阅读</label>
                </div>
            </div>
            
            <div class="form-group">
                <label for="bio">个人简介：</label>
                <textarea id="bio" name="bio" rows="4"></textarea>
            </div>
        </fieldset>
        
        <div class="form-group">
            <input type="checkbox" id="terms" name="terms" required>
            <label for="terms">我同意<a href="#">服务条款</a></label>
        </div>
        
        <button type="submit">注册</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>