HTML语言剖析(八) 表单标记
HTML语言剖析(八) 表单标记
发布时间:2015-11-04 来源:查字典编辑
摘要:表单标记INPUTINPUT的种类:Text,Radio,Checkbox,Password,Submit/Reset,Image,File...

表单标记

INPUT

INPUT 的种类: Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

SELECTOPTION

TEXTAREA

■ 引子

表单的用处很多,于网上无处不见,当然是配合 CGI 使用为佳,所以馈下有意使用或学 习 CGI 的话,表单设计见必需的,这一节介绍的标记不多,但其参数变化很多。一份表单的基本架构是:在 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。

■ INPUT:

称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,INPUT便是其中的一个,用以设定各种输入资料的方法。它 是一个空标记。

的参数设定(常用):

例如: form action="/cgi-local/example.cgi" method="POST"

● action="/cgi-local/example.cgi"

表单通常是与 CGI 配合使用的,参数 action 便是用以指明该 CGI 程式的位置,这 样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试,可 设定此参数为ACTION="mailto:your@" 那样该表单所填的资料将会寄至 此电邮地址(红色部分)。

● method="POST"

传送资料给 CGI 的的方式,可选值为 POST, GET。你只需记住POST容许传送大量资料,但 GET则只接受低于 1K 的资 料,所以你若看过别人的表单原始码的话,你会发现申请表单用的是POST 而搜 找器用的是 GET。

INPUT 的参数设定(常用):

由于其第一个参数 type 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。

● type="Text"

可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

输入方式一: Text (单行文字盒)

例如input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255"

● type="Text"

输入方式为 Text,能产生一单行文字盒,上限为 255 字元。

● name="age"

此一单行文字盒名称,这是最重要的一个,方便 CGI 辨认由表单传来的资料,虽 说可随便命名,但通常 CGI 程式中都有指定名称,若转用其它名称便需要修改该 CGI 程式了,名称可为没空白没特别符号的英文或数字,有大小写的分别,可以 写成Your_Age,若有访客于此表单此一文字盒填入 40 的话,那末传给 CGI 的字 串便是 Your_Age=40。

● value="20"

此一单行文字盒内定值。若不填写则文字盒是空白的,等待访客亲自键入,若 value="20" 的话, 20 便会出现在文字盒中,当然访客可以修改之。

●align="MIDDLE"

可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。

● size="2"

此一单行文字盒显示的长度,若馈下是采用 Big5 编码的中文网页便要小心,同 size 的文字盒 NC 会显示得比 IE 狻长。

● maxlength="255"

此一单行文字盒可输入字元的上限,为方便编排资料或避免错输入等,宜设定上 限,例如输入电话或 ICQ UIN 的可设为 8,年龄为 2 等。

例子:

始码form action="/cgi-local/example.cgi" method="POST"

请填入电话号码:input type="Text" name="phone" value="" size="10" maxlength="8"

/form 显示结果请填入电话号码:

输入方式二: Radio (单一选择)

例如:input type="Radio" name="gender" value="female" align="MIDDLE" checked

● type="Radio"

输入方式为 Radio,能产生一单一选择,以供点选。

● name="gender"

此一 Radio 名称,参考 Text 部分的说明。

● value="female"

内定值。每一个 radio 必须及仅有一个 value,通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式,可让使用使任选其一。

● align="MIDDLE"

可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

● checked

设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用,或全不使用这 参数。

例子:

原始码form action="/cgi-local/example.cgi" method="POST"

请选性别:

input type="Radio" name="gender" value="Female"女性

input type="Radio" name="gender" value="Male" checked男性

你喜欢吗:

input type="Radio" name="like" value="Yes"喜欢

input type="Radio" name="like" value="No"不喜欢

input type="Radio" name="like" value="NotSure"不肯定

/form 显示结果请选性别: 女性 男性

你喜欢吗: 喜欢 不喜欢 不肯定

输入方式三: Checkbox (确认盒)

例如:input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked

● type="Checkbox"

输入方式为 Checkbox,能产生一确认盒,以供剔选。

● name="idol"

