<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
/* novalidate:禁用谷歌浏览器错误提示*/
<form action="#" method="post" novalidate>
<p>
用户名：
<input type="text" name="textName" value="user"/>
<br />
密码：
<input type="password" name="pwd" id="pwd" value="password" />
</p>
<p>
确认密码
<input type="password" name="confiPwd" id="confiPwd" value="confirmPwd" disabled="true"/>
</p>
<p>
<input type="radio" name="sex" id="male" value="man" checked=""/>男
<input type="radio" name="sex" id="female" value="women" />女
</p>
<p>
<input type="checkbox" name="hobby" value="吃" checked />吃
<input type="checkbox" name="hobby" value="喝" />喝
<input type="checkbox" name="hobby" value="玩" />玩
<input type="checkbox" name="hobby" value="乐" checked/>乐
</p>
<p>
<input type="submit" value="提交" />
<input type="button" name="btn" value="普通按钮" />
<input type="reset" name="reset" value="重置按钮" />
</p>
<p>
自我介绍:
<textarea cols='20' rows='5' style="display: block;"></textarea>
</p>
<p>籍贯：
<select name="sel" size="1">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
<p>工作城市：
<!--设置multiple可以通过ctrl+鼠标左键实现多选-->
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
</form>
</body>
</html>
表单思维导图
https://www.processon.com/diagraming/5b129ccce4b02e4b26f1121b