作者：三月十三

第23节、使用表单

今天继续，开始说表单的实现，先说一下什么是表单，来看个图吧：

我这个图是截的free258的注册页面的图，这就是一个表单，我们在表单里输入相关的信息，然后点击最下面的“注册”按钮，这样我们所填写的信息就通过post或get方式传送给了网站的数据库，这样网站的管理人员就有了我们的注册资料。

那么，表单就是一种用来收集站点访问者信息的一种手段，当我们填完表单后，我们点击“注册”或“提交”按钮，这样我们所填的信息就被送出了，这时候，网站管理人员事先设定好的处理我们提交的信息的程序就会启动，以各种不同的方式处理这些数据。

那么，在HTML中，表单标记为form，基本语法格式如下：

action="字符串">

... ...

我们来介绍一下form标记的属性：

1.

name属性：我们使用这个属性指定表单的名字，以便在后面使用脚本的时候调用该表单，不然没有名字的话，脚本不认识它。

2.

method属性：指定传送数据的方式，该属性可以有两个值，get和post，其中get的意思是直接将表单数据附加到请求该页的URL后，从而传送到服务器上，post的意思是在HTTP请求中嵌入表单数据，再传送。

需要注意的是，使用get方式时应保证表单的数据不超过8192个字节，若超过了8192个字节，那么表单中的数据将被截断，从而造成数据处理失败，另外，如果表单中传送的是用户名和密码等重要信息的话，不要使用get方法，而应该使用更安全的post方法，所以，当我们指定表单数据的传送方式时，最好用post方法。

3.

action属性：指定将要接收表单数据的服务器端程序或该程序的URL地址。

4.

onsubmit属性：指定提交表单时要调用的事件处理程序

5.

onreset属性：指定重置表单时要调用的事件处理程序

6.

target属性：指定一个目标窗口，其取值如下：

☆

_blank：在未命名的窗口中打开目标文档

☆

_parent：在显示当前文档的窗口的父窗口中打开目标文档

☆

_self：在提交表单所使用的窗口中打开目标文档

☆

_top：在当前窗口中打开目标文档，并确保目标文档占用整个窗口

在一个网页中可以包含多个表单，在每个表单里都可以包含各种控件、文本框、复选框、下拉选单、按钮等内容，但，需要记住的是，表单是不能嵌套的。

OK，下面我们先来说如何使用输入型表单控件：

在HTML中，我们使用input标记来创建各种输入型表单控件，通过将input标记的type属性设置为不同的值，可以创建不同类型的输入型表单控件，包括单行文本框、密码框、复选框、单选按钮、文件域、按钮等。

下面我们来说一下使用单行文本框的方法。

将input的type属性设为text，即在网页中插入了一个单行文本输入框。

基本语法为：

name="txt-1" value="字符串" size="整数"

maxlength="整数">

其中，name属性指定该单行文本框的名字，指定名字是为了我们以后使用脚本处理表单中的数据的时候用，value属性指定单行文本框的初始值，即在用户未输入任何内容时文本框里显示的内容，size属性指定单行文本框的宽度，maclength属性指定单行文本框内可输入的最大字符数。

OK，这东西不难的，那么下面我们就再来说一个，使用密码输入框。

朋友们应该有过体会，就是我们在注册账户或登录账户的时候，我们输进去的密码显示的是星号(*)或者实心圆点(●)，我们现在就来讨论一下这些技术的实现方法：

使用密码输入框的方法跟使用单行文本框的方法差不多，只是input的type值由text变成了password，即基本语法为：

name="pass-1" value="字符串" size="整数"

maxlength="整数">

这里name属性与单行文本框的名字的作用一样，value和size、maxlength都一样。

好，密码输入框我们也说过了，不要着急，上面两个输入框使用的方法大致上是一样的，那么，我们就再来说一个不同的，不过这个不同也只是一点点的不同罢了，那就是----使用按钮。

我们在注册或者登录的时候经常会用到各种各样的按钮，比如确定、重写、提交、注册等等按钮，这些按钮的实现方法就是将input的type属性设置为不同值来实现的。

在HTML里，我们可以使用input的type值设为submit(提交按钮)，reset(重置按钮)和button(自定义按钮)。

创建按钮的基本语法为：

type="submit|reset|button" name="字符串" value="字符串"

οnclick="过程"

其中type可取的值有：

1.

submit：创建一个提交按钮，当用户将表单中的需要填的东西填完了之后，点击此按钮提交填写好的数据，当我们点击了提交按钮之后，表单中的(包括提交按钮的名字和值)以ASCII文本格式传送给由表单中指定的表单处理程序来处理。

一般情况下，每个表单都是有提交按钮的。

2.

reset：创建一个重置按钮，在输入表单时如果我们输入错误的地方有很多或者填完以后发现没有表达自己的意思的话，我们可以使用重置按钮，这个按钮的作用就是清空表单中已被填写或选择的项目，将表单还原到初始状态。

3.

button：创建一个自定义按钮，这样的按钮被创建以后，我们必须为其指定一个专门的按钮处理程序，也就是必须为其指定一个处理脚本。

4.

name：指定按钮的名称，注意，这个是按钮的名字，不是在按钮上显示的文字。

5.

value：指定在按钮上显示的文字，比如设为“提交”。

另外，值得一提的是，除了上述属性之外，按钮控件还支持onclick事件，onclick事件就是鼠标单击事件，就是当我们单击了这个按钮的时候按钮可以作出相应的反应。

OK,下面我们来写一段代码，使用我们上边学习的内容来创建一个简单的表单。

例27(22.html):

百度红客吧原创课程----创建一个基本表单

width="368">

bgcolor="teal">

align="center">

color="white">

登录表单

width="113" height="50">

用户名：

height="50">

name="t-1" size="20" maxlength="12">

width="113" height="50">

密码：

height="50">

name="pwd-1" size="20"

align="center">

align="right" height="50">

name="sub-1" value="确定">

height="50">

name="reset-1" value="重写">

我们来看一下执行效果吧：

这是网页刚打开的时候：

这是我填写了一些内容之后：

可以看到，在密码的输入栏里显示的是星号，这样安全系数就进一步增强了。

点击重写按钮则清空所有已填写的内容，恢复表单的初始状态，当然，在这里我点击确定也是没有用的，因为我没有对

标记指定处理它提交的内容的程序，我们会在接下来的课程中一步一步讲到。

好了，今天就说这么多吧，我们明天见！