过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 , R2 X. P" e  |6 {) r
3 ]6 W% M2 q0 a: P& |
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
) Q- X  \8 P/ d, p0 ]
* X/ l" ^' J( f& x+ g表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
2 G. o5 _0 \$ T' v# L6 F; |) z& k7 \- \: E9 g9 \
實際用在HTML中的標籤有form、 input、 textarea、 select和option。: z1 b8 a5 J! L

- Q$ n- R. C6 {; `7 ^6 U& V- w表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
( k2 I2 S, H! x
" g7 \1 k3 L9 h& T' }可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。$ a$ |' f% O: ^9 x! @6 J/ z
7 N; I# \: I" ^) C4 Y' N7 p; i
所以一個表單元素看起來是這樣子的:
9 M& u* S' f$ Z' G6 s3 ~% c  [5 |% |  R; C- f' x

9 }+ h; A5 C( a
: g7 h& N1 K: c( i! M8 [ Example Source Code [www.cn-webmaster.cn]
; z* c$ T7 }9 g! f+ o  ?8 A$ ?3 w<form action="processingscript.php" method="post"> </form>
8 O) {- R9 W# Q$ b( {
1 _* v, X' X4 y7 A& yinput標籤是表單世界中的「老大」。有10種形式,概括如下:0 ^+ k% n: u2 G  }) ?
3 k5 p4 {* G( T  Z6 U
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 9 D& ]0 y' s3 V
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
$ Z! e8 f+ W- T+ m; C5 ^" G3 N. G■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
  O; g1 w( E, D0 y: {! p5 `; f■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
& X& ^+ h4 Y7 n6 o1 i, q# D2 V■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 - a/ }: V; A  P8 B! @5 I
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
( F* Q1 Z1 ^  S0 a; r# r8 p■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
( T) L8 E4 i# E6 x■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
9 g& y0 i9 V& R/ Q9 ]; S/ T) Z8 s$ m$ d■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 ' E: o- Z6 H) p) m
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
2 b+ D9 j+ v. d$ v& K注意輸入標籤input也是用「/>」自關閉的。& S* {/ N. T: L+ C; {- w

5 B1 y/ u6 {/ u: X多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:" Y' K4 `! c" V: d0 l2 N, E0 }, A
+ R- d: k- ^9 o3 T2 _8 j( c& `
7 [/ X* {6 U; u
Example Source Code [www.cn-webmaster.cn]
( E1 Z3 k+ P' |) y! [# M4 \<textarea rows="5" cols="20">A big load of text here</textarea>6 y! ~. v5 b8 ~% ^! C" l4 I' S

+ [' a% G6 d: {* o選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:' Z$ ^6 t: ^$ V: P
% u  R  f( [2 T4 Q- T' t; b
1 m( I4 o) d0 _% p! P/ u) q: @
Example Source Code [www.52css.com]  V& ~7 T+ N' ?/ f6 B/ u' _
<select>. u* ]* U# a7 V3 i' |" W
<option value="first option">Option 1</option>6 w+ S, s: O2 `3 S' y
<option value="second option">Option 2</option>7 Q7 m5 T5 u1 `. s; G3 j1 [
<option value="third option">Option 3</option>( l/ M  u4 B8 Y. D" v& Z
</select> - Y" T, _" p, N/ R' @- K3 x

& V3 z1 Q; m, t& `當表單被提交時,被選中選項的值將被發送。8 r5 D) u4 m) S2 s" T2 o% C
7 w' W" a7 W/ y5 y2 n6 I# Y
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
( \. b9 c/ C! r* B% ~, \" i$ @( ?# V! N( H6 W
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
" `+ }" c' F) a  X; L/ ~# ]
( G" E$ i5 i9 U( d; N一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)6 h! d7 k/ j& c2 o3 g* A

6 r! U$ |5 t7 z
7 n$ p9 j6 C6 A; A; E Example Source Code [www.cn-webmaster.cn]( d  t/ `! ^* u$ z
<form action="contactus.php" method="post">
! e0 P+ `1 N+ Q& g<p>Name:</p>) N" A* \7 [% B, C! C+ z; J
<p><input type="text" name="name" value="Your name" /></p>
; L; h' b7 u7 ~) x  X<p>Comments: </p>7 c) v. Y7 ~8 p! r, {* `
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
+ T) `0 a( k$ H4 `7 V2 O6 d" }<p>Are you:</p>
. k, A6 E4 U* W) i" P<p><input type="radio" name="areyou" value="male" /> Male</p>
4 F4 J% k* i" ?) o! e<p><input type="radio" name="areyou" value="female" /> Female</p>; ?3 i2 r6 z4 H4 b# }1 s' v2 j
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>/ U7 x' I6 _, F+ D0 N& m* Y
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
4 D0 v  V: p% [, N6 `<p><input type="submit" /></p> <p><input type="reset" /></p>
3 k+ U, N5 `4 G+ O" Y, v5 E</form>% |5 K+ N: \* N2 x% M; i

5 [% r2 [% w; z' `" D* u1 w在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來: y- c# H5 e0 l7 d% {, ~

8 r/ f% I6 h; L6 H; v4 W0 b- Q如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。* l2 H/ ~' I- ^  e$ ]

  \0 Z1 K  f  J, k. b5 ?. I實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。$ R' ^- q# h- F
* A8 y8 ^& M5 }$ p, A
下面的代碼把前面所教授的綜合在一起了:& e$ s" m  k$ C/ F, a

5 O5 p, H3 m/ y" n) J5 @
5 W. r0 `  h' X- M0 u+ n5 X9 t9 c$ u' I; _1 M
Example Source Code [www.cn-webmaster.cn]
# m+ h7 Y+ V0 V% ^: @0 x<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" . @/ n2 {2 \$ Z- p6 T
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
# K. O6 A( ?$ E/ _6 x! [<html>) K% m% s: G3 H* v- a2 r
<head>
% Z: C+ R/ R) [+ T  u. @  u" C<title>我的第一個網頁</title>
$ h2 E* _* R- k: H& \( T" L<!-- 順便說一下,這是註釋 -->4 y& t, B" M: u. r( Y% m4 m2 V+ ^
</head>6 R$ K6 E  Z$ M& v2 s
<body>, h. ~# r+ `. m+ |
<h1>我的第一個網頁</h1>5 u: i- ~) ^% `: v. X
<h2>這是什麼</h2>. g0 X  w- ]7 a3 d( X
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>1 w; ^9 J# Z8 `8 t
<h2>目的</h2>0 G; K0 p, x, l& u
<ul>
3 u# _/ P/ v3 q/ }) Q) \% J<li>學習HTML</li>" o4 b: i5 t. a2 ^6 p* G) ?
<li> 顯擺,炫耀
3 r3 [4 i, P1 L- M  <ol>
; b# C$ D0 n+ X  E8 G5 C <li>向老闆</li>4 ?; E- Y' h) m* x9 }; v
<li>向朋友</li>
8 j/ T6 {- Z1 S5 R <li>向我的小貓</li>
% c) B; U/ l4 B <li>給我腦中多嘴的小鴨子</li>5 ]- [9 ]1 Z) w! v+ j1 C7 I
</ol></li>
: U2 b, H" ~2 B/ P% @, K5 }5 U<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
* H+ O% }( y# }& X</ul>; H% W$ l1 S6 C
<h2>在哪裡可以找到教程</h2>
, C) ?; @. B% K0 r<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>2 {5 I' v6 y2 L* f3 A1 O
<h2>一些隨意的表單</h2>
; y. i; b. Y1 }9 F<table border="1">
+ q5 o6 E- O0 H0 T<tr>" x& C( Q% o* Y6 ^
<td>Row 1, cell 1</td>; K) d; r, b5 G' A
<td>Row 1, cell 2</td>& J- M  |- g4 e5 U
<td>Row 1, cell 3</td>
: ]6 K% W2 B8 H5 F* y# i</tr>
* ^# W0 J. `9 R( Z+ o" F<tr>: j: ~8 q# h+ ]/ j( I
<td>Row 2, cell 1</td>- L+ H4 n7 }/ j) b
<td>Row 2, cell 2</td>
# t  y3 H. O; F) O5 C" E<td>Row 2, cell 3</td>( W5 U9 v. L. j
</tr>  H- w8 M5 G2 J2 m
<tr>
* b6 H# j, r  P+ n<td>Row 3, cell 1</td>5 q- A- U% x. ^3 p, M
<td>Row 3, cell 2</td>( u' Y# U: Z$ ]6 `- H1 O  O' v
<td>Row 3, cell 3</td>
% T, g- P+ b  X# C+ D; j! {. Z</tr>) Y2 D1 [; T  u- @& V
<tr>: y  i1 M0 \) E) O. r8 q
<td>Row 4, cell 1</td>
0 ?4 V' H0 \/ J3 B) k# D<td>Row 4, cell 2</td># n$ E# h9 c1 H) @0 a
<td>Row 4, cell 3</td>
7 P) T. S" v% j2 Q/ u  ]</tr>
. n3 x2 j2 a+ M8 O</table>! ~8 w! x& P3 T: n: x
<h2>一些隨意的表單</h2>& o( z8 a  Y% c" q" I: G/ \
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
6 ^$ c* r; B' \+ M9 O% z- O<form action="somescript.php" method="post">
% ~4 h. u! `/ Z: W" B. d<p>名字:</p># l9 Y1 C+ ~" B, E) Z6 ~
<p><input type="text" name="name" value="你的名字" /></p>
0 R# h. _/ s+ M+ K/ v<p>評論:</p>
7 Z; Q! L  P% e% `<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>/ n: V( T' u- Q
<p>你是:</p>: Z6 f) @. W4 E5 {* q4 n2 j
<p><input type="radio" name="areyou" value="male" /> 男性</p>& ~# R/ f- z: K/ h8 T4 Y
<p><input type="radio" name="areyou" value="female" /> 女性</p>
4 z" J# ^7 u( f" Y. V<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
/ R; g* _4 C/ C8 a$ G% v( u+ P<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>% A0 R' x9 L. h: X- h/ i; A1 D5 {
<p><input type="submit" /></p> <p><input type="reset" /></p>- ?7 E; z" ?& ^: f
</form>
$ N9 c7 y3 `- K0 R0 I</body>
7 B8 ?1 L4 k# ?% g. T; ]3 j: G</html> ! d4 t0 C/ c3 _4 V$ O

$ p: E3 [- P+ X就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
# ~/ T! h1 U! a0 g/ `7 C
+ ?9 ]) Z: @' W; N% U( Q, k, F" S- U感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-2-19 15:28

By DZ X3.5

小黑屋

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