<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单相关的标签-11个</title>
</head>
<body>
<form>
<fieldset><legend>学生信息调查表</legend>
<label for="username">用户名：</label><input type="text" id="username" name="username" pattern="[a-zA-Z0-9]{3,}" title="用户名最少3个字符，仅限英文和数字" required placeholder="请输入用户名"><br><br>
<label>密码：</label><input type="password" id="password" name="password" required placeholder="请输入密码"><br><br>
<label>Email：</label><input type="email" id="email" name="email" placeholder="请输入常用Email" required><br><br>
<label>手机：</label><input type="tel" id="tel" name="tel" maxlength="11" placeholder="请输入手机号" required><br><br>
<label>性别：</label><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br><br>
<label>生日：</label><input type="date" name="birthdate" id="birthdate"><br><br>
<label>年龄：</label><input type="number" name="age" id="age" value="9" min="1" max="99">岁<br><br>
<label>年级：</label><input type="text" id="grade" name="grade" maxlength="1" value="4" readonly><br>
<input type="range" id="gdrag" name="gdrag" value="4" max="6" min="1" onchange="javascript:document.getElementById('grade').value=this.value;"><br><br>
<label>兴趣：</label><input type="checkbox" name="hobby" value="足球">足球<input type="checkbox" name="hobby" value="乒乓球">乒乓球<input type="checkbox" name="hobby" value="下棋">下棋<input type="checkbox" name="hobby" value="看书">看书<br><br>
<label>所在省市：</label><input type="search" id="province" name="province" list="prlist">
<datalist id="prlist">
<option value="北京市">
<option value="天津市">
<option value="上海市">
<option value="重庆市">
<option value="河北省">
<option value="河南省">
<option value="山东省">
</datalist>
<br><br>
<label>喜欢颜色：</label><input type="text" name="likecolor" id="likecolor"><input type="color" id="color" name="color" onChange="javascript:document.getElementById('likecolor').value=this.value;"><br><br>
<label>联系人：</label><select name="linkman" id="linkman">
<optgroup label='家人'><option value="爸爸">爸爸</option><option value="妈妈">妈妈
</option></optgroup></select> <br><br>
<label>上传照片：</label><input type="file" name="file" id="file"><br><br>
<label>选择月：</label><input type="month" name="month" id="month"><br><br>
<label>选择周：</label><input type="week" name="week" id="week"><br><br>
<label>选择时间：</label><input type="datetime" name="datetime" id="datetime"><br><br>
<label>本地时间：</label><input type="datetime-local" name="datetime-local" id="datetime-local"><br><br>
<label>个人网站：</label><input type="url" id="url" name="url"><br><br>
<label>个人简介：</label><textarea rows="5" cols="50"></textarea><br><br>
<input type="image" height="100" src="http://www.zhywprogram.com/html/images/submit.gif" alt="提交按钮">
<br><br>
<input type="hidden" name="cfrom" value="zhywprogram">
<input type="submit" name="submit">
<button type="reset">重置</button>
<input type="button" value="返回">
</fieldset>
</form>
</body>
</html>