常用的表单元素：文本框（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、列表框（<select>和<option>）、按钮（button、submit和reset）、邮箱（<email>）、网址（<url>）、数字（<number>）、滑块（<range>）、搜索（<search>）
文本框：
语法：<!--文本框txt(文本框)、name(文本框的名称)、value(文本框的初始值)、size(文本框长度)、maxlength(文本框的字符的数量)--><form>
<input type="text" name="username" value="用户名" size="30" maxlength="20"/>
</form>密码框：
语法：<!--密码框password(密码框)、name(密码框的名称)、size(密码框的长度)-->
<form>
<input type="password" name="pass" size="20"/>
</form><!--method(常用值get/post)、action(表示向何处发送数据)-->
<form method="post" action="index.html">
<p>
名字：
<input name="name" type="text"/>
</p>
<p>
密码：
<input name="pass" type="password"/>
</p>
<p>
<input type="submit" name="Button" value="登入"/>
<input type="reset" name="Reset" value="重写"/>
</p>
</form>
单选按钮：
语法:<!--单选按钮radio(单选按钮框)、value(值)、checked(单选按钮选中的状态)-->
<form>
<input name="gen" type="radio" value="男" checked="checked"/>男
<input name="gen" type="radio" value="女"/>女
</form>多选框：
语法：<!--复选框checkbox(复选框)、value(值)、checked(复选框选中的状态)-->
<form>
<input type="checkbox" name="interst" value="sports" />运动
<input type="checkbox" name="interst" value="talk" checked="checked"/>聊天
<input type="checkbox" name="interst" value="play" />玩
</form>列表框：
语法：<!--列表框select(列表框)、option(选项)、selected(默认选中项)--><form>
<select name="名称" size="行数">
<option value="值" selected="selected">1</option>
<option value="值">2</option>
<option value="值">3</option>
</select>
</form>
按钮：
语法：<!--按钮reset(重置按钮)、image(提交按钮)src(图片路径)、button(普通按钮)-->
<form>
<input type="reset" name="butRest" value="reset按钮"/>
<input type="image" src="video/t01cc0a11169532d77f.jpg"/>
<input type="button" name="butButton" value="button按钮"/>
</form>多行文本域：
语法：<!--多行文本域textarea(多行文本域)、cols(列数)、rows(行数)-->
<form>
<textarea name="showText" cols="x" rows="y">文本内容</textarea>
</form>
文本域：
语法：<!--文本域file(文本域)、enctype(编码属性)-->
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files"/>
<input type="submit" name="upload" value="上传"/>
</p>
</form>
邮箱：
语法：<!--邮箱(email)-->
<form>
<p>
<input type="email" name="email"/>
<input type="submit"/>
</p>
</form>
网址：
语法：<!--网址(url)-->
<form>
<p>
网址：
<input type="url" name="userUrl"/>
<input type="submit"/>
</p>
</form>
数字：
语法：<!--数字(number)、min(最小)、max(最大)-->
<form>
<p>
请输入数字：
<input type="number" name="num" min="0" max="100"/>
<input type="submit"/>
</p>
</form>
滑块：
语法：<!--滑块(range)、min(最小)、max(最大)、step(数字间隔)-->
<form>
<p>
请输入数字：
<input type="range" name="range" min="0" max="10" step="2"/>
<input type="submit"/>
</p>
</form>
搜索框：
语法：<!--搜索框(search)-->
<form>
<p>
请输入关键字：
<input type="search" name="sousuo"/>
<input type="submit"/>
</p>
</form>
列：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人人网注册网址</title>
</head>
<body>
<img src="js/renren_titile.gif"/>
<br/>
<br/>
人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入人人网，找回老朋友，结交新朋友。
<form>
<p>
电子邮箱:
<input type="email" name="邮箱" size="20"/>
</p>
<p>
设置密码:
<input type="password" name="密码" size="20" maxlength="20"/>
</p>
<p>
真实姓名:
<input type="text" name="文本框" size="20" maxlength="20"/>
</p>
<p>
性别：
<input name="男" type="radio" value="男" checked="checked"/>男
<input name="女" type="radio" value="女"/>女
</p>
<p>
生日：
<select name="年" size="1">
<option value="值" selected="selected">1991</option>
<option value="值">1992</option>
<option value="值">1993</option>
<option value="值">1994</option>
<option value="值">1995</option>
</select>
年
<select name="月" size="1">
<option value="值" selected="selected">11</option>
<option value="值">12</option>
<option value="值">1</option>
<option value="值">2</option>
<option value="值">3</option>
<option value="值">4</option>
<option value="值">5</option>
<option value="值">6</option>
<option value="值">7</option>
<option value="值">8</option>
<option value="值">9</option>
<option value="值">10</option>
</select>
月
<select name="日" size="1">
<option value="值" selected="selected">30</option>
<option value="值">1</option>
<option value="值">2</option>
<option value="值">3</option>
<option value="值">4</option>
<option value="值">5</option>
<option value="值">6</option>
<option value="值">7</option>
<option value="值">8</option>
<option value="值">9</option>
<option value="值">10</option>
<option value="值">11</option>
<option value="值">12</option>
<option value="值">13</option>
<option value="值">14</option>
<option value="值">15</option>
<option value="值">16</option>
<option value="值">17</option>
<option value="值">18</option>
<option value="值">19</option>
<option value="值">20</option>
<option value="值">21</option>
<option value="值">22</option>
<option value="值">23</option>
<option value="值">24</option>
<option value="值">25</option>
<option value="值">26</option>
<option value="值">27</option>
<option value="值">28</option>
<option value="值">29</option>
<option value="值">30</option>
<option value="值">31</option>
</select>
日
</p>
<p>为什么要填写我的生日?</p>
<p>
我现在:
<select name="身份" size="1">
<option value="值" selected="selected">请选择身份</option>
<option value="值">医生</option>
<option value="值">老师</option>
</select>
（非常重要）
</p>
<p>
<img src="js/renren_code.gif"/>
<a href="#">看不清换一张？</a>
</p>
<p>
验证码：
<input type="text" name="文本框" size="20" maxlength="20"/>
</p>
<p>
<input type="image" src="js/renren.gif"/>
</p>
</form>
</body>
</html>
表单的高级应用：隐藏域、只读、禁用
隐藏域：
语法：<!--隐藏域(hidden)-->
<form>
<input type="hidden" name="userid" value="隐藏域"/>
</form>什么都没有显示，可以再网页查看源代码！
只读与禁用：<!--只读(readonly)、禁用(disabled)-->
<form>
<input name="readonly" value="可以读的" readonly="readonly"/>
<input type="submit" disabled="disabled" value="保存"/>
</form>
表单初级验证的方法：placeholder、required、pattern
placeholder:适合于input标签：text、search、url、email和password等类型
required：规定文本框填写内容不能为空，否则不允许用户提交表单
pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
语法：
<form>
<!--提示语默认显示，当文本框中输入内容时提示语消失-->
<input type="search" name="sousuo" placeholder="请输入关键字"/>
<br/>
<!--规定文本框填写内容不能为空，否则不允许用户提交表单-->
<input type="text" name="username" required="required"/>
<br/>
<!--用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单-->
<input type="text" name="tet" required="required" pattern="^1[358]d{9}" />
</form>