<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>个人信息</legend>
<label for="userName">姓名：</label>
<input type="text" name="userName" required="required" id="" value="" placeholder="请输入姓名"/></br><!--输入框有阴影字，且内容不准为空-->
<label for="userPassword">密码：</label><!--隐藏密码-->
<input type="password" name="userPassWord" id="" value="" /><br>
<label>文件上传</label>
<input type="file" name="" id="" value="" multiple="multiple" /><br><!--可同时上传多个-->
<label for="userPhone">电话：</label>
<input type="tel" name="" id="userPhone" value="" pattern="^1\d{10}$" /><br><!--电话号码必须为数字格式， 正则表达式 ，匹配满足5位到10位的数字-->
<label>性别：</label>
<input type="radio" name="sex" id="" value="" checked="checked" /><span>男</span><!--单选，默认为男-->
<input type="radio" name="sex" id="" value=""/><span>女</span>
<label>兴趣爱好</label>
<input type="checkbox" name="" id="" value=""/><span>羽毛球</span><!--多选框-->
<input type="checkbox" name="" id="" value=""/><span>乒乓球</span>
<input type="checkbox" name="" id="" value=""/><span>排球</span>
<label>选择范围</label>
0<input type="range" name="" id="" value="20" />100<!--滑动选择范围-->
<label>颜色选择范围</label>
<input type="color" name="" id="" value="" /><br>
<label>入学日期：</label>
<input type="date" name="" id="" value="" /><br>
<label>时间:</label>
<input type="time" name="" id="" value="" /><br>
<label>时间2:</label>
<input type="datetime-local" name="" id="" value="" /><br><!--可同时设定日期和时间模式-->
<label>搜索:</label>
<input type="search" name="" id="" value="" /><br>
住址:<select>
<option>哈尔滨</option>
<option>北京</option>
<option>上海</option>
</select><br>
自我介绍:<textarea rows="10" cols="50"></textarea> <!--表格大小可根据字数变化-->
<input type="reset" value="重置" /><br><br><br><!--清空文字-->
<input type="button" value="注册"/>
<input type="submit" name="" id="" value="提交" />
</fieldset>
</form>
</body>
</html>
