HTML语言剖析（八）表单标记 (1)
减小字体
增大字体INPUT 的种类 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
%26lt;SELECT%26gt; %26lt;OPTION%26gt;
%26lt;TEXTAREA%26gt; ■ 引子表单的用处很多，于网上无处不见，当然是配合 CGI 使用为佳，所以馈下有意使用或学 习 CGI 的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是在 %26lt;FORM%26gt; 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。 ■%26lt;FORM%26gt; %26lt;INPUT%26gt; ▲Top%26lt;FORM%26gt;称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，%26lt;INPUT%26gt;便是其中的一个，用以设定各种输入资料的方法。它 是一个空标记。
%26lt;FORM%26gt; 的参数设定（常用）
例如 %26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt; 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。
%26lt;INPUT%26gt; 的参数设定（常用）
由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它 参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。 type="Text"
可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
输入方式一 Text （单行文字盒）
例如%26lt;input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255"%26gt; 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 等。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
请填入电话号码%26lt;input type="Text" name="phone" value="" size="10" maxlength="8"%26gt;
%26lt;/form%26gt; 显示结果
输入方式二 Radio （单一选择）
例如%26lt;input type="Radio" name="gender" value="female" align="MIDDLE" checked%26gt; 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 中只能有一个使用，或全不使用这 参数。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
请选性别
%26lt;input type="Radio" name="gender" value="Female"%26gt;女性
%26lt;input type="Radio" name="gender" value="Male" checked%26gt;男性
%26lt;br%26gt;你喜欢吗
%26lt;input type="Radio" name="like" value="Yes"%26gt;喜欢
%26lt;input type="Radio" name="like" value="No"%26gt;不喜欢
%26lt;input type="Radio" name="like" value="NotSure"%26gt;不肯定
%26lt;/form%26gt; 显示结果
输入方式三 Checkbox （确认盒）
例如%26lt;input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked%26gt; 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。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
你喜欢以下那些明星
%26lt;br%26gt;%26lt;input type="Checkbox" name="idol01" value="Leon"%26gt;黎明
%26lt;input type="Checkbox" name="idol02" value="Noriko_Sagai"%26gt;酒井法子
%26lt;input type="Checkbox" name="idol03" value="Leon"%26gt;郑秀文
%26lt;input type="Checkbox" name="idol04" value="BonJovi" checked%26gt;BonJovi
%26lt;/form%26gt; 显示结果
输入方式四 Password （密码输方盒）
例如%26lt;input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9"%26gt; Password 的其他参数和 Text 是完全相同的，请参考 Text 的介绍。
两者作用不同，Password 所输入的字元全以 * 号表示。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
请输入姓名%26lt;input type="Text" name="name"%26gt;
%26lt;br%26gt;请输入密码%26lt;input type="Password" name="pw" maxlength="9"%26gt;
%26lt;/form%26gt; 显示结果
输入方式五 Submit （传送键）及 Reset （清除键）
这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。
例如%26lt;input type="Submit" name="other_funtion" value="确定" align="MIDDLE"%26gt;
%26lt;input type="Reset" value="清除" align="MIDDLE"%26gt; 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。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
%26lt;input type="Submit"%26gt;%26lt;input type="Reset"%26gt;
%26lt;br%26gt;%26lt;input type="Submit" value=" 确定 "%26gt;%26lt;input type="Reset" value="清除"%26gt;
%26lt;/form%26gt; 显示结果
输入方式六 Image （图片按键）
这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参 数便容许你采用自已制造的按键。
例如%26lt;input type="Image" name="submit" align="BOTTOM" src="http://edu.xinasp.com/web/ex_icon.gif"%26gt; type="Image"
输入方式为 Image。 name="submit"
所要代表的按键，可以是 submit, reset, 或其它。 align="BOTTOM"
可选值top, middle, bottom, left, right, texttop, baseline, absmiddle。 src="http://edu.xinasp.com/web/ex_icon.gif"
按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对途 径。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
%26lt;input type="Image" name="submit" align="BOTTOM" src="http://edu.xinasp.com/web/ex_icon.gif"%26gt;
%26lt;/form%26gt; 显示结果
输入方式七 File
例如%26lt;input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html"%26gt; input type="File"
输入方式为 Image。通常用以传输文件。 name="upload"
这文件传输的名称，用以识别之用。 align="BOTTOM"
可选值top, middle, bottom, left, right, texttop, baseline, absmiddle。 size="20"
所显示文字盒的长度。 maxlength="100"
可输入字元的上限。 accept="text/html"
所接受的文件类别，有二十六种选择，但可不设定。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
%26lt;type="File" name="upload" size="30" maxlength="100" accept="text/html"%26gt;
%26lt;/form%26gt; 显示结果
输入方式八 Hidden
例如%26lt;input type="Hidden" name="ID" value="6618"%26gt; type="Hidden"
输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起 传给 CGI，列如由 CGI 产生的会员号码，或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。 name="ID"
这文件传输的名称，用以识别之用。 value="6618"
内定值，会以如 ID=6618 形式传给 CGI。
例子 （"Hidden" 是不被显示的，所以这处多放了一个 "Submit" 键，表示 Hidden 之内定 值会随 submit 键被按而传给 CGI） 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
%26lt;input type="Hidden" name="ID" value="6618"%26gt;
%26lt;input type="Submit" value="Submit"%26gt;
%26lt;/form%26gt; 显示结果
输入方式九 Button
例如%26lt;input type="Button" name="useless" value="Back"%26gt; type="Button"
输入方式为一般按键。常配合 Java Script 作为其启动按键。 name="useless"
这文件传输的名称，用处不大。 value="Back"
按键显示名称。
例子 其中 Button" value="回前一页" %26gt;
%26lt;/form%26gt; 显示结果
%26lt;SELECT%26gt; 的参数设定（常用）
例如 %26lt;select name="where" size="6" multiple%26gt; name="where"
这卷动选单的名称，作识别之用，将会传及 CGI。 size="6"
这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有 Pop Up 效 果。 multiple
令这卷动选单容许多重选择。
%26lt;OPTION%26gt; 的参数设定（常用）
例如 %26lt;option value="tw" selected%26gt; value="tw"
这选项的值，将会传及 CGI。请自行修改，但不同选项必须有不同的值。 selected
设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
例子一 （普通 POP UP 卷动选单） 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt; Where you com from?
%26lt;select name="where"%26gt;
%26lt;option value="hk"%26gt;Hong Kong%26lt;/option%26gt;
%26lt;option value="tw" selected%26gt;Taiwan%26lt;/option%26gt;
%26lt;option value="cn"%26gt;China%26lt;/option%26gt;
%26lt;option value="us"%26gt;United States%26lt;/option%26gt;
%26lt;option value="ca"%26gt;Canada%26lt;/option%26gt;
%26lt;/select%26gt;
%26lt;/form%26gt; 显示结果
例子二 （容许多重选择 的卷动选单） 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt; Where you com from?
%26lt;select name="where" multiple%26gt;
%26lt;option value="hk"%26gt;Hong Kong%26lt;/option%26gt;
%26lt;option value="tw" selected%26gt;Taiwan%26lt;/option%26gt;
%26lt;option value="cn"%26gt;China%26lt;/option%26gt;
%26lt;option value="us"%26gt;United States%26lt;/option%26gt;
%26lt;option value="ca"%26gt;Canada%26lt;/option%26gt;
%26lt;/select%26gt;
%26lt;/form%26gt; 显示结果
例子三（设定了 Size 的卷动选单） 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt; Where you com from?
%26lt;select name="where" size="5"%26gt;
%26lt;option value="hk"%26gt;Hong Kong%26lt;/option%26gt;
%26lt;option value="tw" selected%26gt;Taiwan%26lt;/option%26gt;
%26lt;option value="cn"%26gt;China%26lt;/option%26gt;
%26lt;option value="us"%26gt;United States%26lt;/option%26gt;
%26lt;option value="ca"%26gt;Canada%26lt;/option%26gt;
%26lt;/select%26gt;
%26lt;/form%26gt; 显示结果
%26lt;TEXTAREA%26gt; 的参数设定（常用）
例如 %26lt;textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"%26gt; name="comments"
这文字区块的名称，作识别之用，将会传及 CGI。 cols="40"
这文字区块的宽度，请自行修改。 rows="4"
这文字区块的列数，即其高度，请自行修改。 wrap="VIRTUAL"
设定其折行问题，可选值为 off, physical, virtual。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 CGI（Web 伺服器端）必须将实№文字中的换行一 并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。
例子 原始码%26lt;form action="http://your.isp.com/cgi-local/example.cgi" method="POST"%26gt;
Give comments:
%26lt;textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"%26gt;
这是预设的字句，通常留空的，随你喜欢。%26lt;/textarea%26gt;
%26lt;/form%26gt; 显示结果
中查找“HTML语言剖析（八）表单标记 (1)”更多相关内容
中查找“{HTML语言剖析（八）表单标记 (1)”更多相关内容