此一 Checkbox 名称,参考 Text 部分的说明。

● value="Leon"

内定值。每一个 Checkbox 必须及仅有一个 value,当被剔选时这值便会传及 CGI,例如所传字串 idol=Leon 。

● align="RIGHT"

可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

● checked

设该 Checkbox 为内定被选。每个 Checkbox 都是独立的,所以每一个都可使用这 参数,不像 Radio。

例子:

原始码form action="/cgi-local/example.cgi" method="POST"

你喜欢以下那些明星:

input type="Checkbox" name="idol01" value="Leon"黎明

input type="Checkbox" name="idol02" value="Noriko_Sagai"酒井法子

input type="Checkbox" name="idol03" value="Leon"郑秀文

input type="Checkbox" name="idol04" value="BonJovi" checkedBonJovi

/form 显示结果你喜欢以下那些明星:

黎明 酒井法子 郑秀文 BonJovi

输入方式四: Password (密码输方盒)

例如:input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9"

● Password 的其他参数和 Text 是完全相同的,请参考 Text 的介绍。

两者作用不同,Password 所输入的字元全以 * 号表示。

例子:

原始码form action="/cgi-local/example.cgi" method="POST"

请输入姓名:input type="Text" name="name"

请输入密码:input type="Password" name="pw" maxlength="9"

/form 显示结果请输入姓名:

请输入密码:

输入方式五: Submit (传送键)及 Reset (清除键)

这是表单上重要的两个按键,两者所附带的参数相同,但用处不大。

例如:input type="Submit" name="other_funtion" value="确定" align="MIDDLE"

input type="Reset" value="清除" align="MIDDLE"

● type="Submit"

设定输入方式为 Submit 或 Reset。

● name="other_funtion"

Submit 的功能随 name 的不同而不同,须和 CGI 配合。若你只需要普通的传送 键,则是其内定,不必用此参数。

● value="确定"

这个值不是输给 CGI 的,而是显示在按键上,可以不用,传送键的内定值为 Submit Query,清除键的内定值为 Reset。

● align="MIDDLE"

可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

例子:

原始码form action="/cgi-local/example.cgi" method="POST"

input type="Submit"input type="Reset"

input type="Submit" value=" 确定 input type="Reset" value="清除"

/form 显示结果

输入方式六: Image (图片按键)

这通常用以取代 Submit 及 Reset 两个按键,因为由程式产生的按键并不漂亮,这 Image 参 数便容许你采用自已制造的按键。

例如:input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"

● type="Image"

输入方式为 Image。

● name="submit"

所要代表的按键,可以是 submit, reset, 或其它。

● align="BOTTOM"

可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

● src="ex_icon.gif"

按键图片来源,若此图片文件不与该 html 文件在同一目录下,请加上相对或绝对途径。

原始码form action="/cgi-local/example.cgi" method="POST"

input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"

/form 显示结果

输入方式七: File

例如:input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html"

● input type="File"

输入方式为 Image。通常用以传输文件。

● name="upload"

这文件传输的名称,用以识别之用。

● align="BOTTOM"

可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

● size="20"

所显示文字盒的长度。

● maxlength="100"

可输入字元的上限。

● accept="text/html"

所接受的文件类别,有二十六种选择,但可不设定。

例子:

始码form action="/cgi-local/example.cgi" method="POST"

type="File" name="upload" size="30" maxlength="100" accept="text/html"

/form 显示结果

输入方式八: Hidden

例如:input type="Hidden" name="ID" value="6618"

● type="Hidden"

输入方式为隐藏或内定。它不会显示任何输入介面,而是一个内定值随表单一起 传给 CGI,列如由 CGI 产生的会员号码,或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。

● name="ID"

这文件传输的名称,用以识别之用。

● value="6618"

内定值,会以如 ID=6618 形式传给 CGI。

例子: ("Hidden" 是不被显示的,所以这处多放了一个 "Submit" 键,表示 Hidden 之内定 值会随 submit 键被按而传给 CGI)

原始码form action="/cgi-local/example.cgi" method="POST"

