10、表單form ──文本框和其他由用戶輸入的構件
1 r6 e0 G I% y% r8 ^6 x% P- Y- J5 U( J' _+ e( p
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。$ Q. Y$ k( }$ m; y$ Z
5 C! j e7 F8 }$ d0 y4 `
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
# k: h" c7 M6 G9 Z7 p! \$ b- G! ]
7 F9 n6 Q6 D2 h5 M( ?, ]實際用在HTML中的標籤有form、 input、 textarea、 select和option。
0 z4 A7 h# S0 P8 s0 [* F( C/ r
9 l, q, J E3 U& {7 }表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
% o4 U8 B! F5 W4 d1 j
( J; J6 a, L. U可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。& ~" I6 S& T5 P3 m0 ~" `9 |- Y
3 `! I. f/ a7 y% X) c6 y8 [- [, t
所以一個表單元素看起來是這樣子的:8 Y! Y. T& i4 \
2 W* @! r6 c% }9 ?
- r- C# _5 X) O3 `# r2 w- A- `1 S' z- i1 m0 F6 O- K
Example Source Code [www.cn-webmaster.cn], ~/ x& i% C2 m
<form action="processingscript.php" method="post"> </form>
4 d1 p8 m2 V& S$ M% I7 D . d2 z% i4 z" p6 E% m) `) E
input標籤是表單世界中的「老大」。有10種形式,概括如下:
) ` g. B$ z$ ^: i
1 \$ A! {0 I, B; n■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
+ [* v, ^7 J: A% p, P. [■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。 : P! r( X, Y0 B* }; z6 w5 e/ X( }
■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
% R/ z# Z! P0 O7 H0 f■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
$ z/ X; o, i3 c" C/ p) Q■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
: e2 F) p& B. e) U4 K. Z7 m■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. 0 @1 {# \9 A% S
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 ^" ~& \4 P* B* ?& e# f
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 $ b1 j. E" h% v# F
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
$ |* M. [" p+ C7 E4 W- Y■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
2 D! U9 o, f" L2 D" D# i, t# @! p注意輸入標籤input也是用「/>」自關閉的。( N. ? w3 e6 c4 a# K
$ s' H1 \6 a4 G- j9 N
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
- d' a1 n8 s: f) q8 n3 _7 c" A' Z6 M! r* @. _
9 z" V3 |, o+ a/ d3 M Example Source Code [www.cn-webmaster.cn]
$ W( f1 j' v+ a: v4 `5 E<textarea rows="5" cols="20">A big load of text here</textarea>7 E& l+ p$ W; z
B% k2 ?7 S2 t/ K7 D C* |& q3 M選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
3 Z( Q, Y/ k/ f
) {* g% h0 T- V; c5 W. [$ O7 K6 d: V* M
Example Source Code [www.52css.com]
0 |' j# q8 @1 a2 I0 Q! i& A6 ^<select>
1 N9 _( _+ o/ b8 W3 Z7 y<option value="first option">Option 1</option>
. F& X4 u+ [( x$ G<option value="second option">Option 2</option> ~3 O! e3 H. c& Z/ ~1 t! @. i
<option value="third option">Option 3</option>! i' M4 Y* `' \# G
</select>
/ C1 [( M1 B7 \' V: k6 B8 g
4 i( ?! h4 i3 T, C& `5 d A$ v當表單被提交時,被選中選項的值將被發送。
( G" b/ ]& y! x6 G1 d! o: l3 s5 P! I a2 H0 e/ o
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。 t8 x& k( R* H
/ q# B+ v" J- b/ `/ n! L. d+ x0 y
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。& q3 r! ^4 s: m/ D4 }3 v
" I* n7 K( ` y9 J, Z% t. i2 j
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)8 ?! U5 l: k' p3 ?. B, q) I5 |8 `
0 ?, x, o+ m! ^4 g4 Q8 j- w+ g# [
$ s3 x7 ?4 |- t) W2 x Example Source Code [www.cn-webmaster.cn]
: p9 ?$ P9 q) @$ J- `<form action="contactus.php" method="post">
2 j& N+ {( W+ ^( Z1 y$ _/ T; ]<p>Name:</p>
% V) A! D4 v% ^; E3 J( q<p><input type="text" name="name" value="Your name" /></p>; b2 y& y/ Q$ ^; U( S2 g% U
<p>Comments: </p>
/ B6 y) [$ I! N/ s2 p5 j; H1 v: O<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
: ]# e8 W, n! [: z4 w: F( \& R+ M<p>Are you:</p>
+ b! Z" x. q8 l4 v& S<p><input type="radio" name="areyou" value="male" /> Male</p>
W9 y. f+ H4 {& I: F<p><input type="radio" name="areyou" value="female" /> Female</p>
) u/ m9 v% g1 f+ a6 |<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>: i7 v! N/ q, J- J3 e" j
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
: V0 v V3 N3 X0 Z9 x' T* h: \<p><input type="submit" /></p> <p><input type="reset" /></p>7 W( K; k) [3 E6 X$ @
</form>3 ]' E4 U K, ~
. t/ |; `6 L/ m
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習. |