过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
9 D+ k6 c5 P: T  H) Y, f5 _, S. v. a  x
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。; X) l7 M0 B2 P) L0 l
- y- ]4 d% n+ A
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
- g+ s! I2 ?4 `& M0 M( U# V7 T6 J3 K; J& D6 C# m
實際用在HTML中的標籤有form、 input、 textarea、 select和option。
4 C/ X1 W4 u- O; y
. q* V" D/ H; ^7 K, h2 }) O4 T表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。' \3 s/ T3 {2 ?7 g$ O0 i

+ y( B" ?. j0 R1 @/ P: p% K/ f可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。5 p' `% V. O9 p  |9 g; `
0 l; d6 ~. U6 u' A* W
所以一個表單元素看起來是這樣子的:6 O* o6 M- X& i

1 ~; F  `( h2 V$ i: f4 T. j
% V: w( C3 H* C3 u; R; T4 g$ R
2 R% S4 w5 `5 `( q  n Example Source Code [www.cn-webmaster.cn]0 T: R. z& V& |" I7 |
<form action="processingscript.php" method="post"> </form>5 S' T$ B8 ^0 l5 u9 S$ D
" j- E0 ^  j( k; |& E8 O; Y, R
input標籤是表單世界中的「老大」。有10種形式,概括如下:* P8 d/ R: z9 `$ [/ N) T3 q& Z

9 X3 B8 j7 G9 i& i; `! S2 q% H1 E■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 $ y$ k0 u" u' |9 O
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
" b5 b" {, O/ M4 ~3 Q* q: |+ `9 f■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
8 z1 l1 o! q! x# Q5 w■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。 # Q0 J  H, E4 l  N9 k1 ]2 ^
■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
6 x( M7 e. N3 o" o4 Y) [■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
+ U& k  S. h* {' i■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 $ }2 [! |- d# e
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 ( d) n, w( d# k7 [4 K
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 8 _) e/ {7 a6 A+ c7 `
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
! n! C% ~( |; [2 P注意輸入標籤input也是用「/>」自關閉的。# L5 J; I1 J" M9 |; Q& t

( s2 V' T: k" U. g多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
- k5 c3 N3 l. O+ {+ s
) c5 b. i8 s  Q* ?) x% z7 D6 [' o  u( S9 \. h2 C
Example Source Code [www.cn-webmaster.cn]0 l, c% B1 P. f# m& N. h7 V
<textarea rows="5" cols="20">A big load of text here</textarea>) X  M& g# i! o' ?# k0 j* m/ o, ^

- \5 m4 y4 d' S2 A: y選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:3 }9 R1 ]# z; V: Z# S8 X

" v5 M2 Y* J4 m0 c
2 k" I  @# w  s0 R Example Source Code [www.52css.com]% c; s! g: A7 h% Z# U' A
<select>, S( l! m6 T0 ^( j
<option value="first option">Option 1</option>
/ p7 u* ?4 o7 E" [$ Y<option value="second option">Option 2</option>( n2 [4 o( O1 n$ _3 k. f' V! M& B+ ^
<option value="third option">Option 3</option>$ g9 U$ Q: w2 {; S, h' n3 [
</select>
  S- x2 c2 d5 h8 z0 f6 P1 f0 W( y" b' ]: a1 J. _5 M, t
當表單被提交時,被選中選項的值將被發送。, R9 {6 ?/ A8 y" T0 w

! x* a4 P& q; u與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
8 L! ~* S8 C# y* D, e4 g: u& |
3 K' b& z+ f, ~( `) p! c上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。4 G  s; A% N/ ^  I+ C
$ Z9 ~. z. b4 X9 e3 x- p* K
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)5 J) [* ~. H3 B+ n' G! u" N. X( R
4 V- I) W3 k9 u: _3 v4 j
% N+ q/ l' {* g* x& A1 t
Example Source Code [www.cn-webmaster.cn]$ w% Y" e* C. k0 {6 S
<form action="contactus.php" method="post">
/ u! T: k0 L# c% z<p>Name:</p>! j! Q8 w9 D, |2 z. I
<p><input type="text" name="name" value="Your name" /></p>
; t0 S  O" F- D' S<p>Comments: </p>( h' n& T% O3 W) |- ~  d
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
/ x3 b/ m4 C" d5 M$ X. h<p>Are you:</p># X7 `. t1 I4 r  t( P
<p><input type="radio" name="areyou" value="male" /> Male</p>
( c* g6 ]1 F  Y" E<p><input type="radio" name="areyou" value="female" /> Female</p>
1 S- i, _, r) M+ Y6 l8 R# M4 v<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
( Y! M) o% i4 }% A<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>9 R, |! [: g6 A0 L2 E" m3 ?
<p><input type="submit" /></p> <p><input type="reset" /></p>
$ A" t3 B7 e1 I, d. o9 ^! ]# x0 Y, N</form>
8 e/ d. e/ P: j, P* q, t% a* c6 w6 V + _9 W4 i# a4 a) E3 r3 ^
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來% p- N9 i7 T7 n& k
. s( \9 g. u3 Z" S+ f$ I
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。6 b! m% v% A. z1 k  X

/ k; s3 f4 ~* @實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
7 z9 K5 ~" R; k# F* X  H8 l2 x& g/ T4 ^# x) `
下面的代碼把前面所教授的綜合在一起了:
, N& i3 z" F; K5 O1 }' E! d9 s9 y* e/ r& ^' a* W
0 i" _- z9 O- z

$ n3 \* V- i; |  f( O Example Source Code [www.cn-webmaster.cn]+ c" `+ m+ `& t0 n0 \9 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
0 M8 V0 P1 c% N: c- Z"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">8 K! V1 ~& q% P* F
<html>
7 `; V3 ^! C2 O1 X% h& D6 S<head>' F! l% L( f4 }) S$ ^
<title>我的第一個網頁</title>5 J4 O6 f* W0 K+ k; C  O' \
<!-- 順便說一下,這是註釋 -->
4 a) z2 x- R% }4 p' E  ?</head># P8 o9 q+ G- o# Z8 v
<body>+ Y1 b) U/ Q6 ?- s' Y
<h1>我的第一個網頁</h1>
3 l* t! v; K0 C0 k" Z5 G- K3 |  r<h2>這是什麼</h2>7 o' H2 j+ e0 E; K0 H7 k
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>, e% u% R! ]4 U9 @( m: \
<h2>目的</h2>
; v2 O! I# y+ u& }; q2 c<ul>
2 Q4 i- z6 n1 M; Q3 w<li>學習HTML</li>
& X9 t; t* j" Q" |% p5 i<li> 顯擺,炫耀
  P* O" f1 q) l. p+ u' O  <ol>
* d7 @# ]$ N: i5 E' p! o <li>向老闆</li>
+ Q/ X; @- ^* @; O <li>向朋友</li>% o7 Q( j* A! g
<li>向我的小貓</li>
% P$ b: H* a. q4 z* \! [/ r$ `( ~ <li>給我腦中多嘴的小鴨子</li>; x  u) k! L( Q' w; x
</ol></li>
/ h; _  C! b  r<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
$ A2 w, n: C# |, Y+ P. P</ul>
8 O! N' ^8 P! a& f, p<h2>在哪裡可以找到教程</h2>
+ B, [5 q1 _* L+ ?  q: H2 Z* F<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>; r. y  Q" G6 g  q2 w+ x/ i" @
<h2>一些隨意的表單</h2>( X- W: a$ s6 S! o3 ]
<table border="1">
9 q* J( V, F" A<tr>' {- g8 h0 s4 M. q0 `
<td>Row 1, cell 1</td>
- F( m( H% V2 b" T+ ~! o! P<td>Row 1, cell 2</td>. o) t3 r* G$ I, P5 p! p$ ^) v0 x
<td>Row 1, cell 3</td>
, e) {2 g) M; p: S</tr>
: f) M' w2 V. R' }! V; n<tr>
- g8 i) @3 x# n: J4 A5 ~8 M<td>Row 2, cell 1</td>- t2 l( C4 J! [) L5 j6 p. f. x- m
<td>Row 2, cell 2</td>2 u" u1 X6 E" Y. [' n5 `
<td>Row 2, cell 3</td>
' _3 h8 M+ f8 ^" w' ^! R* ~</tr>* P2 |& g0 [% V5 _
<tr>6 @9 `% H" ~7 D
<td>Row 3, cell 1</td>5 R6 }; ?( r) f+ X* e: n- B, r
<td>Row 3, cell 2</td>. h- y2 ]9 t" {# I3 V* {- d9 V6 n" D( n, G
<td>Row 3, cell 3</td>
, H& P2 ?* D" N; i9 g, D6 T8 L</tr>  U- u* R0 Y0 k
<tr>
2 h3 p8 h, @( ?+ q( R$ n<td>Row 4, cell 1</td>, J& S) K- i7 O9 t
<td>Row 4, cell 2</td>1 v3 t5 U& w: [3 y5 ?1 Y4 h! Q; n7 l8 |
<td>Row 4, cell 3</td>8 o' w9 t0 E! F2 M3 i
</tr>
. F! r/ F* U) W</table>; f; X9 _# R4 l# B
<h2>一些隨意的表單</h2>
, [  y; c* f% c<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
& A3 k! _+ R' U3 ]3 m<form action="somescript.php" method="post">
0 o. X; {# C4 j  w! n. n9 Q<p>名字:</p>
6 e9 \& @: Q. ]; @% y5 l" R<p><input type="text" name="name" value="你的名字" /></p>
7 ~! `  }- ~/ K  t, |) Z<p>評論:</p>
! g# [: h9 f& e<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>7 s" o3 e1 w' \3 }2 s
<p>你是:</p>' l& I/ @+ M, j$ v! ?2 c/ s
<p><input type="radio" name="areyou" value="male" /> 男性</p>' q+ w, z7 ]- ?
<p><input type="radio" name="areyou" value="female" /> 女性</p>
1 S! r% J3 s" B, E<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
( j) i2 D; {/ G( F& x1 @<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
' C1 `$ o( Q) c' s3 Y) z7 w0 o<p><input type="submit" /></p> <p><input type="reset" /></p>
4 R7 z4 v4 v; q  ^& H</form>5 d) {1 J6 ?# I$ p" W; U
</body>1 @# Y/ j: h& T3 Y
</html> " I& T$ O& p+ [9 S8 P

9 o. }3 ?  N6 |2 o/ F, s7 [就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!' j  e) U4 b* B- S

) Z. _! y5 [3 U/ t) S感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-1-14 21:09

By DZ X3.5

小黑屋

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