XHTML與CSS入門經典 從零開始系列教程！

10、表單form ──文本框和其他由用戶輸入的構件
# Z' q. R+ ]3 c0 q( G- N
1 z; w. s$ K5 g; t6 Z8 N表單可以用來在網頁中發送數據，特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
" n8 X3 i9 Y' G. Q
& Q( X; n# F& {; ?, B: A8 M表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML，你能夠自助地找到一些簡單的教程，開發一個服務器端的程序使一個發送到Email的表單工作。
3 s1 E( ]( A& r' M1 a: M
8 F+ r+ q- s6 _實際用在HTML中的標籤有form、 input、 textarea、 select和option。
' ^  _1 m/ R) y% _4 N8 m0 \7 j
/ N; g. \9 H4 r表單標籤form定義的表單裡頭，必須有行為屬性action，它告訴表單當提交的時候將內容發往何處。
: F. ^2 F* w" O; @3 T5 z
$ A* _" a1 t" j8 Z7 L; t1 X8 {  v可選的方法屬性method告訴表單數據將怎樣發送，有get（默認的）和post兩個值。常用到的是設置post值，它可以隱藏信息（get的信息會暴露在URL中）。
9 a9 J, t, \1 u/ E
" g% P2 t4 |3 @: t* Y3 t1 i  Z* ^所以一個表單元素看起來是這樣子的：
) k8 ^3 w4 U1 s+ t3 m/ C: a
5 l+ ^0 e( m1 ~

2 G/ K, u% v" F7 x* H- ] Example Source Code [www.cn-webmaster.cn]
4 W  |" l7 y# @. W3 D. A<form action="processingscript.php" method="post"> </form>

input標籤是表單世界中的「老大」。有10種形式，概括如下：
) E* V& t/ w0 G* B
7 H4 l% s5 A9 }/ _■　<input type="text" />是標準的文本框。它可以有一個值屬性value，用來設置文本框裡的默認文本。
% r: [  D- |. o+ `$ x" R1 A- P  U; z■　<input type="password" /> 像文本框一樣，但是會以星號代替用戶所輸入的實際字符。
5 q$ B' U3 ^  m2 W& l) m■　<input type="checkbox" />是復選框，用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked，像這樣的格式<input type="checkbox" checked="checked" />.
■　<input type="radio" /> 與復選框相似，但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked，使用方法跟復選框一樣。
■　<input type="file" /> 是展示你電腦上的文件的一個區域，就像你在一個軟件中打開或者保存一個文檔一樣。
■　<input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本（下面的button和reset類型也可以這樣，稍後介紹），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
■　<input type="image" />以圖像代替按鈕文本，src屬性是必須的，像img標籤一樣。
■　<input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
9 `; r) ~  u8 `0 p( P■　<input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
■　<input type="hidden" /> 不會顯示任何東西，它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
8 u) X$ n. l" g1 z注意輸入標籤input也是用「/>」自關閉的。

多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols，用法像這樣：

! ?0 G: D# w* p, x$ X2 e  A
1 Y' `6 z7 j, O: c4 @( Z/ W Example Source Code [www.cn-webmaster.cn]
8 n7 H9 D" ?, ^0 \% j  V) y, n<textarea rows="5" cols="20">A big load of text here</textarea>

. b9 ]- o/ c8 U1 y選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的：
3 @( Y6 j0 F& Q+ }: G( M" V
: M4 w" t" h, Q) x; E" k$ Q' x5 w
& E8 `* A: k4 F9 Q4 r Example Source Code [www.52css.com]
' v1 D0 G/ @# m/ N<select>
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select>

當表單被提交時，被選中選項的值將被發送。
$ e% {2 s2 z4 }
與復選框和單選按鈕的預選屬性checked一樣，選項標籤option也有一個預選屬性selected，它可以用在這樣的格式中：<option value="mouse" selected="selected">Rodent</option>。
$ t+ G- d' U( e. k1 m* Q
上述的標籤中在網頁中看起來都不錯，但是，如果你有一個程序來處理這個表單，這些標籤都不起作用。這是因為，表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name，比如 <input type="text" name="talkingsponge" />。

一個表單看起來應該像下面這樣（注意：這個表單不會工作，除非有一個用來提交數據的「contactus.php」的文件，它位於表單標籤form的行為屬性action中。）


Example Source Code [www.cn-webmaster.cn]
<form action="contactus.php" method="post">
<p>Name:</p>
# M4 s( J2 h) u- T0 ]# T<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
: Y+ }6 ~  i3 U6 B<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
; {  w3 K! C: m0 b<p>Are you:</p>
% }, k3 B# y6 H- v" H$ ~8 c+ n<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
* d" S$ F& z0 |$ c6 m+ e: t<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
& b) `; [: }1 {2 q<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
8 \7 v5 {" y$ x3 p6 N7 }<p><input type="submit" /></p> <p><input type="reset" /></p>
/ g) `9 Z: w9 g/ r; K</form>
2 [6 D. W+ x3 K. c8 F: |/ K4 c% D
5 x5 F( v/ l  v5 o0 U; N" s9 m在HTML高級教程中還有更複雜的高階水平教程等著你，如果你想進一步瞭解和學習.

11、綜合應用__把上面所有的要素堆積起來

3 {5 B# l; L; y- K; m1 A如果你業已全部瀏覽HTML初級指南的全部頁面，學習完畢初級指南，你事實上已經是一個能幹的HTMLer了。

  `  C$ |) h1 z/ T) r實際上，基於許多人編寫HTML都相當差勁的事實，你應該做得比他們更好。
