过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
/ @* f. [, \. V; U7 G/ S3 ^* L# T  S$ `5 O. U; P$ ]( U7 s7 \
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。9 U  |9 j3 A% F  k( f3 @$ O

. _4 U( C1 I: n表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
5 R, x  l( P1 d* D4 v; X
% z* I; G. ^- k! _實際用在HTML中的標籤有form、 input、 textarea、 select和option。* n! B$ z  ?6 M! l4 l  O, y

0 i% {4 z8 t6 @1 f2 X' o表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。; T2 u2 ~5 H# {. S) i" R& d

# K. J9 p- z7 R+ v2 W  {, W: q可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。8 I2 o/ p7 [. @  m$ ?8 s4 g
* P: E9 R3 x, s- k3 L) N' i
所以一個表單元素看起來是這樣子的:. V6 T; l1 k1 s7 R4 G8 Q/ ^6 @% R
! `3 Z4 o) w; O7 i- t
' _1 b" `& n  l7 t1 P+ z' F$ m
" P+ l- H. F. S2 f! t' \
Example Source Code [www.cn-webmaster.cn]3 z! z: [9 d3 \% @: A  a
<form action="processingscript.php" method="post"> </form>
8 F- [9 i4 A) w0 { ( u5 L. u* _& t  U1 c
input標籤是表單世界中的「老大」。有10種形式,概括如下:
  o6 Y1 l# x& X2 _1 P5 G/ S+ g3 P" s
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
% F2 C4 d2 `( q" \: I■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。 1 Z6 x( u6 x" k3 K- O. g
■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />. 8 n0 X' X1 p' f
■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
% |) y* G) w; B. a6 h9 Q2 ]* L+ t■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
0 m, K. p8 z3 Z■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
* R% r' d$ u0 |9 s+ M■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 3 }2 _# f4 [' Y) a6 S
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 - _+ ~( j0 v( N
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
+ _6 J# N. I* \/ q■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 ! p5 [) z; s: J: H5 J) g
注意輸入標籤input也是用「/>」自關閉的。4 `( T, y/ a5 E1 K$ T, O

; w$ L" v; q, ~: _# O多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:  w( \0 a7 \; N# l6 \

% C8 U8 H5 f$ |' J& v( G+ b  O: h0 O2 V4 U- f' B# Q' ~- ~
Example Source Code [www.cn-webmaster.cn]: H5 G+ ~, @7 N
<textarea rows="5" cols="20">A big load of text here</textarea>
* G) u; ^1 [) T' U/ L7 O  U
! w6 ^8 B8 N9 }3 D( ?" [選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:0 A/ L( B8 Z& }
( H" _6 l3 t- k, ?5 i
1 \8 J& u- u5 i8 o+ l5 ^: O# a
Example Source Code [www.52css.com]
3 g+ ~  V0 _  U/ H0 r# e) k5 o% [<select>5 P9 \' i- b* I1 i2 y& i3 W; U& [
<option value="first option">Option 1</option>6 p$ x& u! u  {
<option value="second option">Option 2</option>
! |, V9 p6 Z% Q% T7 {+ A( Z' Z<option value="third option">Option 3</option>
0 S/ R: e  N8 h( j% v7 Z</select>
- \& P( s  f/ Z3 d, K9 f) j( |$ _( l% O2 j# q* Z% V/ m& z1 j
當表單被提交時,被選中選項的值將被發送。
- @$ w4 C* O1 I! r4 |6 G! ]8 }# F  j/ Q0 U& Y& A# j4 ]$ e
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
* U$ c4 D& u( Y* s& }3 {
- f4 |$ g( a. T5 Y" x+ ?- n/ N3 g0 g上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。/ F7 y! ?' }' q# Y, q4 j0 n* T
  X) g# d+ @; _& ?. b% J' E8 Q
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)# P. H( l$ L+ F/ p" ]
9 K! \4 \5 M0 I

, n$ l2 {0 q  i5 I* P Example Source Code [www.cn-webmaster.cn]5 o2 ?( u. F) [9 M
<form action="contactus.php" method="post">6 |, Z% x# s7 v1 U
<p>Name:</p>; I* `3 ]) A' _1 r
<p><input type="text" name="name" value="Your name" /></p>
0 g1 o9 T/ _2 _: A5 P9 C<p>Comments: </p>( A1 Q* c$ n6 }# v/ J# a8 c
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
, R5 S+ X* N% H( n; x) j' Q8 T5 L<p>Are you:</p>
  R5 N  U5 p* `% R  }% a0 `<p><input type="radio" name="areyou" value="male" /> Male</p>
: x1 B) ~: h# P+ w0 w+ U- ]<p><input type="radio" name="areyou" value="female" /> Female</p># C/ K. D$ k; ?( M% P# U3 U' _& g9 f
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
) r" A3 Y6 V, o. Y* l5 P<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
# R' t2 C, H3 g" b% g2 Z<p><input type="submit" /></p> <p><input type="reset" /></p>* R- u: F: Q) T; ?  e/ @
</form>$ g' d: s* y, X1 N* h& G
. }9 v& x3 v! m- q8 q7 P
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來  e* W3 b* `  `& q% H
1 ~2 Q! y8 y7 ~* c
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。! ^% l2 o5 D2 ?
9 F; Y" e! s& i- a5 x; J
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
5 T$ q# U+ R/ i) s5 D* e! j& k  \# x6 t% p1 G
下面的代碼把前面所教授的綜合在一起了:
* n( b) E9 H6 c; {( i- i* Q4 H; d2 U$ k8 [' E
1 d( v0 R3 a+ c# Y0 g2 r

0 }. W: A# H% R8 y Example Source Code [www.cn-webmaster.cn]
2 M" }6 V, n/ l2 }7 x6 B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 w1 t5 H4 h# ^$ n  L+ T"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
( j/ ~& `. r. U( R# N<html>! p$ t  {+ @+ w& j; c
<head>
, k( z" O* z. v$ S% \<title>我的第一個網頁</title>
9 M' G: \$ j$ b/ l<!-- 順便說一下,這是註釋 -->
( |. D# }# u/ Y; j1 e</head>/ N* [2 G4 [/ ]; c$ P0 q% W) U2 [
<body>
0 G7 U7 c& T1 Y2 _, U. z6 G" m<h1>我的第一個網頁</h1>- T* Y% `" k9 V- _0 J$ C
<h2>這是什麼</h2>
7 ~) m. N9 _. _  r  J+ M4 `( d# M<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>6 d/ f* l* [. C% ^7 C0 P
<h2>目的</h2>
+ V7 o8 A1 C; {; R+ d: R  M<ul>
# }: n: i( K& q, |# u5 \& J$ i<li>學習HTML</li>
  [4 P; V1 ?) a! d<li> 顯擺,炫耀 : |. h4 J9 M5 a
  <ol>8 b; h6 ^- j5 d7 c2 U' h9 I
<li>向老闆</li>7 w! t& V& I$ V8 z( _& C; Q
<li>向朋友</li>$ g; `( U  P+ s8 J) j' w( l
<li>向我的小貓</li>' A: c, Y6 u  l6 @
<li>給我腦中多嘴的小鴨子</li>
+ u7 H9 L) c. \$ t/ J. g </ol></li>* |" t6 S3 ~  m) ?, L
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>& `: K0 f$ u: A7 g' s# U/ {* j. L
</ul>
+ [0 A" T; ~: U# I. m. ~<h2>在哪裡可以找到教程</h2>
! Z' k& G3 S, K<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>
" T0 R( P* Z# C1 d<h2>一些隨意的表單</h2>
$ ^+ F" d, z7 O+ k: V+ S+ ~<table border="1">
0 ^* F1 r  Z2 z, t' \<tr>
: L5 A; q" u1 ~. u' H1 K' {( z<td>Row 1, cell 1</td>7 G- f  [6 ?4 [4 K) N) [9 ~
<td>Row 1, cell 2</td>1 W+ m9 T9 D) r5 Q2 s4 T: w
<td>Row 1, cell 3</td>
8 g  V$ ]' {/ g# c7 z1 x$ k</tr>
3 `' L2 I; m  x; v<tr>
3 E8 @7 V$ d6 @1 l8 k<td>Row 2, cell 1</td>
: Y0 Z1 I  f1 W5 @<td>Row 2, cell 2</td>
& T% f( |4 _5 J; f2 N6 O<td>Row 2, cell 3</td>1 A7 ]0 A: r  n' x3 B+ N0 I; O/ y6 ?
</tr>
' ?/ [: ^  d& H: F. P4 e<tr>
( J2 b8 P: u" G; g<td>Row 3, cell 1</td>$ a$ s0 r9 `+ o0 s2 \6 R
<td>Row 3, cell 2</td>
$ T, X: _( {3 b7 t<td>Row 3, cell 3</td>
2 ]0 z# s+ T. M' ~% {</tr>7 ~% ?# O  b& Q: o) M
<tr>: R6 V4 c* d2 o8 Q, b! A
<td>Row 4, cell 1</td>
( D/ a8 R/ u& z  P3 `; X<td>Row 4, cell 2</td>
/ b2 G5 D) W; k<td>Row 4, cell 3</td>
6 l: \- a* t7 L</tr>  |6 T! x, s6 I. ^, H8 I+ K
</table>2 @- H2 a( T8 N% s- M
<h2>一些隨意的表單</h2>' v1 H; R' F5 ]# E5 `7 ~2 A6 ^
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>( d, z0 K# v4 f% z& S6 R
<form action="somescript.php" method="post">
# C, r0 V8 D4 _; ~9 R  Y) b<p>名字:</p>. M" o, `$ r) E$ K0 c; }
<p><input type="text" name="name" value="你的名字" /></p>" f) f  @2 x# r; b
<p>評論:</p>: N' g6 Z3 ]# B
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
, o9 m) v# s9 k! P* R0 V+ V7 T<p>你是:</p>
, u6 s. K) W* f% P- u; O! l1 \5 Y7 s<p><input type="radio" name="areyou" value="male" /> 男性</p>* O1 K) p$ I$ j! V. [. u5 @: P
<p><input type="radio" name="areyou" value="female" /> 女性</p>
1 L# a' B+ X$ G# ?4 b<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
% l8 I' V1 E) p* s9 \<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>+ f& b0 \) D& |1 c. G; I3 d
<p><input type="submit" /></p> <p><input type="reset" /></p>
8 |! T: W6 d' Y8 f. q</form>
# x8 o2 l0 f8 W" A% M6 N/ U, P</body>
4 B. G) ]' L' ^/ ~( c</html>
( Z% _( o  |: q0 h9 ~$ x% [3 {0 Y2 ]9 u3 ^1 A
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
, \" `7 M2 a3 [7 |" J# K1 s, R, o; ~; X" Z- P
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

發表於 2007-8-28 01:39:23 | 顯示全部樓層
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

點基

GMT+8, 2026-1-14 08:11

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表