当前位置: 代码迷 >> HTML/CSS >> 八。2、HTML语言剖析之表单标记 -2
  详细解决方案

八。2、HTML语言剖析之表单标记 -2

热度:311   发布时间:2012-11-01 11:11:32.0
8。2、HTML语言剖析之表单标记 -2
--------------------------------------------
输入方式六: 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> :  

<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 Kong Taiwan China United States Canada 


例子二: (容许多重选择 的卷动选单) 原始码 <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 Kong Taiwan China United States Canada 


例子三:(设定了 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 Kong Taiwan China United States Canada 



■ <TEXTAREA> :  

<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:
这是预设的字句,通常留空的,随你喜欢。
  相关解决方案