1.表单标记——<form>...</form>
（1）<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单的内容
（2）基本格式
<form action="服务器地址(接受表单内容的地址)" name="表单名称" method="post|get">...</form>
（3）常用属性
name属性 表单名称
method属性 传送数据的方式，分post和get方式
get方式：get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性
post方式：post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制
action属性 表单数据的处理程序的URL地址
扫描二维码关注公众号，回复： 6973085 查看本文章
如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其属性为"no"
enctype属性 设置表单的资料的编码方式
target属性 和超链接的属性类似，用来指定目标窗口
2.文本域和密码——<input>标记
（1）<input>标记没有结束标记，是一个单标记
（2）基本语法
<input type="" name="" value="" size="" maxlength="">
（3）属性介绍
type属性
type属性有两个值：text和password
当type="text"时，<input>表示一个文本输入域
当type="password"时，<input>表示一个密码输入域
name属性 定义控件的名称
value属性 初始化值，打开浏览器时，文本框中的内容
size属性 设置控件的长度
3.提交、重置、普通按钮
（1）提交按钮
当<input type="submit">时，为提交按钮
（2）重置按钮
当<input type="reset">时，为重置按钮
（3）普通按钮
当<input type="button">时，为普通按钮
4.单选框和复选框
（1）单选框
当<input type="radio">时，为单选框
（2）复选框
当<input type="checkbox">时，为复选框
（3）注意
单选框和复选框都可以使用"checked"属性来设置默认选中项
5.隐藏域
当<input type="hidden">时，为隐藏表单域
6.多行文本域
（1）作用：使用<textarea>标记可以实现一个，能够输入多行文本的区域
（2）语法格式
<textarea name="name" rows="value" cols="value" value="value">... ...</textarea>
（3）rows属性和cols属性分别用来指定显示的行数和列数，单位是字符个数
7.菜单下拉列表域——<select>标记
（1）语法格式
<select name="" size="value" multiple> <option value="value" selected>选项1</option> <option value="value">选项2</option> <option value="value">选项3</option> ... ... </select>
（2）属性
name属性 规定下拉列表的名称
size属性 规定下拉列表中可选项的数目
multiple属性 规定可选择多个选项
（3）option标记
<option>标记用来指定列表中的一个选项，需要放在<select></select>之间
value属性 给选项赋值，指定传送到服务器上的值
selected属性 指定默认的选项
8.举例说明
举例展示会员注册登陆填写信息
注册代码demo.html：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>会员注册</title> 5 </head> 6 <body> 7 <center> 8 <form name="注册" method="get" target="_self" action="demo2.html"> 9 设置账号：<input name="zhanghao" type="text" value="" maxlength="10"> 10 <br/> 11 <br/> 12 设置密码：<input name="mima" type="password"> 13 <br/> 14 <br/> 15 确认密码：<input name="mima" type="password"> 16 <br/> 17 <br/> 18 <input type="submit" value="提交"> 19 20 <input type="reset" value="重置"> 21 <br/> 22 <br/> 23 </form> 24 </center> 25 </body> 26 </html>
登陆代码demo2.html：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>会员登陆</title> 5 </head> 6 <body> 7 <center> 8 <form name="登陆" method="get" target="_self" action="demo1.html"> 9 请输入你的账号：<input name="zhanghao" type="text" value="" maxlength="10"> 10 <br/> 11 <br/> 12 请输入你的密码：<input name="mima" type="password"> 13 <br/> 14 <br/> 15 <input type="submit" value="提交"> 16 17 <input type="reset" value="重置"> 18 <br/> 19 <br/> 20 </form> 21 </center> 22 </body> 23 </html>
填写信息demo1.html：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>个人信息登记</title> 5 </head> 6 <body> 7 <form action="demo.html" target="_self" name="信息登记" method="get"> 8 <center> 9 姓名： 10 <input name="name" type="text" size="4"> 11 <br/> 12 <br/> 13 性别： 14 <input type="radio" name="sex" checked>男 15 <input type="radio" name="sex">女 16 <br/> 17 <br/> 18 年龄： 19 <select> 20 <option>1-10</option> 21 <option>11-20</option> 22 <option>21-30</option> 23 <option>31-40</option> 24 <option>41-50</option> 25 <option>51-60</option> 26 <option>61-70</option> 27 <option>71-80</option> 28 </select> 29 <br/> 30 <br/> 31 爱好： 32 <input type="checkbox" name="running">跑步 33 <input type="checkbox" name="swimming">游泳 34 <input type="checkbox" name="learning">学习 35 <input type="checkbox" name="basketball">篮球 36 <br/> 37 <br/> 38 个人说明： 39 <textarea name="personal description" rows="10" cols="50"></textarea> 40 <br/> 41 <br/> 42 <input type="submit" value="提交"> 43 44 <input type="reset" value="重置"> 45 46 <input type="button" value="按钮"> 47 </center> 48 </form> 49 </body> 50 </html>
效果展示：
