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地址
如果为空则使用当前文档的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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
效果展示: