过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
+ u, g: O7 k, j3 g: S2 {! I2 V7 _! h) O, T: F
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。' F+ {3 }3 m1 t8 v5 y# f$ z( X/ D) N
" O, n/ G0 t- K0 N2 |0 \
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
; |) q- ^6 ~  B( m& e" A, d1 Y& `7 y$ E% S
實際用在HTML中的標籤有form、 input、 textarea、 select和option。8 a, Z7 s7 O" O* t
' S; \4 ?1 Y& @  K& @$ h; y  q
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。* P( R0 G- W0 R/ s

2 S1 ]! t8 E% q* e7 r7 |% j6 e. g4 |可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。) c* i  s' E) K

, p6 Q# A+ X+ w: E0 ~* v1 o9 B所以一個表單元素看起來是這樣子的:! @+ G, S& h1 k& M; B
/ @/ B8 M+ A. d- X

: G) t3 @% f( v* Y2 S/ R3 f2 K/ U2 Z" N# _/ m1 L2 R# {
Example Source Code [www.cn-webmaster.cn]
; t8 r+ V( V) B7 k4 @& q<form action="processingscript.php" method="post"> </form>
  [1 v6 h: W' A# Y   h0 z0 k0 f' w  h3 x( x2 @5 o- z
input標籤是表單世界中的「老大」。有10種形式,概括如下:
# V2 l! z5 K$ w0 _; q5 O: q
0 o% |1 V. n* m% `8 |! s■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
# D% @6 ?. `0 u9 Q- U- P" r7 x/ p■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。 # n5 i+ `& e+ w6 r( B: P1 d
■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
5 K; s5 N% C1 v. A: a5 ^■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
6 U" X/ X  B. E■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
; |; ]8 J7 k2 o  K2 \■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
- O% G7 U" O9 X# B" D■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 : o0 E8 B$ E; C) s. Z5 y2 o7 w
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 - h- q- b1 o: J/ s4 C4 \# J9 ?: \
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
9 f" b5 p+ t: I! I■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
5 m- O3 c" J; [9 G; E注意輸入標籤input也是用「/>」自關閉的。
- G. h& f) Z1 z% E/ R/ C' ^( {& n$ X4 Z, A. L
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:2 r5 X. |0 q. c. ?5 H0 c) E! R' L

5 G3 ~: n& d9 @8 A( m3 x
8 w  G1 I7 y2 B& j, K; ]7 r1 s0 w Example Source Code [www.cn-webmaster.cn]* o8 Y# L. i: a+ A  ~
<textarea rows="5" cols="20">A big load of text here</textarea>0 X; l0 l8 |+ x" q9 O
0 i6 {- h- ]& k5 w1 P, o3 y
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:9 k- ]7 ?. t4 i1 ?6 s

