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

10、表單form ──文本框和其他由用戶輸入的構件

表單可以用來在網頁中發送數據，特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。

表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML，你能夠自助地找到一些簡單的教程，開發一個服務器端的程序使一個發送到Email的表單工作。

實際用在HTML中的標籤有form、 input、 textarea、 select和option。
! o8 N% `: N+ a' |' o/ k
表單標籤form定義的表單裡頭，必須有行為屬性action，它告訴表單當提交的時候將內容發往何處。
9 \' z& C) |9 n& c' }
可選的方法屬性method告訴表單數據將怎樣發送，有get（默認的）和post兩個值。常用到的是設置post值，它可以隱藏信息（get的信息會暴露在URL中）。
% X) h- `6 j: G$ \# F
/ H/ U$ D  R7 L* q) E+ c所以一個表單元素看起來是這樣子的：



Example Source Code [www.cn-webmaster.cn]
6 @! P$ |* y" e! U( n<form action="processingscript.php" method="post"> </form>
2 _! w$ ^8 S+ ^( C, t  J
input標籤是表單世界中的「老大」。有10種形式，概括如下：

! H. C. g- Y; @2 I' p6 T■　<input type="text" />是標準的文本框。它可以有一個值屬性value，用來設置文本框裡的默認文本。
  A2 q, F+ T3 ?4 R. o' W5 }* X■　<input type="password" /> 像文本框一樣，但是會以星號代替用戶所輸入的實際字符。
■　<input type="checkbox" />是復選框，用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked，像這樣的格式<input type="checkbox" checked="checked" />.
■　<input type="radio" /> 與復選框相似，但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked，使用方法跟復選框一樣。
5 b: p" ~3 ]5 M4 c2 x■　<input type="file" /> 是展示你電腦上的文件的一個區域，就像你在一個軟件中打開或者保存一個文檔一樣。
■　<input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本（下面的button和reset類型也可以這樣，稍後介紹），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
! h. d5 D$ Y7 c  J2 _( J■　<input type="image" />以圖像代替按鈕文本，src屬性是必須的，像img標籤一樣。
2 j. ?' t$ X" ~: w# ?- |■　<input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
7 l! `) d& h7 {1 s+ K; t3 r; S■　<input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
& j% B: f, t' c1 v5 h( y■　<input type="hidden" /> 不會顯示任何東西，它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
/ ]) N4 v, A+ I) T注意輸入標籤input也是用「/>」自關閉的。
  B1 l  x2 \- @+ F) k
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols，用法像這樣：
4 M& _9 S7 \4 M3 [! v, h
) U; T8 U$ u3 U, t
. f- v4 F+ M1 k Example Source Code [www.cn-webmaster.cn]
3 q  c8 }, \' E* g& f) G<textarea rows="5" cols="20">A big load of text here</textarea>
/ k) |; _7 O. T# q( n* y" F
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的：

: d; b7 e6 B1 g6 M  y+ F
Example Source Code [www.52css.com]
) w2 A% p$ v* T. D7 t6 K<select>
( N6 j% b# F) H, e# z/ J9 `. \<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
+ @% Y- Z$ g' ?- E& [<option value="third option">Option 3</option>
</select>
5 G( k9 _0 m" `
- i1 b0 @! {( G. H" s0 W當表單被提交時，被選中選項的值將被發送。

與復選框和單選按鈕的預選屬性checked一樣，選項標籤option也有一個預選屬性selected，它可以用在這樣的格式中：<option value="mouse" selected="selected">Rodent</option>。

, V6 A7 x- F5 |: S# O6 O* T7 o上述的標籤中在網頁中看起來都不錯，但是，如果你有一個程序來處理這個表單，這些標籤都不起作用。這是因為，表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name，比如 <input type="text" name="talkingsponge" />。
. z) A5 u. t! a  m# H
- {; h8 }& ?6 h. ^: z+ ^+ q# y# U一個表單看起來應該像下面這樣（注意：這個表單不會工作，除非有一個用來提交數據的「contactus.php」的文件，它位於表單標籤form的行為屬性action中。）
; ^% Y' X  W2 @, X

Example Source Code [www.cn-webmaster.cn]
<form action="contactus.php" method="post">
( U7 d/ n  J7 ]' S) q<p>Name:</p>
. Q# j* l" b! C2 a/ R' r<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
- D" e. \6 x4 @: h) u2 o<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
# ?# R2 E  X+ [<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
# Q6 q) n) E8 e3 w+ X  R<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
- m( X" v* ~/ J) D  Q<p><input type="submit" /></p> <p><input type="reset" /></p>
7 I5 m1 c% E3 L$ I  K. Y' `5 N, |; s</form>
  |4 v, z8 j! {3 _. \+ Z2 d4 H
+ w3 C: T* ~3 f4 e  s" i在HTML高級教程中還有更複雜的高階水平教程等著你，如果你想進一步瞭解和學習.

11、綜合應用__把上面所有的要素堆積起來
: T4 r0 a* Y" M. f" w$ q0 l
4 t8 Y. l0 }1 X4 I' g2 @, Z如果你業已全部瀏覽HTML初級指南的全部頁面，學習完畢初級指南，你事實上已經是一個能幹的HTMLer了。

4 ~) k$ K1 h( R5 Z- m實際上，基於許多人編寫HTML都相當差勁的事實，你應該做得比他們更好。

2 l1 \6 Q6 y6 A) C, S下面的代碼把前面所教授的綜合在一起了：

! r$ c% Z1 P! B" u2 P: m1 j: X# ^
# h( n; f6 |! d" ]) k9 @. o
. m0 Z9 e& s, N Example Source Code [www.cn-webmaster.cn]
- S/ E. e9 S! z0 }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
$ t8 N) X, f& Z+ Z3 ]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
8 h6 C+ P5 p* z2 g<head>
<title>我的第一個網頁</title>
  W! F0 s: {8 ~. s" n<!-- 順便說一下，這是註釋 -->
</head>
<body>
/ }9 x$ p( F! S9 [: W' a6 {<h1>我的第一個網頁</h1>
<h2>這是什麼</h2>
* ~1 O# }: e  H% m% p<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
<h2>目的</h2>
<ul>
- X& h. W& S0 C<li>學習HTML</li>
<li> 顯擺，炫耀
  <ol>
6 w4 b; y' m8 |7 ~7 t <li>向老闆</li>
& ~3 B9 r# q3 V <li>向朋友</li>
- ?# a0 i  [% d* V1 p( S$ G# D <li>向我的小貓</li>
$ N! o& H$ X% o+ y1 J* {! c0 B <li>給我腦中多嘴的小鴨子</li>
; c/ X' O  }# w- { </ol></li>
<li>因為我已經愛上了我的電腦，我想給她點HTML愛情調料。</li>
</ul>
<h2>在哪裡可以找到教程</h2>
! M5 Y7 a6 S; z% l0 Y& G! M. b<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>
1 ^1 F* B( x; y+ S' b; `<h2>一些隨意的表單</h2>
<table border="1">
2 n1 K+ [) u( K2 v- U2 r<tr>
: }, c9 [- ]- x5 ?$ h! e. E/ A<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
& W( a: f& W3 G/ V2 |1 h<td>Row 1, cell 3</td>
</tr>
4 r! |3 q; x+ t  j; A9 Z<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
1 b8 ^- G6 D' P1 L* s<td>Row 2, cell 3</td>
% y8 O' {# T9 a# P/ x</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
. K' W" t% h, `) J<td>Row 3, cell 3</td>
</tr>
& Y* R. F' i3 R% W* I<tr>
3 d2 [- h  s; Y+ l- R( R<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
6 c3 _. Z# @# D( @" ]% H</tr>
</table>
! O5 k7 B3 `) |  T1 \* `  M9 r& J<h2>一些隨意的表單</h2>
9 p* V7 z( N2 s/ u; o" c' G& a6 o<p><strong>注意：</strong> 看起來似乎很重要的部分，但實際上什麼都不做</p>
( h. G) E$ M, n% [<form action="somescript.php" method="post">
<p>名字：</p>
<p><input type="text" name="name" value="你的名字" /></p>
0 v/ X6 p  Z2 h/ j2 P- `<p>評論：</p>
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
<p>你是：</p>
3 a; Z2 c* Y) S1 g  |7 ]' B<p><input type="radio" name="areyou" value="male" /> 男性</p>
<p><input type="radio" name="areyou" value="female" /> 女性</p>
" t9 @5 Z1 O) J5 O. Z% ^<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
/ z3 n# @( c/ M$ F<p><input type="submit" /></p> <p><input type="reset" /></p>
) H# b# Z/ c( l# ?</form>
7 X3 E3 ~. ]$ b& y7 _9 a1 c0 F8 ^</body>
</html>

6 a- L9 L2 _: ]就這樣。保存文件，然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧！

$ _% D  |( a8 ?1 i1 r: e& ]6 p4 h感到滿意的話，你可以繼續學習CSS中級教程了。