input type="Hidden" name="ID" value="6618"

input type="Submit" value="Submit"

/form 显示结果

输入方式九: Button

■ SELECTOPTION :

例如:input type="Button" name="useless" value="Back"

● type="Button"

输入方式为一般按键。常配合 Java Script 作为其启动按键。

● name="useless"

这文件传输的名称,用处不大。

● value="Back"

按键显示名称。

例子: 其中 onclick="history.go( -1 );return true; 属 JAVA 事件。

原始码

input type="Button" value="回前一页" onclick="history.go( -1 );return true;"

/form 显示结果

■ SELECTOPTION :

SELECT是卷动选单标记,每一选项皆由 OPTION 所标示,把它当作围堵标记或空标 记使用都可以。

SELECT 的参数设定(常用):

例如: select name="where" size="6" multiple

● name="where"

这卷动选单的名称,作识别之用,将会传及 CGI。

● size="6"

这卷动选单的列数,即其高度,请自行修改。若使用此参数则不会有 Pop Up 效 果。

● multiple

令这卷动选单容许多重选择。

OPTION 的参数设定(常用):

例如: option value="tw" selected

● value="tw"

这选项的值,将会传及 CGI。请自行修改,但不同选项必须有不同的值。

● selected

设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。

例子一: (普通 POP UP 卷动选单)

原始码form action="/cgi-local/example.cgi" method="POST" Where you com from?

select name="where"

option value="hk"Hong Kong/option

option value="tw" selectedTaiwan/option

option value="cn"China/option

option value="us"United States/option

option value="ca"Canada/option

/select

/form 显示结果Where you com from?

Hong Kong Taiwan China United States Canada

例子二: (容许多重选择 的卷动选单)

例子三:(设定了 Size 的卷动选单)

原始码form action="/cgi-local/example.cgi" method="POST"

请选性别:

input type="Radio" name="gender" value="Female"女性

input type="Radio" name="gender" value="Male" checked男性

你喜欢吗:

input type="Radio" name="like" value="Yes"喜欢

input type="Radio" name="like" value="No"不喜欢

input type="Radio" name="like" value="NotSure"不肯定

/form 显示结果请选性别: 女性 男性

你喜欢吗: 喜欢 不喜欢 不肯定 0

原始码form action="/cgi-local/example.cgi" method="POST"

请选性别:

input type="Radio" name="gender" value="Female"女性

input type="Radio" name="gender" value="Male" checked男性

你喜欢吗:

input type="Radio" name="like" value="Yes"喜欢

input type="Radio" name="like" value="No"不喜欢

input type="Radio" name="like" value="NotSure"不肯定

/form 显示结果请选性别: 女性 男性

你喜欢吗: 喜欢 不喜欢 不肯定 1

■ TEXTAREA :

TEXTAREA是表单文字区块标记,常用于 bug report, feedback 等需要填写大量资料的用途。

TEXTAREA 的参数设定(常用):

例如: textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"

● name="comments"

这文字区块的名称,作识别之用,将会传及 CGI。

● cols="40"

这文字区块的宽度,请自行修改。

● rows="4"

这文字区块的列数,即其高度,请自行修改。

● wrap="VIRTUAL"

设定其折行问题,可选值为: off, physical, virtual。off 表示不使用此属性,physical 时则会强迫刘览器在送资料到 CGI(Web 伺服器端)必须将实№文字中的换行一 并送出,设为 virtual 时则送出连续成串的字(除非使用者按了键盘的 RETURN / ENTER)。

例子:

原始码form action="/cgi-local/example.cgi" method="POST"

请选性别:

input type="Radio" name="gender" value="Female"女性

input type="Radio" name="gender" value="Male" checked男性

你喜欢吗:

input type="Radio" name="like" value="Yes"喜欢

input type="Radio" name="like" value="No"不喜欢

input type="Radio" name="like" value="NotSure"不肯定

/form 显示结果请选性别: 女性 男性

你喜欢吗: 喜欢 不喜欢 不肯定

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新脚本HTML教程学习
热门脚本HTML教程学习
网页设计子分类