HTML语言剖析（八）表单标记

<FORM> <INPUT> INPUT 的种类： TEXT, RADIO,CHECKBOX, PASSWORD, SUBMIT/RESET, IMAGE, FILE, HIDDEN, BUTTON。 <SELECT> <OPTION> <TEXTAREA>

■ 引子

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

■<FORM> <INPUT> ： ▲TOP

<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 己有很多的选择，而不同的选择表示出不同的输入方式，且其它 参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。 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="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> 显示结果 你喜欢以下那些明星： 黎明 酒井法子 郑秀文 BONJOVI 输入方式四： 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> ： ▲TOP

<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> 显示结果 WHERE YOU COM FROM HONG KONGTAIWANCHINAUNITED STATESCANADA 例子二： （容许多重选择 的卷动选单） 原始码 <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> 显示结果 WHERE YOU COM FROM HONG KONGTAIWANCHINAUNITED STATESCANADA 例子三：（设定了 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> 显示结果 WHERE YOU COM FROM HONG KONGTAIWANCHINAUNITED STATESCANADA

■ <TEXTAREA> ： ▲TOP

<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> 显示结果 GIVE COMMENTS: 这是预设的字句，通常留空的，随你喜欢。