; _7 `' }( F8 l0 _1 b) }! `' R
4 f9 t" B8 p. G! d& w% e下面的代碼把前面所教授的綜合在一起了：

( u% B) c, `. u% H' \
( k9 |! u; F9 }1 t
  N1 B- F3 Y; |  C1 X, K2 M( E Example Source Code [www.cn-webmaster.cn]
2 s  X9 ~: n2 `- {- U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  {" N8 e& V6 W/ t<html>
( `5 B5 f+ G; e8 G: |9 F$ \0 F<head>
5 \: {8 ?& B7 Q7 Y; @3 T<title>我的第一個網頁</title>
0 g9 u6 B7 }: F- b/ L; |<!-- 順便說一下，這是註釋 -->
</head>
8 M; B) |9 z- m+ y<body>
<h1>我的第一個網頁</h1>
2 F4 ]# t; _8 d<h2>這是什麼</h2>
) i" |9 W* {4 N* ~7 D<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
. E0 _, P1 N/ E2 b  p9 g<h2>目的</h2>
/ V) M9 h! C# |<ul>
2 O( M2 Q. o, C! B  C5 e% p% k) B& w<li>學習HTML</li>
8 i! ]9 F* q" y6 [- y<li> 顯擺，炫耀
3 E4 n* F+ l7 I  <ol>
. b# t9 e) S$ @1 N, z6 }& \ <li>向老闆</li>
" f+ r! v: l% U# m <li>向朋友</li>
3 f- F  l; r+ ^- b! P! I <li>向我的小貓</li>
9 b. }& b' m' L6 w <li>給我腦中多嘴的小鴨子</li>
8 R: U( ?  B. G! `5 R, U+ f </ol></li>
/ H3 B& M3 |; P' i0 s: b6 L<li>因為我已經愛上了我的電腦，我想給她點HTML愛情調料。</li>
</ul>
<h2>在哪裡可以找到教程</h2>
<p><a href="http://www.google.com"><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" width="88" height="31" alt="Neo1 logo" /></a></p>
. ~+ T9 c4 V# Y$ T1 ^<h2>一些隨意的表單</h2>
9 D& X3 x( A6 {. k4 Y& V' M; F<table border="1">
<tr>
<td>Row 1, cell 1</td>
/ d2 Z, P! Z$ x9 X* b<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
, F3 {( i  M# N/ s</tr>
; v0 p: K  m- d! O<tr>
9 }. u$ N: L; Z, O; |" q8 s<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
7 a* t0 y0 T, G' |6 m9 @5 N$ \<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
. Y: t) S. l( X5 S& B<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
9 y5 y# R8 {( Y8 O# F* [# U</tr>
<tr>
: H' Z8 |3 o7 Z. P. \( T<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
* |8 c) Y% T4 V. Q5 _  ~</tr>
' d  r9 w! }8 @# T" Y3 d5 ?  I</table>
' \0 `% R+ E; {<h2>一些隨意的表單</h2>
% _% N7 j7 A2 v6 _( S7 W<p><strong>注意：</strong> 看起來似乎很重要的部分，但實際上什麼都不做</p>
& ^) T5 x3 G0 X8 N% c5 P<form action="somescript.php" method="post">
<p>名字：</p>
1 C% H1 P' U6 v, W) K<p><input type="text" name="name" value="你的名字" /></p>
<p>評論：</p>
# ~% c) c) c" l6 i) L+ o) E. S# |<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
2 z$ V& u) @5 d- M& l% i! y<p>你是：</p>
<p><input type="radio" name="areyou" value="male" /> 男性</p>
<p><input type="radio" name="areyou" value="female" /> 女性</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
<p><input type="submit" /></p> <p><input type="reset" /></p>
</form>
6 `) s- f7 S  ~- m, Y4 M1 d% Q8 l6 Q</body>
</html>

, }. \) q) m' f& N& B- h2 L就這樣。保存文件，然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧！

感到滿意的話，你可以繼續學習CSS中級教程了。