这里有我精心整理的一份表单示例，请按需收藏，随时回来看一看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form 表单示例</title>
<style>
.mytitle {text-align: center;}
.myform {border: 1px solid #008000; padding: 20px 10px; width: 500px; margin: 20px auto;}
</style>
</head>
<body>
<h1 class="mytitle">form 表单示例</h1>
<!-- 表单可以指定提交后的 method，表单提交如果有密码的话尽量用 post 方式，安全些 -->
<form action="" method="post" class="myform">
<!-- 文本编辑框 -->
<!-- label 的 for 属性可以跟另一个 input 标签的 id 绑定，捆绑成组，点标签文字会一起聚焦 -->
<label for="user">账号：</label>
<!-- maxlength 可以设置允许输入的最大值 -->
<!-- name 属性为提交表单时候的参数名 -->
<input type="text" id="user" name="user" maxlength="7" placeholder="请输入账号">
<br>
<!-- 密码输入框，type 需要为 password -->
<label for="user">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<br>
<!-- 单选框 -->
<!-- 通过相同的 name 属性可以打包成组 -->
性别：
<!-- checked 属性可以提前默认选中 -->
<input type="radio" id="man" name="gender" value="man" checked>
<label for="man">男</label>
<input type="radio" id="woman" name="gender" value="woman">
<label for="woman">女</label>
<br>
<!-- 多选框 -->
兴趣爱好：
<input type="checkbox" id="running" name="running" value="on" checked>
<label for="running">跑步</label>
<input type="checkbox" id="basketball" name="basketball" value="on">
<label for="basketball">篮球</label>
<input type="checkbox" id="dancing" name="dancing" value="on">
<label for="dancing">跳舞</label>
<input type="checkbox" id="football" name="football" value="on">
<label for="football">足球</label>
<br>
<!-- 下拉列表框 -->
出生年：
<!-- 通常是常规的下拉框，一行的，可以通过 size 属性设置多行显示，如本例 -->
<select name="bornyear" id="bornyear" size="2">
<!-- Emmet 写法: option[value=$@1990]{$@1990}*30 -->
<option value="1990">1990</option>
<option value="1991">1991</option>
<!-- value 为提交时表单的值，里面包着的内容为显示的值 -->
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<!-- selected 表示默认的选择项 -->
<option value="2000" selected>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<br>
<!-- 可以设定一个按钮，如果没有绑定事件，则按下没啥反应 -->
<input type="button" value="我是一个按钮"><br>
<!-- 可以设定多行文本区域，设定初始的行列数和默认的文本 -->
<textarea cols="50" rows="10" name="multicontents">您好！我是多行文本输入域，可以设定初始宽高</textarea><br>
隐藏域（你是看不到我的，适合放一些验证随机值等，提交表单时会一起提交）：
<!-- 隐藏域前台看不到，但值存在，值可以考虑动态加载，不同的人不同，用于做表单验证，避免机器人等 -->
<input type="hidden" name="hidden" value="d27d7b1542d91641d1d232c9f58b96d1" /><br>
<!-- 提交表单的 type 一定是 submit，重置为 reset，会把表单所有内容重置为初始状态 -->
<input type="submit" value="提交表单">
<input type="reset" value="重置表单">
</form>
</body>
</html>
最终呈现效果：
