当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 从HTML语言到网上家园 第六章 表单

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 从HTML语言到网上家园 第六章 表单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 93 ::
收藏到网摘: n/a

 

   要想创建一个交互式的网页,就离不开控件。表单的作用就是用于标识网页中包含控件的部分,表单中的控件用于网页中的输入控制,实现了用户与的交互。

  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〉
页面效果: