【第六章】使用jQuery操作表单和表格1

HTML表单概述

当用户填写完信息后做提交操作，将表单内的内容从客户端的浏览器传到服务器上，经过服务器处理程序后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。、
表单的主要功能是收集信息，具体说是收集浏览者的信息。

一.表单标记form

1.action属性

action属性是指处理表单提交数据的脚本文件。

    具体语法：
   <form action="URL"> ...</form>
   URL:表单提交的地址。

2.表单名称name属性

名称属性name用于给表单命名。这一属性不是表单的必须属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称。

具体语法：
<form name="form_name"> ...</form>
form_name:表单名称。

3.提交方式method属性

表单的method属性用来定义处理程序从表单中获取信息的方式。可取值为get或post，它决定了表单中已经收集的数据是用什么方式提交到服务器的。
get是适用少量数据的提交。

具体语法：
<form method="method">...</form>
method：提交方式，它的值可以是get或post。

4.编码方式enctype属性

表单中的enctype参数用于设置表单信息提交的编码方式

具体语法：
<form enctype="value">...</form>

enctype属性的取值范围

取值	描述
test/plain	以纯文本的形式传送
application/x-www-form-urlencoded	默认的编码形式
multipart/form-data	MIME编码，上传文件的表单必须选择该项

5.目标显示方式target属性

target属性用来指定窗口的打开方式。表单的目标窗口往往用来显示表单的返回信息，例如：是否成功提交了表单的内容，是否出错等。

具体语法：
<form target="target_win">...</form>

target属性的取值范围

取值	描述
_blank	将返回信息显示在新打开的浏览器窗口中
_parent	将返回的信息显示在父级浏览器窗口中
_self	将返回的信息在当前浏览器窗口中
_top	将返回的信息 显示在顶级浏览器窗口中

二.输入标记input

输入类控件的type可选值

取值	描述
text	文本框
password	密码域，用户在页面输入时不显示具体内容，以*代替
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图形域，也成为图像提交按钮
hidden	隐藏域。隐藏域将不再显示在页面上，只将内容传递到服务器中
file	文件域

1.文本框text

text属性值用来设定在表单的文本框中，输入任何类型的文本，数字，或字母。输入的内容以单行显示

具体代码：
<input type="text" name="field_name" maxlength=max_value size=size_value value="field_value">

取值	描述
name	文本框的名称
maxlengrh	文本框的最大输入字符数
size	文本框的宽度（以字符为单位）
value	文本框的默认值

2.密码域password

在表单中还有一种文本域的形式为密码域，输入文本域中的文字均已星号*代替

具体代码;
<input type="password" name="field_name" maxlength=max_length size=size_value>

取值	描述
name	密码域的名称
maxlength	密码域的最大输入字符数
size	密码域的宽度（以字符为单位）
value	密码域的默认值

3.单选按钮

单选按钮用来让浏览者进行单一的选择，在页面中以圆框表示。单选按钮必须设置参数value的值，而对于一个选择中的所以单选框，往往要设定同样的名称，这样传递时才能更好的对某一个选择内容的取值进行判断。

具体语法：
<input type="radio" name="field_name" checked value="value">
*checked:表示此项默认选中。
*value：表示选中项目后传送到服务器端的值。

4.复选框checkbox

浏览者填写表单时，有一些内容可以通过让浏览者进行选择的形式来实现。

具体语法：
<input type="checkbox" name="field_name" checked value="value">
*checked:表示此项默认选中。
*value：表示选中项目后传送到服务器端的值。

5.普通按钮

在提交页面，恢复选项时常常用到。普通按钮一般情况下要配合脚本来进行表单处理

具体语法：
<input type="button" name="field_name" value="button_text">
*field_name: 普通按钮的名称。
*button_name：按钮上显示的文字。

6.提交按钮

提交按钮是一个特殊的按钮、在单击该类按钮时可以实现表单的提交

具体语法：
<input type="submit" name="field_name" value="submit_text">
*field_name: 普通按钮的名称。
*submit_name：按钮上显示的文字。

三.文本域

在HTML中还有一种特殊定义的文本样式，成为文本域或文字域、它在文字字段的区别在于可以添加多行文字，从而可以输入更多的文本。

具体语法：
<input name="textname" value="text_value" rows=rows_value cols=cols_value value="value" />

文本域标记的属性

文本域标记属性	描述
name	文本域的名称
rows	文本域的行数
cols	文本域的列数
value	文本域的默认值

四.菜单和列表标记 select和option

菜单是一种最节约的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。
列表可以显示一定数量的选项。如果超出这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看个选项。

菜单列表标记属性	描述
name	菜单列表的名称
size	显示的选项的数目
multipe	列表中的项目多卷
value	选项值
selected	默认选项