console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>调查问卷</title>
</head>
<body>
<h2>用户注册</h2>
<form>
<div>
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username"
required minlength="5"
placeholder="至少5个字符">
</div>
<div>
<label for="email">电子邮箱:</label><br>
<input type="email" id="email" name="email"
required
placeholder="example@domain.com">
</div>
<div>
<label for="password">密码:</label><br>
<input type="password" id="password" name="password"
required minlength="8"
placeholder="至少8个字符">
</div>
<div>
<label for="confirm_password">确认密码:</label><br>
<input type="password" id="confirm_password" name="confirm_password"
required
placeholder="再次输入密码"
oninput="this.setCustomValidity(this.value != document.getElementById('password').value ? '两次密码不匹配' : '')">
</div>
<div>
<button type="submit">注册</button>
</div>
</form>
<h2>用户信息收集</h2>
<form>
<div>
<label for="birthdate">出生日期:</label><br>
<input type="date" id="birthdate" name="birthdate" required>
</div>
<div>
<label for="phone">电话号码:</label><br>
<input type="tel" id="phone" name="phone"
pattern="\d{11}"
placeholder="例如:13800138000"
required>
</div>
<div>
<label for="website">个人网站URL:</label><br>
<input type="url" id="website" name="website"
placeholder="例如:https://example.com"
required>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<h2>调查问卷</h2>
<form>
<fieldset>
<legend>1. 性别</legend>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">男</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">其他</label>
</fieldset>
<fieldset>
<legend>2. 兴趣爱好(至少选择3项)</legend>
<input type="checkbox" id="reading" name="hobby" value="reading" required>
<label for="reading">阅读</label><br>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label><br>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label><br>
<input type="checkbox" id="travel" name="hobby" value="travel">
<label for="travel">旅行</label><br>
<input type="checkbox" id="games" name="hobby" value="games">
<label for="games">游戏</label>
</fieldset>
<fieldset>
<legend>3. 所在城市</legend>
<select id="city" name="city" required>
<option value="">--请选择城市--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="chengdu">成都</option>
</select>
</fieldset>
<fieldset>
<legend>4. 您的建议</legend>
<textarea id="suggestion" name="suggestion" rows="5" cols="40" placeholder="请在此输入您的建议..."></textarea>
</fieldset>
<button type="submit">提交问卷</button>
</form>
</body>
</html>