您的位置：首页 > Web前端 > HTML

html表单标识详解

2011-05-01 19:27 330 查看
<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://www.richavenue.net/member" method="POST">

action="http://www.richavenue.net/member"

表单通常是与 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://www.richavenue.net/member"
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://www.richavenue.net/member"
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://www.richavenue.net/member"
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://www.richavenue.net/member"
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://www.richavenue.net/member"
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://http://www.richavenue.net/member"
method="POST">
<input
type="Image" name="submit" align="BOTTOM"
src="botten.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://www.richavenue.net/member"
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://www.richavenue.net/member"
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://www.richavenue.net/member"
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 Kong Taiwan China United States Canada

例子二： （容许多重选择 的卷动选单）

原始码<form
action="http://www.richavenue.net/member"
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 Kong Taiwan China United States Canada

例子三：（设定了 Size 的卷动选单）

原始码<form action="http://www.richavenue.net/member"
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 Kong Taiwan China United States Canada

■
<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://www.richavenue.net/member"
method="POST">
Give comments:
<textarea name="comments" cols="40" rows="4"
wrap="VIRTUAL">
这是预设的字句，通常留空的，随你喜欢。</textarea>
</form>
显示结果Give comments:
这是预设的字句，通常留空的，随你喜欢。



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航