! K7 K8 f: Y' n# n% k% ^: J
+ h; q1 U. u0 `. o3 I5 T Example Source Code [www.52css.com]
0 J! d# }) X2 I9 t1 F: J<select>
4 B; U9 S/ v5 w, h$ T0 N5 W4 V; ~<option value="first option">Option 1</option>9 C  C, o+ p1 v: g% ?
<option value="second option">Option 2</option>
1 |$ s6 M6 ~) {! i0 h- P1 }; Q<option value="third option">Option 3</option>, g/ z. b& z9 u4 d7 Q( W5 e0 G
</select>
( b, T: d7 z4 W$ @5 G
( J/ k; a* G' J. j* ~4 K% ?& }當表單被提交時,被選中選項的值將被發送。
& o" C; s: I3 M0 i2 m; p! {" k- [" ?& {# ~5 n+ q+ M- u" b
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
& y8 f2 ^; h5 H8 U" i4 P  \* K8 q8 A
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。' P* b9 w! \0 K' A% y2 f: k9 J0 e0 F" n

( k' L/ Q. t4 }; r7 ?! S9 g! C一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
' z" ~; a' l; B+ [
/ B1 Q; G+ ~3 J! ^! s' [
1 @: L0 u4 z: {' j7 o' r; s Example Source Code [www.cn-webmaster.cn]
  }# n2 J# P8 R2 }  {1 Y; P! R<form action="contactus.php" method="post">
. a+ E) _0 E9 T) z& C5 s' y<p>Name:</p>& N  z( b( j+ G9 Q8 O- B
<p><input type="text" name="name" value="Your name" /></p>" a0 j% B" m+ U2 M0 n+ H, A
<p>Comments: </p>
/ \7 z0 A' M7 c2 T; @& F7 ^<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
" j* i+ ?. x# p- r7 e% H<p>Are you:</p>
0 c: i) f7 s8 p2 \. g& A" \<p><input type="radio" name="areyou" value="male" /> Male</p>/ Q* Q9 Y2 [, t' T; j& u! ^
<p><input type="radio" name="areyou" value="female" /> Female</p>
4 [: t7 }8 I8 n  T! @( y9 Q7 E<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>, ?; Z# J- t+ U6 `
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>+ f: ^: ?0 A4 u( K3 v# G
<p><input type="submit" /></p> <p><input type="reset" /></p>3 N/ s6 I  a8 ?7 M
</form>* d6 K* ~. D5 H

! `0 B$ d- B2 O) v在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
8 e, I+ t, M8 q" b% @! N4 T" [' A8 h' {
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
! d; v: v# t9 X  m* q$ ^
, e# v# Y. O0 m) i$ S" _* x實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。, c& g+ T( p1 b4 u* N; L! I2 V

/ @+ r, @5 S3 |& ~4 g" o下面的代碼把前面所教授的綜合在一起了:
' g+ J  y& a9 G5 m/ _% H
/ c; s/ }. K, j3 o+ {6 D( z8 ~9 B1 m2 Q9 Z( u

6 U1 ]" L! Z' {  p! u: E Example Source Code [www.cn-webmaster.cn]; D& E0 i4 [$ V, N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 7 ^4 s3 @  E! h' z: d7 m  Y9 f. V
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' F& |- f7 j/ K. ]
<html>
, n9 V! }; i3 |<head>( X0 B; q2 X  e$ g- N: d
<title>我的第一個網頁</title>
, F" Q0 ]0 j& I<!-- 順便說一下,這是註釋 -->
1 Y6 e1 |, ~; O; Q, j7 w, s</head>. o4 C+ s3 _! T) n6 C/ E. x! g
<body>
/ f; B# ~! s# g9 L; B/ H; Z<h1>我的第一個網頁</h1>' T, r4 y# e: L  J5 k) s( W
<h2>這是什麼</h2>
+ {: W3 L( x; k! B! R" W<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
6 Y& |! \! m! o. ?, b" n<h2>目的</h2>. b$ n5 {- g3 x# E# h# U7 ?5 X& f# T8 z+ \
<ul>2 G# }, J  _! q5 @" i! ^# e  y
<li>學習HTML</li>% P; ]- D  C" `3 d3 A6 ]7 o; ^
<li> 顯擺,炫耀
0 v5 K; A4 L" [4 r  <ol>; ~! r* X2 w5 l0 h
<li>向老闆</li>, _& Q$ R+ ~# W% }. |0 d
<li>向朋友</li>% O0 `# \' d, U% ^) N5 G
<li>向我的小貓</li>! U6 s/ Z0 m- O5 P
<li>給我腦中多嘴的小鴨子</li>) D" _# S. s( d6 k! }) l' Q0 f
</ol></li>) M) \3 ?/ F: V$ |
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
9 u  C  z' W4 }; v2 E</ul>
' F+ p8 a5 D* E, A4 w<h2>在哪裡可以找到教程</h2>
% {  k3 Y  W( D1 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>
3 z* F$ }  H$ J5 L- C7 k<h2>一些隨意的表單</h2>
& o* \: o& c- x2 u<table border="1">* Z8 B0 i# v, v
<tr>
, j2 I" _* _0 @<td>Row 1, cell 1</td>
: n( Y0 u% @; C( y  L, n<td>Row 1, cell 2</td>5 G- G" |. N; ^; M7 E4 j
<td>Row 1, cell 3</td>
7 C; j5 i! m; p3 e* D( k* v' r/ T2 O! X* z</tr>
2 g# A) T0 |# d<tr>
% X* K0 S& u9 f6 s<td>Row 2, cell 1</td>
' J0 ?, F# b5 M) u; a: y<td>Row 2, cell 2</td>
8 c9 ?) e! J( u( S+ S0 F! b<td>Row 2, cell 3</td>/ U7 \+ A  p* n
</tr>7 |$ C7 g9 X2 w# R4 F$ H) D, T
<tr>8 g# L( N1 V% X- [0 x& g  [1 ^
<td>Row 3, cell 1</td>
2 g: p: A) P9 `<td>Row 3, cell 2</td>
' k. F/ j' E$ z8 L8 y; ^<td>Row 3, cell 3</td>7 O% P! c: @$ L! `* T
</tr>
3 u% X( x1 w" Y3 `+ t% p<tr>
# W7 ]4 @8 T0 i. w2 ~) m<td>Row 4, cell 1</td>
% P$ C! U7 l( e" Y0 y+ g& [<td>Row 4, cell 2</td>& t* V. W) O- S& r( Z
<td>Row 4, cell 3</td>
1 W7 I# x  F, K9 k- [</tr># [$ r  n; K8 q; A& o' @5 _  e
</table>
0 x: b* \- P8 A<h2>一些隨意的表單</h2>' k$ B1 F+ i3 A- F
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
0 |3 P1 ]  t- i/ t<form action="somescript.php" method="post">7 V, s+ L9 N3 J4 F. ?
<p>名字:</p>( u' c4 I) `/ u* \0 `
<p><input type="text" name="name" value="你的名字" /></p>5 p1 h4 j% e( \4 x6 `& u0 V5 y5 O
<p>評論:</p>
2 r- H9 Z2 {" u" b' `<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>9 b- F- R, O8 k8 O  B) C/ i$ r
<p>你是:</p>
( y8 U& a/ ~; ]# x! m& u& V! [; G: v<p><input type="radio" name="areyou" value="male" /> 男性</p>
1 `1 H0 p+ r1 Z9 Z6 Q9 T( w<p><input type="radio" name="areyou" value="female" /> 女性</p>
" A8 m+ s% J: T' E7 K0 }" U<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>7 b2 [2 G1 ]) g& Y
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
6 V$ }) C/ X$ |5 E9 t<p><input type="submit" /></p> <p><input type="reset" /></p>
8 C8 s$ B) ^. \4 f# E</form>* v6 M# v) }  ?, o3 v# D
</body>% `  [+ }1 p1 b0 w! c4 ?( J
</html>
% h- w1 C8 M1 ?9 x# c
# Q6 r5 x% d( x1 u  `7 O就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!0 K. z3 u" J0 |- L7 c; H+ O0 L

3 e4 j3 ~, t" J) Y% J9 ?, ~感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

过期高净值品牌域名预定抢注

點基

GMT+8, 2026-2-6 22:13

By DZ X3.5

小黑屋

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