■ 引子
|
表单的用处很多,于网上无处不见,当然是配合 CGI 使用为佳,所以馈下有意使用或学 习 CGI 的话,表单设计见必需的,这一节介绍的标记不多,但其参数变化很多。一份表单的基本架构是:在 <FORM> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。 |
■<FORM> <INPUT> :
|
<FORM>称为 表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,<INPUT>便是其中的一个,用以设定各种输入资料的方法。它 是一个空标记。 <FORM> 的参数设定(常用): 例如: <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。 <INPUT> 的参数设定(常用): 由于其第一个参数 TYPE 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。
输入方式一: 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="HTTP://YOUR.ISP.COM/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="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> 请选性别: <INPUT TYPE="RADIO" NAME="GENDER" VALUE="FEMALE">女性 <INPUT TYPE="RADIO" NAME="GENDER" VALUE="MALE" CHECKED>男性 <BR>你喜欢吗: <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="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> 你喜欢以下那些明星: <BR><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" CHECKED>BONJOVI </FORM> | 显示结果 |
|
输入方式四: PASSWORD (密码输方盒) 例如:<INPUT TYPE="PASSWORD" NAME="PW" VALUE="999" ALIGN="MIDDLE" SIZE="5" MAXLENGTH="9">
- PASSWORD 的其他参数和 TEXT 是完全相同的,请参考 TEXT 的介绍。
两者作用不同,PASSWORD 所输入的字元全以 * 号表示。 例子:
原始码 | <FORM ACTION="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> 请输入姓名:<INPUT TYPE="TEXT" NAME="NAME"> <BR>请输入密码:<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="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> <INPUT TYPE="SUBMIT"><INPUT TYPE="RESET"> <BR><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="HTTP://YOUR.ISP.COM/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="HTTP://YOUR.ISP.COM/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="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="ID" VALUE="6618"> <INPUT TYPE="SUBMIT" VALUE="SUBMIT"> </FORM> | 显示结果 |
|
输入方式九: BUTTON 例如:<INPUT TYPE="BUTTON" NAME="USELESS" VALUE="BACK">
- TYPE="BUTTON"
输入方式为一般按键。常配合 JAVA SCRIPT 作为其启动按键。 - NAME="USELESS"
这文件传输的名称,用处不大。 - VALUE="BACK"
按键显示名称。 例子: 其中 ONCLICK="HISTORY.GO( -1 );RETURN TRUE; 属 JAVA 事件。
原始码 | <FORM> <INPUT TYPE="BUTTON" VALUE="回前一页" ONCLICK="HISTORY.GO( -1 );RETURN TRUE;"> </FORM> | 显示结果 |
| |
|
<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="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> WHERE YOU COM FROM <SELECT NAME="WHERE"> <OPTION VALUE="HK">HONG KONG</OPTION> <OPTION VALUE="TW" SELECTED>TAIWAN</OPTION> <OPTION VALUE="CN">CHINA</OPTION> <OPTION VALUE="US">UNITED STATES</OPTION> <OPTION VALUE="CA">CANADA</OPTION> </SELECT> </FORM> | 显示结果 |
| 例子二: (容许多重选择 的卷动选单)
原始码 | <FORM ACTION="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> WHERE YOU COM FROM <SELECT NAME="WHERE" MULTIPLE> <OPTION VALUE="HK">HONG KONG</OPTION> <OPTION VALUE="TW" SELECTED>TAIWAN</OPTION> <OPTION VALUE="CN">CHINA</OPTION> <OPTION VALUE="US">UNITED STATES</OPTION> <OPTION VALUE="CA">CANADA</OPTION> </SELECT> </FORM> | 显示结果 |
| 例子三:(设定了 SIZE 的卷动选单)
原始码 | <FORM ACTION="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> WHERE YOU COM FROM <SELECT NAME="WHERE" SIZE="5"> <OPTION VALUE="HK">HONG KONG</OPTION> <OPTION VALUE="TW" SELECTED>TAIWAN</OPTION> <OPTION VALUE="CN">CHINA</OPTION> <OPTION VALUE="US">UNITED STATES</OPTION> <OPTION VALUE="CA">CANADA</OPTION> </SELECT> </FORM> | 显示结果 |
| |
■ <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="HTTP://YOUR.ISP.COM/CGI-LOCAL/EXAMPLE.CGI" METHOD="POST"> GIVE COMMENTS: <TEXTAREA NAME="COMMENTS" COLS="40" ROWS="4" WRAP="VIRTUAL"> 这是预设的字句,通常留空的,随你喜欢。</TEXTAREA> </FORM> | 显示结果 |
| | |