10、表單form ──文本框和其他由用戶輸入的構件 + y( d5 K3 \0 e' G1 h
1 {1 }* C8 \& P3 G% j# f6 d
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。5 T8 d; a7 O+ B# M: ]+ E
. s/ Y$ h0 @. q: j' x2 e表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。& S. h- h; }7 _7 J& ^0 ^, }
: ~7 U m# X' z8 W實際用在HTML中的標籤有form、 input、 textarea、 select和option。
Y( v# `$ ~0 K# k8 m/ h/ [7 i. H2 o5 \" I; H
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
. B/ Y% {5 k7 x6 L3 }( \$ h5 u- t! X+ C, Q
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
' h" D! i0 t. P
. S9 n5 B- d! p6 k n: l: u所以一個表單元素看起來是這樣子的:
" p g3 d, U# O! `2 }, _0 i( P) U; T! {2 V. X1 _
; c$ H$ @' o* ~/ @/ e# b4 H) W" |
8 n! w& J+ I6 g; K3 Z& r Example Source Code [www.cn-webmaster.cn]# X) N) v. ]( E2 Z" @& K& u, d
<form action="processingscript.php" method="post"> </form>
: o. h3 n6 R& J, `/ B
/ ^/ w$ e, ?1 [ B1 Linput標籤是表單世界中的「老大」。有10種形式,概括如下:3 g# w, H. f- h: x4 M7 V+ V3 {
7 C9 s8 {9 Z4 ^! n
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 . f5 u+ R, c& H
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
$ j. o1 O" K% i5 r* _■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />. % q3 H- t5 Z" N6 N j
■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
' A X$ `2 ~' [; r8 f: N■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
: E5 m9 F T1 e! U: K% g5 ?, d■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. 8 }4 z, N" [4 X3 H2 Z
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
1 r C! f" g [8 q B, u■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
" ^6 }4 {* V: V7 j3 x: U■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
, }: ]% F4 `/ I& ~! ` j■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
( P6 B: T, H+ I* G n+ V, x注意輸入標籤input也是用「/>」自關閉的。. n8 Z& ?& x, ]: X! k
Z; F5 T/ \: X0 y. g+ c* @ d
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
5 ?' ` ^" _6 V- X) \* L7 N) x6 z7 t* q7 j5 x
8 g+ |% h( Y4 m" l
Example Source Code [www.cn-webmaster.cn]
5 L8 [( D( @/ N# w+ B<textarea rows="5" cols="20">A big load of text here</textarea>
7 ] O# m0 I. `& _. e# M* S6 m. S+ u/ g+ O
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:/ y: a6 C0 R) L& H, R" R _3 b
0 L$ d' q6 F' ]3 |& {: v
7 f' y8 t" C8 x8 b) q Example Source Code [www.52css.com]$ ?1 r% x: r P% L1 `
<select>2 d" g$ E% f1 j7 z# }! ]8 n
<option value="first option">Option 1</option>7 M9 i$ n; D' r2 W" L0 h
<option value="second option">Option 2</option>
1 F( l& j. m8 K8 A3 n d' `$ n<option value="third option">Option 3</option>: R6 o, @2 W: {4 O
</select>
8 S- `0 E2 O( [( Q1 C; Z3 U' K$ l9 B7 \3 z/ s- U2 A0 m
當表單被提交時,被選中選項的值將被發送。
4 e9 E5 `' l+ l# ?0 Y7 r" Q
3 N- r: \4 K! ]6 c8 D與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
4 T, D( L( A5 X* N5 ]
) q) q2 N' k: m$ v0 B上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
* q1 k5 \* `0 R4 I& g. P7 z0 s
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
" S2 J, y6 j% |- }" ]% I
q9 B& j% }* N. H( K& ^" t9 W. H
Example Source Code [www.cn-webmaster.cn]$ `5 ~4 Z+ M3 Q: u! c
<form action="contactus.php" method="post">( T' n J& l; S
<p>Name:</p>
0 |; m3 v2 ?4 _<p><input type="text" name="name" value="Your name" /></p>
" E8 u7 @( j! F# I<p>Comments: </p># C) x$ \; O/ n4 W7 V0 n
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
, B& s$ U& \8 s5 K, R5 E<p>Are you:</p>, Y; C- P% z# s4 C7 v& N/ `, ^
<p><input type="radio" name="areyou" value="male" /> Male</p>
9 d, a) R* [+ Z' \) I: I<p><input type="radio" name="areyou" value="female" /> Female</p>
0 w w/ Y. [2 r: W; I5 f<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
- ^, o3 V7 B2 [<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
2 {! d9 d3 d7 y0 `" L" R% P<p><input type="submit" /></p> <p><input type="reset" /></p>
6 A' G# U$ G' P! \' [</form>8 H, Y& f H' M
# a* F4 Q" W0 j$ T在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習. |