要想创建一个交互式的网页,就离不开控件。表单的作用就是用于标识网页中包含控件的部分,表单中的控件用于网页中的输入控制,实现了用户与服务器的交互。
6.1基本语法
表单的基本语法: 〈FORM ACTION=url METHOD= GET | POST TARGET= window_name | _blank | _parent | _self | _top〉 …… 〈/FORM〉 ACTOIN=url url指定了执行表单动作的文件。如果不指定,就执行本文件。 METHOD= GET | POST 定义表单如何发送数据给服务器,POST表示把表单的数据提交到数据库,GET则是表单数据从服务器获取。 TARGET 定义了ACTION执行文件的目标窗口。
例: 〈form method="POST" action="login.asp" target=_self〉 〈p〉用户名:〈input type="text" name="T1" size="16"〉〈/p〉 〈p〉口 令:〈input type="password" name="T2" size="16"〉〈/p〉 〈p〉〈input type="submit" value="提交" name="B1"〉 〈input type="reset" value="全部重写" name="B2"〉〈/p〉 〈/form〉
6.2表单中的常用控件
表单中常用控件有:单行文本框,复选框和单选框,按钮等,这些空间的基本格式: 〈input type=# 〉 type属性定义了控件的类型,不同的type值代表不同的控件。不同类型的控件却有一些共同的特性: align=left | center | right 定义控件相对于页面或者表格单元格的队齐方式。 Disabled 用来关闭一个元素,当选用该属性时,控件在页面不可操作,并显示为灰色。 Size=n 规定了空间的尺寸。 Name=name 规定控件的名称。 Value=value 指定控件的默认值。 在接下来的几节例,我们将介绍不同控件的特性。 6.2.1单行文本框和密码框 在网页中,常常会用到要求输入诸如用户名和口令之类的方框,这就需要用到单行文本框和密码框。 Type=text 定义单行文本框,用于单行文本项输入。 Type=password 密码框,不显示用户输入内容,而是以“*”代替。 Maxlenght属性可用于定义文本框和密码框中可输入的字符的最大个数。
例:定义输入用户名和口令的文本框,最大长度为16个字符,口令的最大长度为16个字符,相应的html代码及显示效果如下: 〈form method="POST" action="--WEBBOT-SELF--"〉 〈p〉用户名:〈input type="text" name="username" size="16"〉〈/p〉 〈p〉口 令:〈input type="password" name="passwd" size="16"〉〈/p〉 〈p〉〈input type="submit" value="提交" name="B1"〉 〈input type="reset" value="全部重写" name="B2"〉〈/p〉 〈/form〉 显示效果:
6.2.2复选框和单选框
当某一元素或对象可以有多个可选值,或者仅是一个简单的布尔型值时,可以用复选框(type=checkbox)。在提交数据时,选择的每个复选框都产生一个单独的名字/值对。复选框的默认值是on。 相反的,如果表单区中的一组值同时只能有一个有效,那么可以选用单选按钮(type=radio)。但选按钮需要一个显式VALUE=属性。 说明:同一表单中的一组复选框或者单选框组中都要给出相同的名字。
例1:一个关于复选框的例子。 〈form method="POST" action="--WEBBOT-SELF--"〉 〈p〉搜索你想要的商品:〈/p〉 〈p〉〈input type="checkbox" name="chked" value="ON"〉服饰 〈input type="checkbox" name="chked" value="ON"〉数码 〈input type="checkbox" name="chked" value="ON"〉家居 〈input type="checkbox" name="chked" value="ON"〉手机〈/p〉 〈p〉〈input type="submit" value="搜索" name="B1"〉〈/p〉 〈/form〉 页面效果:
例2:单选框的应用。 〈form method="POST" action="--WEBBOT-SELF--"〉 〈p〉按钮类型:〈/p〉 〈p〉〈input type="radio" value="V1" name="R1"〉普通 〈input type="radio" value="V2" name="R1"〉提交 〈input type="radio" value="V3" checked name="R1"〉重置〈/p〉 〈p〉〈input type="submit" value="确定" name="B1"〉〈/p〉 〈/form〉 页面效果:
6.2.3按钮
根据需要,网页中的按钮可以分为三种类型普通按钮、重置和提交按钮: type=button 定义普通按钮。 Type=reset 定制重置按钮,在按下该按钮时,表单内的控件复位为初始设置的值。 Type=submit 按下此按钮,提交表单内容。如果按下submit按钮是为了提交窗体,而且这个按钮规定了name属性,那么这个按钮就把名字/值对分配给提交的数据。否则,submit按钮便不把名字/值对分配给提交的数据。
例: 〈input type="button" value="按钮" name="butt"〉 〈input type="submit" value="提交" name="sub"〉 〈input type="reset" value="全部重写" name="reset"〉
6.2.4图像按钮
很多情况下,当网页中使用的普通按钮(type=button | submit | reset)达不到预期的美观效果时,我们可以用图像按钮来替代完成submit或reset的功能。 图像按钮的基本格式: 〈input type="image" name="submit" align="BOTTOM" src=" wp08.gif"〉 type=image 单击一个图像段,使得它立即提交窗体。 Name=submit 定义了按钮要执行的动作类型,是submit或者reset。 Src=url 指定图片的来源。
[Web开发]从HTML语言到网上家园 序章 [Web开发]从HTML语言到网上家园 第一章 HTML语言结构 [Web开发]从HTML语言到网上家园 第二章 构成网页的基本元素 [Web开发]从HTML语言到网上家园 第三章 超文本链接 [Web开发]从HTML语言到网上家园 第四章 页面风格设计 [Web开发]从HTML语言到网上家园 第五章 [Web开发]从HTML语言到网上家园
|