HTML语言剖析（八）表单标记 -pc6资讯

您的位置：首页 → 网页设计 → HTML/CSS → HTML语言剖析（八）表单标记

HTML语言剖析（八）表单标记 时间：2004/11/7 2:43:00来源：本站整理作者：蓝点我要评论(0)

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

■ 引子

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

■： ▲Top

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

的参数设定（常用）：
例如：<form action="http://your.isp.com/cgi-local/example.cgi" method="POST">

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

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

的参数设定（常用）：
由于其第一个参数 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 等。

例子：
原始码请填入电话号码：显示结果请填入电话号码：

输入方式二： 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 中只能有一个使用，或全不使用这参数。

例子：
原始码请选性别：女性男性你喜欢吗：喜欢不喜欢不肯定显示结果请选性别：女性男性你喜欢吗：喜欢不喜欢不肯定

输入方式三： 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。

例子：
原始码你喜欢以下那些明星：黎明酒井法子郑秀文 BonJovi 显示结果你喜欢以下那些明星：黎明酒井法子郑秀文BonJovi

输入方式四： Password （密码输方盒）

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

Password 的其他参数和 Text 是完全相同的，请参考 Text 的介绍。
两者作用不同，Password 所输入的字元全以 * 号表示。

例子：
原始码请输入姓名：请输入密码：显示结果请输入姓名：请输入密码：

输入方式五： 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。

例子：
原始码显示结果

输入方式六： 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 文件在同一目录下，请加上相对或绝对途径。

例子：
原始码显示结果

输入方式七： 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"
所接受的文件类别，有二十六种选择，但可不设定。

例子：
原始码显示结果

输入方式八： 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）
原始码显示结果

输入方式九： Button

例如：<input type="Button" name="useless" value="Back">

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

name="useless"
这文件传输的名称，用处不大。

value="Back"
按键显示名称。

例子：其中 onclick="history.go( -1 );return true; 属 JAVA 事件。
原始码显示结果

■： ▲Top

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

的参数设定（常用）：例如：<select name="where" size="6" multiple>

name="where"
这卷动选单的名称，作识别之用，将会传及 CGI。

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

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

的参数设定（常用）：例如：<option value="tw" selected>

value="tw"
这选项的值，将会传及 CGI。请自行修改，但不同选项必须有不同的值。

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

例子一：（普通 POP UP 卷动选单）
原始码 Where you com from? Hong Kong Taiwan China United States Canada 显示结果 Where you com from? Hong KongTaiwanChinaUnited StatesCanada

例子二：（容许多重选择的卷动选单）
原始码 Where you com from? <select name="where" multiple> Hong Kong Taiwan China United States Canada 显示结果 Where you com from? Hong KongTaiwanChinaUnited StatesCanada

例子三：（设定了 Size 的卷动选单）
原始码 Where you com from? <select name="where" size="5"> Hong Kong Taiwan China United States Canada 显示结果 Where you com from? Hong KongTaiwanChinaUnited StatesCanada

■ ： ▲Top

是<span style="color:#ff0000">表单文字区块</span>标记，常用于 bug report, feedback 等需要填写大量资料的用途。

的参数设定（常用）： <br/>例如：<textarea <span style="color:#ff0000">name</span>="comments" <span style="color:#ff0000">cols</span>="40" <span style="color:#ff0000">rows</span>="4" <span style="color:#ff0000">wrap</span>="VIRTUAL">

name="comments"
这文字区块的名称，作识别之用，将会传及 CGI。

cols="40"
这文字区块的宽度，请自行修改。

rows="4"
这文字区块的列数，即其高度，请自行修改。

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

例子：
原始码 Give comments: 这是预设的字句，通常留空的，随你喜欢。显示结果 Give comments: 这是预设的字句，通常留空的，随你喜欢。

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。