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

10、表單form ──文本框和其他由用戶輸入的構件
4 {* @  F& F) ]! x; b' h0 c
表單可以用來在網頁中發送數據，特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
8 s  ]) z3 m) y" `6 [! j0 W  S/ Q: T
8 K) }1 G4 X. L表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML，你能夠自助地找到一些簡單的教程，開發一個服務器端的程序使一個發送到Email的表單工作。

/ ]: {0 \4 l1 e# `7 p6 Y6 Y% u: ^- z實際用在HTML中的標籤有form、 input、 textarea、 select和option。

; D- X+ H$ u( p表單標籤form定義的表單裡頭，必須有行為屬性action，它告訴表單當提交的時候將內容發往何處。
) y2 B4 J  D; q  n' }
可選的方法屬性method告訴表單數據將怎樣發送，有get（默認的）和post兩個值。常用到的是設置post值，它可以隱藏信息（get的信息會暴露在URL中）。

所以一個表單元素看起來是這樣子的：
& }( x7 v7 {. f/ C0 T& m0 k6 G9 x
. F6 D3 a" L, `0 J, v

Example Source Code [www.cn-webmaster.cn]
5 D) Y; _7 A& r- U- D  H) e& }<form action="processingscript.php" method="post"> </form>

$ Y+ u4 y  g" K5 j# O4 G' uinput標籤是表單世界中的「老大」。有10種形式，概括如下：

