HTML语言剖析(八)表单标记
2004-01-30 19:10:24 来源:WEB开发网<FORM> <INPUT> INPUT 的种类: Text, Radio,Checkbox, PassWord, Submit/Reset, Image, File, Hidden, Button。 <SELECT> <OPTION> <TEXTAREA> | ||||||||||||||||||||||||||||||||||||
■ 引子 | ||||||||||||||||||||||||||||||||||||
表单的用处很多,于网上无处不见,当然是配合 CGI 使用为佳,所以馈下有意使用或学 习 CGI 的话,表单设计见必需的,这一节介绍的标记不多,但其参数变化很多。一份表单的基本架构是:在 <FORM> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。 | ||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||
<FORM>称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,<INPUT>便是其中的一个,用以设定各种输入资料的方法。它 是一个空标记。
<FORM> 的参数设定(常用):
<INPUT> 的参数设定(常用):
输入方式一: Text (单行文字盒) 例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255">
例子:
输入方式二: Radio (单一选择) 例如:<input type="Radio" name="gender" value="female" align="MIDDLE" checked>
例子:
输入方式三: Checkbox (确认盒) 例如:<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>
例子:
输入方式四: Password (密码输方盒) 例如:<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">
例子:
输入方式五: Submit (传送键)及 Reset (清除键) 这是表单上重要的两个按键,两者所附带的参数相同,但用处不大。 例如:<input type="Submit" name="other_funtion" value="确定" align="MIDDLE">
例子:
输入方式六: Image (图片按键) 这通常用以取代 Submit 及 Reset 两个按键,因为由程式产生的按键并不漂亮,这 Image 参 数便容许你采用自已制造的按键。 例如:<input type="Image" name="submit" align="BOTTOM" src="http://www.cncms.com/ex_icon.gif">
例子:
输入方式七: File 例如:<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">
例子:
输入方式八: Hidden 例如:<input type="Hidden" name="ID" value="6618">
例子: ("Hidden" 是不被显示的,所以这处多放了一个 "Submit" 键,表示 Hidden 之内定 值会随 submit 键被按而传给 CGI)
输入方式九: Button 例如:<input type="Button" name="useless" value="Back">
例子: 其中 100%" border=1>
|
■ <SELECT> <OPTION> : | ▲Top |
<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> : | ▲Top |
<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> |
显示结果 |
赞助商链接