一、学习路线
二、表单概述
- 1、Form表单是HTML的一个重要部分,负责采集和提交用户输入的信息
- 2、表单主要分为表单标签及表单控件两大类
- 3、表单控件又可细分为表单域和按钮两部分,常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
- 4、在表单域录入数据后,可通过表单的特殊控件(如提交按钮等)将数据传递给服务器端,由服务器接收表单数据并进行处理
三、表单标签
- 表单标签是一个包含表单元素的区域
- 可以包含一些表单控件
- 可以包含其他的HTML标签
基本语法: <form action="处理数据程序的URL地址" method="get|post" name="表单名称" … > </form>
- 一个页面可以拥有一个或多个表单标签,标签之间相互独立,不能嵌套
- 用户向服务器发送数据时一次只能提交一个表单中的数据
- 如需同时提交多个表单,需使用JavaScript的异步交互方式来实现
-
3.1 action属性
- action属性值是Web服务器上数据处理程序的URL地址,或者是Email地址。
<form action="http://www.itshixun.com/web/login.jsp" ></form> <!--绝对URL-->
<form action="/web/login.jsp" ></form> <!--相对URL-->
<form action="mailto:admin@itshixun.com" ></form> <!--Email地址-->
- action属性值是Web服务器上数据处理程序的URL地址,或者是Email地址。
-
3.2 method方法
- method属性用于设置向服务器发送数据的方式,主要包括以下两种方式:get方式和post方式。
- get方式:将数据作为URL的一部分发送给服务器。URL由地址部分和数据部分构成,两种之间用问号“?”隔开,数据以“名称=值”的方式成对出现,且数据与数据之间通过“&”符号进行分割
http://www.itshixun.com/web/login.jsp?userName=admin&userPwd=123456
- post方式:将数据隐藏在HTTP的数据流中进行传输;请求数据不会出现在地址栏中,安全性比get方式要高,并且对数据长度没有限制。
POST /web/login.jsp HTTP/1.1
Host: itshixun.com
userName=admin&userPwd=123456
-
3.3 id与name属性
- id属性是表单在网页中的唯一标识
- 在设计表单页面时,应为每个form表单提供一个合适的id,方便后期的CSS样式表及JavaScript脚本对其引用
- name属性用来设置表单元素的名称,在页面中也应尽量保持唯一
- 在早期版本中name属性使用较多,现在多用id属性替代
-
3.4 enctype属性
- 在表单数据提交之前,需要通过enctype属性说明表单中数据的编码方式
- 目前浏览器支持的编码方式有三种:application/x-www-form-urlencoded、multipart/form-data和text/plain方式
- application/x-www-form-urlencoded是默认编码方式,大多数表单数据会采用此种编码方式。在发送数据到服务器之前,所有字符都会进行Unicode编码,并对某些字符进行特殊处理,例如:遇到空格时将被转换成加号(+),其他特殊字符将转换为对应的ASCII格式(即“%XX”格式,由一个百分号和两位代表ASCII码的十六进制数字构成)
-
3.5 target属性
- target属性用于
<a>标签
时,用于指明被连接的内容将在哪个框架或浏览器中进行加载; - target属性用于
<form>标签
时,用户提交表单后将在哪个框架或浏览器中显示该表单的处理结果。 - 在HTML 4.01中,不再推荐使用
<form>表单
的target属性; - 在XHTML 1.0 Strict DTD中,不支持该属性。
- 在HTML 5中推荐使用formtarget属性来代替。
- target属性用于
四、表单域
- 表单域多用于收集网站访问者的信息,一般位于
<form></form>标签
之间 - 表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素
- 除多行文本框和列表选择框外,大部分表单域使用
<input>标签
来创建 input标签
的通用属性:
- 4.1 单行文本框
- 通常用来输入一些简单的内容。在HTML中,通过将
<input>标签
的type属性设为text方式来创建一个单行文本框。 <input type="text" name="…" size="…" maxlength="…" value="…" disabled="disabled" readonly="readonly"/>
- 其中 disabled = "disabled"用于指明文本框的禁用状态,并呈灰色显示
- readonly = "readonly"用于指定文本框的只读状态
- 通常用来输入一些简单的内容。在HTML中,通过将
- 4.2 密码框
- 与文本框相似,但在框中输入内容时,显示的不是当前输入的内容而是掩码形式(星号“*”或其他符号)
<input type="password" name="…" size="…" maxlength="…" value="…" />
- 4.3 单选按钮
- 单选按钮是指在一组数据中只能选择其中一个选项;在HTML中,通过将
<input>标签
的type属性设为radio方式来创建一个单选按钮选项 <input type="radio" name="…" value="…" checked="checked" />
其中 :- type="radio"用于指明表单域的类型是单选按钮
- 具有相同name属性的单选按钮分为一组,一组只能选择一项
- value属性用于指定该项的值,同一组内的值不应相同
- checked="checked"属性用于指定该项默认被选中,也可以简写成checked格式
- 单选按钮是指在一组数据中只能选择其中一个选项;在HTML中,通过将
- 4.4 复选框
- 复选框是指在一组数据中允许用户选择一项或多项,各项之间并不互斥
- 在HTML中,通过将
<input>标签
的type属性设为checkbox方式来创建一个复选框 <input type="checkbox" name="…" value="…" checked="checked"/>
其中 :- type="checkbox"用于指明表单域的类型是复选框
- 具有相同name属性的复选框分为一组,组内允许多选
- checked="checked"属性用于指定该项默认被选中,也可以简写成checked格式
- 当复选框没有value属性时,如果被选中value值为on,否则value值为off。
- 4.5 文件选择框
- 用户通过表单上传文件时,需要使用文件选择框来选择上传文件;在HTML中,通过将
<input>标签
的type属性设为file方式来创建一个文件选择框 <input type="file" name="…" accept="…"/>
其中 :- type="file"用于指明表单域的类型是文件选择框
- accept属性用于指定文件选择窗口的文件类型过滤;点击选择文件按钮时,会在弹出的文件选择窗口中,根据accept指定的类型对文件自动进行过滤
- 图片的格式包括image/gif、image/jpeg、image/*等格式
- 用户通过表单上传文件时,需要使用文件选择框来选择上传文件;在HTML中,通过将
- 4.6 隐藏域
- 在网页之间传递数据时,有些数据不希望用户在页面中看到,可以通过隐藏域来实现;在HTML中,通过将标签的type属性设为hidden来创建一个隐藏域。
<input type="hidden" name="…" value="…" />
- 注意:隐藏域的数据虽然不能在浏览器中直接显示,但是可以通过查看源码的方式找到;因此,不要使用隐藏域保存敏感的数据。隐藏数据也可以通过CSS中的display属性或visibility属性来实现。
- 4.7 多行文本框
- 多行文本框是用来输入较长内容的文本输入控件;在HTML中,通过将
<textarea>标签
创建一个多行文本框,标签之间的内容会在页面加载时显示出来 <textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea>
- 其中: rows属性用于指定多行文本框的名称
- cols属性用于指定多行文本框的
<textarea>标签
的wrap属性用于指定多行文本框的换行方式
- 多行文本框是用来输入较长内容的文本输入控件;在HTML中,通过将
- 4.8 列表选择框
- 列表选择框允许用户从列表中选择一项或多项。在HTML中,可以通过
<select>和<option>标签
来创建一个列表框。
- 列表选择框允许用户从列表中选择一项或多项。在HTML中,可以通过
<select name="…" size="…" multiple="multiple">
<option value="…" selected="selected">选项描述内容</option>
…
</select>
其中 :
- 列表选择框使用
<select>标签
进行定义,一个列表可以包含多个列表项<option>
- size属性用于指定列表选择框显示的行数
- multiple="multiple"属性用于指明当前列表框是否允许按住Ctrl键进行多选,默认只能选择一项
<option>标签
的value属性多用于发送给服务器的选项值<option>标签
的selected="selected"用于设置当前选项默认被选中<option>和</option>标签
之间的选项描述内容是显示的列表选择项
- 4.9 列表选择框
- 在一个列表选择框中,可以将列表项分为多组,使描述更加清晰。
- HTML中提供了
<optgroup>标签
,用于对列表项进行分组; - 该标签的label属性用于指定每个分组的名称,且分组名不能被选择;
- disabled属性用于设置该分组是否被禁用。
五、按钮控件
- 表单的按钮有多种功能:可以用于提交表单,也可以用于清除或重置表单,甚至用于触发客户端脚本程序。
- 按钮分为提交按钮、重置按钮、图片按钮和普通按钮,可以通过
<input>标签或<button>标签
来创建按钮。
<input type="submit|reset|button|image" name="…" src="…" value="…" />
其中 :- button表示创建一个普通按钮,当用户点击按钮时,可以触发JavaScript脚本的按钮
- image表示创建一个图片按钮,点击时也可以提交表单
- src属性是可选的,当type属性为image时,用来指定图片的URL地址
- 在HTML表单中,还可以使用标签创建一个按钮。
<button type="submit|reset|button" value="…" name="…"> 正文内容 </button>
- button按钮与input按钮相比,提供了更强大的功能和更丰富的内容。
<button>与</button>标签
之间的内容都是按钮的内容,包含任何可接受的正文内容,例如文本、图片、视频等。
<form action="http://www.itshixun.com" method="post">
<button type="submit" value="提交内容">提交内容 </button>
<button type="reset" value="重置内容">重置内容 </button>
<button type="button" value="普通按钮"
onclick="alert('可以调用JavaScript脚本!')">普通按钮 </button>
<button type="submit" value="提交内容">
<img src="../images/submit.jpg" width="100"/>
</button>
</form>
六、表单分组
- 常见的分组标签有
<fieldset>和<legend>标签
<form>
<fieldset> /*<fieldset>标签可以看作表单的一个子容器,将所包含的内容以边框环绕方式显示*/
<legend>请选择个人爱好</legend> /*<legend>标签则是为<fieldset>边框添加相关的标题*/
表单控件...
</fieldset>
...
</form>