+ {+ i8 B% y# v8 b! I■　<input type="text" />是標準的文本框。它可以有一個值屬性value，用來設置文本框裡的默認文本。
■　<input type="password" /> 像文本框一樣，但是會以星號代替用戶所輸入的實際字符。
6 S; A* K: ^" W0 @8 P■　<input type="checkbox" />是復選框，用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked，像這樣的格式<input type="checkbox" checked="checked" />.
) m$ Q& k+ [' k+ [4 E+ ^1 J! g■　<input type="radio" /> 與復選框相似，但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked，使用方法跟復選框一樣。
■　<input type="file" /> 是展示你電腦上的文件的一個區域，就像你在一個軟件中打開或者保存一個文檔一樣。
7 D: g6 P/ D& G, I■　<input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本（下面的button和reset類型也可以這樣，稍後介紹），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
( y. C7 i9 G" E# M- a" a( O■　<input type="image" />以圖像代替按鈕文本，src屬性是必須的，像img標籤一樣。
7 A. g0 j7 M9 f( W; Z2 l■　<input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
■　<input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
■　<input type="hidden" /> 不會顯示任何東西，它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
注意輸入標籤input也是用「/>」自關閉的。

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


0 w8 f7 P6 i& z! K Example Source Code [www.cn-webmaster.cn]
; e# Q5 l0 I# u4 u" o3 |<textarea rows="5" cols="20">A big load of text here</textarea>

選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的：

: i7 o( E' D; U+ x2 y) Q, `* ^
- l* Q5 B9 G, V  { Example Source Code [www.52css.com]
<select>
. g0 M( ~7 b- i<option value="first option">Option 1</option>
' F# {/ [1 J& N! }6 u<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
, q2 P5 l! _* g( K1 A( L</select>
3 k2 w$ f' x4 J/ c3 w5 e: C. u5 O( e) g
5 v  o% s6 D' O- b8 G" \, Z9 H( i當表單被提交時，被選中選項的值將被發送。
) |" c; t6 r! m+ U+ l
/ y0 T! c- J; X) I9 J與復選框和單選按鈕的預選屬性checked一樣，選項標籤option也有一個預選屬性selected，它可以用在這樣的格式中：<option value="mouse" selected="selected">Rodent</option>。

上述的標籤中在網頁中看起來都不錯，但是，如果你有一個程序來處理這個表單，這些標籤都不起作用。這是因為，表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name，比如 <input type="text" name="talkingsponge" />。

一個表單看起來應該像下面這樣（注意：這個表單不會工作，除非有一個用來提交數據的「contactus.php」的文件，它位於表單標籤form的行為屬性action中。）
, [" e- j) |2 m
& s6 Z/ ~* S3 _. B5 ^
5 K6 r/ M' ?9 U+ |5 g+ y8 h, X$ H! ` Example Source Code [www.cn-webmaster.cn]
6 O5 f" w8 v! b  i& u<form action="contactus.php" method="post">
! u1 B# K6 X' r! x" S; t<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
/ ^- s" f2 Z5 O( f( T% z<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
! M: K7 ~* p; u4 a) e  z  V2 G<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
# S0 u: D& ~# [: e" A$ j: u<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
7 P) a! I  r- J: F, E6 r3 T5 g; |<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
! g1 E) u0 B5 E6 s<p><input type="submit" /></p> <p><input type="reset" /></p>
2 v( {6 P$ j: `9 y</form>
% x5 m9 b' l4 j1 q8 O
( k. O& l0 w9 b. ~在HTML高級教程中還有更複雜的高階水平教程等著你，如果你想進一步瞭解和學習.

11、綜合應用__把上面所有的要素堆積起來
, w  @2 e7 M& c6 }
如果你業已全部瀏覽HTML初級指南的全部頁面，學習完畢初級指南，你事實上已經是一個能幹的HTMLer了。
: {# d3 J8 l& {3 x4 H
實際上，基於許多人編寫HTML都相當差勁的事實，你應該做得比他們更好。
, P6 ]0 Z0 [2 S; u5 `0 A0 ]
2 J+ g# b/ U) D/ \9 j7 r) `, N' J6 e下面的代碼把前面所教授的綜合在一起了：

0 s& z8 q# c+ Y
3 `: v$ P7 J. n+ f& Z+ m! R6 m  `
2 }, S& W) w3 U5 p Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一個網頁</title>
<!-- 順便說一下，這是註釋 -->
1 I' o/ }( ]3 G# R6 S' l% ~</head>
" J' L" O: q5 `8 Y<body>
  C, A# m( n6 g. Q<h1>我的第一個網頁</h1>
<h2>這是什麼</h2>
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
& t$ b1 a, U/ a3 i% }<h2>目的</h2>
5 s7 A+ m3 }/ `# l  ~<ul>
<li>學習HTML</li>
5 l1 E9 o$ z4 F<li> 顯擺，炫耀
! ^5 }* m' w2 W. x% a4 @  <ol>
<li>向老闆</li>
<li>向朋友</li>
2 d: K1 y+ Z/ U! u5 ^ <li>向我的小貓</li>
<li>給我腦中多嘴的小鴨子</li>
% p3 u# b1 f! m+ k8 f </ol></li>
' q  p. A; ?) _3 ~: D! E<li>因為我已經愛上了我的電腦，我想給她點HTML愛情調料。</li>
# ]- n6 c) S4 c* C</ul>
9 ?$ r7 q5 }+ Y4 o<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>
) U) X, Y6 M$ {( [) L+ K- {% o- K<h2>一些隨意的表單</h2>
<table border="1">
3 R  b( N7 s9 {* D  v* N<tr>
5 O- p1 G3 X( w0 [1 h% I<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
+ f: J+ b9 w' L  L* L</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
# n6 O2 F9 E5 `& S! E<td>Row 2, cell 3</td>
& z4 n+ ^' o/ O( i1 G</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
9 T$ P  R7 G6 j+ Y. |; z2 b<td>Row 3, cell 3</td>
</tr>
) I+ l5 ^" ?) V  \% v9 u7 i: @<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
1 X3 d; v$ [6 y* U</tr>
</table>
0 x3 t' ]+ p: p4 i1 C7 u<h2>一些隨意的表單</h2>
4 S4 I. v/ b+ T6 h7 r$ W<p><strong>注意：</strong> 看起來似乎很重要的部分，但實際上什麼都不做</p>
6 I, ^9 x- V( Z) J<form action="somescript.php" method="post">
<p>名字：</p>
6 v! Q6 F3 i: f) L+ Z% `; n8 V% t<p><input type="text" name="name" value="你的名字" /></p>
<p>評論：</p>
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
) d7 U' B: l4 v2 Q  G4 \, u9 E% Z<p>你是：</p>
<p><input type="radio" name="areyou" value="male" /> 男性</p>
<p><input type="radio" name="areyou" value="female" /> 女性</p>
4 e; P. k. ^! ~: y, j9 _( ~/ ^: a9 ?<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>
1 L$ G6 y! H2 b! E2 s3 Z# D</form>
</body>
</html>
6 X/ n) e: L/ n" ^3 v3 B0 r2 u
1 O2 e" `: U' b就這樣。保存文件，然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧！
& a: b' b+ H2 M7 o" h9 J
感到滿意的話，你可以繼續學習CSS中級教程了。