打印本文 打印本文  关闭窗口 关闭窗口
HTML语言剖析(八)表单标记
作者:采集员 文章来源:来源于网络 点击数: 更新时间:2005/9/10 14:25:20
<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> 显示结果


[1] [2] [3]  下一页



打印本文 打印本文  关闭窗口 关闭窗口