10、表單form ──文本框和其他由用戶輸入的構件
% s/ z5 s0 \. g( k, q' n, H. x. O, O2 R
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
; ]4 s4 y5 Y- e) R3 E$ S& I6 } }' ], Y; N0 \ z( m
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。$ I% \- Y1 v3 f' \/ S; I: l: ?
3 A$ C2 m5 h8 Y, m9 a7 u- K; j實際用在HTML中的標籤有form、 input、 textarea、 select和option。
" A+ L, A+ d3 ?6 ~! {5 c# o S, I& M( f& E" @$ g! a6 u* a
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。1 @' v u% t+ ?; X
3 H( K9 a6 b3 p' F; y3 i可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
. b/ D/ z; M e# p Y( o
2 A5 j" U" n( m3 |) A6 H! r& }所以一個表單元素看起來是這樣子的:. v4 q' Y5 D, T: l2 C
, U; b" o" ~- V8 Z9 T B9 a7 ?' |, _! D C# b4 S, K7 U# D p
6 u+ q/ c. P, B) @
Example Source Code [www.cn-webmaster.cn]' Y( B3 P8 b$ \5 ^; J
<form action="processingscript.php" method="post"> </form>% H5 {4 L0 t" E, I
3 r7 X3 Y/ K9 D2 z9 e7 finput標籤是表單世界中的「老大」。有10種形式,概括如下:! E8 m+ ]2 o. }3 f9 j# M4 r/ X# ]
0 B7 V0 w# t, _ C8 r% R8 W5 Q
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 ! v4 ^# M' R# `# z8 h) \- P
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。 6 J% H) x. _% J2 `, q* k' \: R( B
■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />. 7 [- X! B, g- y: I! t
■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
+ O+ q X' p, S+ m! d( ^" Z0 m■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 ' N, R( _$ h+ F# K a- a
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
* h9 @6 j1 d5 P0 p' Q5 B }■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
8 q7 q9 i) E% [0 O$ ]4 R: G3 |■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
/ _: H o5 r. y, k) v6 ~1 L■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
l9 k" U. @0 ^& w■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 , w+ M. r4 k0 p1 J
注意輸入標籤input也是用「/>」自關閉的。
# p/ O1 W6 f; p" b. K- U% N# H% ]
, }5 ]7 q4 w% ?& _/ Z$ x, b) ]$ |多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:7 ^ U0 g& S4 J/ [& f# D/ g' I
" p7 V$ F0 I! N7 K6 X
7 f+ H. o8 Q( R+ l. H Example Source Code [www.cn-webmaster.cn]
$ U$ t- o3 I* R: ^" w! [<textarea rows="5" cols="20">A big load of text here</textarea>. ]- m& p" l) g4 F
& C* [/ _, m; {" V" {# K) A
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
( b' z& G! Y2 S/ m5 f5 S! q7 d) I( f! ?/ y8 @! p; D' @9 N
. z# a4 [ d, q+ g5 M( d
Example Source Code [www.52css.com]
* C D9 R8 p% S8 A: b& Q4 |" S4 v<select>4 w4 g5 X0 B8 q. g
<option value="first option">Option 1</option>
6 M* W& A7 {* j<option value="second option">Option 2</option>
, z* l& N |1 n4 g: p3 k2 H<option value="third option">Option 3</option>
" V- u) s' J5 n" v5 x</select> ( j4 M1 e% g$ S8 k+ F0 p4 Z) O1 |
0 `6 C1 @) l3 [! v4 ] q
當表單被提交時,被選中選項的值將被發送。; Y+ C0 H A B# x
: j. q, G( {5 |: ]* ? r
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
9 {. x+ u, R- M9 M8 ?6 T1 z# C7 o% m. C" ^ g, A
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
6 i; ^' A7 S; E* B
2 ]' w, n5 R7 |# f% [一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。); F- |. N7 K5 H. C, {
! l2 \- W1 U$ }( g9 b2 L
0 v* [( i' }7 S i ^" J
Example Source Code [www.cn-webmaster.cn]
2 k) ]! k! `" F# y/ z<form action="contactus.php" method="post">
5 L: J% ~$ S# E2 e<p>Name:</p>. h2 m) i) k8 M' q
<p><input type="text" name="name" value="Your name" /></p>7 c' B! U+ ~% ^+ O
<p>Comments: </p>% d. c! [/ N0 o6 H9 U' S
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
' | ]: `1 `' k" T<p>Are you:</p>
9 \/ @! B; R* ]2 H J) @0 R<p><input type="radio" name="areyou" value="male" /> Male</p>
$ | ?2 j/ \/ w! Z8 X- d<p><input type="radio" name="areyou" value="female" /> Female</p>) s6 @3 d* W, _
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>: W* n1 x" Q: Y& s( n+ I
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>: z9 i7 h; }/ n# p* f1 O O' }. C9 b6 ^: ^
<p><input type="submit" /></p> <p><input type="reset" /></p>, s* J' M0 V7 H9 l+ \8 W
</form>7 l4 I7 P% N9 @# ^2 n) L2 E
2 j4 R% B* f8 h K4 d. H6 I在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習. |