过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 0 D1 O. a0 S! s* U1 C7 _. A/ h" W

6 U; B6 J; U0 b6 O表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。' [: T6 P8 |/ Y: u9 v8 T

- z1 @* A8 }6 N) m. j5 U" r表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。8 l% ]7 [  C5 x  E/ C

5 u* s* ^) A4 L' U實際用在HTML中的標籤有form、 input、 textarea、 select和option。
  h% O- x% o- I) _9 i: m
1 Y2 J6 z, f3 A9 {$ T2 {8 ~表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
$ `* z0 W" h2 h; f& n5 N& }0 }
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。  z, m+ U) _! k
) }" c" r) G( k. s2 }
所以一個表單元素看起來是這樣子的:
! h) T* F/ i3 I- ]2 I
4 X; }; c0 A* C- Q% t; U  |. t% N& }& _- Y

$ A' [3 ?5 W& l- b Example Source Code [www.cn-webmaster.cn]
% U! G& v+ D0 B8 a: t) L6 V  D<form action="processingscript.php" method="post"> </form>; E; w7 J; P  Y1 V- z

, m! [) w9 [4 K0 q; {7 Rinput標籤是表單世界中的「老大」。有10種形式,概括如下:7 W2 d/ b6 b2 ?3 y
$ n+ U$ O( }1 q) p, e& }& E2 n& |
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
# G+ o: B, ?# E# G9 p& ^/ H6 R■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
7 a4 }$ F+ I- L9 o& z% c' W" J■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
; @: \) L) D2 O* R1 H6 @■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
3 {7 g$ d. @9 t  ]; T■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 # j) x6 [% y7 a* y9 M; a' b* }
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
# w* A! \3 {; @" W■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 . Z% T0 ?# }0 }" M& `
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
5 Z) ]9 @# q. I1 g■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 ) C; G! C8 o% g4 l. T
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
: M6 S. y( [, @  z& [/ \3 S注意輸入標籤input也是用「/>」自關閉的。
0 D3 L2 l1 [' t7 k; V" E! u( L+ Z8 ^6 `
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
1 K4 B$ d2 Y2 b$ A9 F$ F2 k8 u. |0 r4 j0 n! ]

1 _9 D7 W8 b+ f" D1 D- p" j Example Source Code [www.cn-webmaster.cn], \0 a% _. c/ f( a, b% c1 m
<textarea rows="5" cols="20">A big load of text here</textarea>
9 o+ ~  ?7 z. `/ c7 m: o3 h
! R+ c* Z4 m5 J選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
( Z! R( |; V0 b. W0 u& C4 C, G, O3 c
9 V  B( T# n" [- v. {: D6 m& k! _2 \
Example Source Code [www.52css.com]
+ P& ~1 U9 O. W2 b' A8 ]' [<select>
- J8 d" e5 I/ \1 ^8 _5 j<option value="first option">Option 1</option>, f' Y! U+ |1 X3 U0 v' o/ L
<option value="second option">Option 2</option>
# J% w9 \* L3 z# k<option value="third option">Option 3</option>1 W- Z7 _, d4 S3 S
</select>
" K0 a" i, |0 M, V
- C4 V+ B, @( ~, ~- P當表單被提交時,被選中選項的值將被發送。
: g1 S1 p8 T% B3 O4 U5 ~' ^" g/ Z' R) s/ `
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
5 J8 ^; B& j9 f$ d9 f: f8 c& k9 G
$ Z- _( n& U- q0 x3 ?& p) x上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。: y# y0 s; F4 T! Y! G. p- ?2 ~# _
% Y6 R7 l' p4 M( n+ X2 e' J( U$ K
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)* o. `5 w( C; Z5 S

/ }: y6 e8 ^9 J- a# v; B! t5 t4 g# t4 q: V9 K# G8 j' c; _
Example Source Code [www.cn-webmaster.cn]& e/ N0 r+ @$ I. A
<form action="contactus.php" method="post">
6 `0 R5 d$ t8 d; M( D: h<p>Name:</p>
" y5 ~/ G) L) \" S/ ]2 O<p><input type="text" name="name" value="Your name" /></p>
9 y1 }1 X& p6 A3 D" q  k" q<p>Comments: </p>: `. X% m1 r, l, U$ \: S% c
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
; A0 X) e. ]& c9 M# z<p>Are you:</p>. a1 {+ @; e; ]) W
<p><input type="radio" name="areyou" value="male" /> Male</p>7 q4 q6 w/ _& ^# b8 O( Y
<p><input type="radio" name="areyou" value="female" /> Female</p>9 \  R% k8 n4 H9 x8 f
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
8 E7 p4 U2 T7 B0 Y) T<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>  `  O1 c5 H$ T
<p><input type="submit" /></p> <p><input type="reset" /></p>3 N; m) F; L5 k3 D  C; N  ^' ~
</form>
' ?+ o+ h9 D4 J- i7 x7 g . A$ @* U+ ~$ r0 G! E& h# h
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來& W+ ~+ y3 }8 U$ t* k
5 w, R: ]2 Q; W0 A0 P
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。1 _4 V- U9 U0 z) C% u
- a/ o& g% j' _: O  t  y
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。1 v* Z. s9 Y9 @; f  C7 K2 N
8 |5 _) T$ I  ]% k: ~
下面的代碼把前面所教授的綜合在一起了:
$ J! f% y0 |5 U/ T4 m8 Z& O# d! A% U0 ]" Z& M- y/ ?4 P

, c7 D# ]7 @2 z- b" }! Y8 {* p5 Q3 a* Q' c
Example Source Code [www.cn-webmaster.cn]4 I( m$ E9 N9 T: p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 e4 v! F; Q$ t
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
& i8 P# E7 _  ^+ w  x<html>
3 y& W; z$ ?3 Z, S+ o<head>2 M. H7 X6 j: T( l: M9 P2 F
<title>我的第一個網頁</title>
) X7 o1 L; B8 C/ p6 ~1 R) B% D7 G<!-- 順便說一下,這是註釋 -->0 D. _$ r  C* S
</head># z/ ]/ q& n( f6 F3 H+ [0 s
<body>6 a! E! P3 h2 j/ z# J1 l
<h1>我的第一個網頁</h1>
  G' r8 K7 Y; C: z1 u<h2>這是什麼</h2>
! D7 ~- x9 u0 p+ J<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>& g6 I: y6 K2 E) g6 w
<h2>目的</h2>
4 X  a2 A. B: L* A* @) _1 x<ul>
, {* h6 u0 J% J( f<li>學習HTML</li>
5 a: @; Y% F  A' W<li> 顯擺,炫耀
; o1 G' y/ k: K  O& D8 @  <ol>; U& N1 ]4 D$ N; m- [$ b6 h1 l
<li>向老闆</li>4 i9 N5 X. _" `) V- ^; E: {
<li>向朋友</li>: S3 s1 {- |6 q' `. \" ~  H
<li>向我的小貓</li>2 N' H3 k2 W8 y- @% D: A
<li>給我腦中多嘴的小鴨子</li>
1 u$ H' Y' C7 i- i  d7 B8 L# W- G( W </ol></li>
8 _# ]" c* [/ A, c, b3 f, P) p+ g6 D<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
- f# ?/ _3 a5 ]* q. s</ul>( j% Z, g0 P* C
<h2>在哪裡可以找到教程</h2>
- Z) A* H. L* M<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>' ]( M1 H& s$ h+ X/ t; a4 d$ h$ Q" d
<h2>一些隨意的表單</h2>, |* y! [# Z4 V9 q2 x! P) J
<table border="1">8 |" V8 R  Y" `5 t! z/ u* c. D
<tr>8 x4 o9 B' r1 z# ]; m6 K; t, h
<td>Row 1, cell 1</td>
3 u: Z; Q6 `9 b, F: v3 q<td>Row 1, cell 2</td>  N5 W. Z! O0 w" D5 {
<td>Row 1, cell 3</td>; A- J% `+ F& w
</tr>
# |! Z( F0 u% S1 M, l<tr>6 M/ D2 h( o5 N" U9 G* X
<td>Row 2, cell 1</td>- F. I: p/ G. n. W  _, ]
<td>Row 2, cell 2</td>
- p/ S( k' x* N* p) h! V' M<td>Row 2, cell 3</td>, M( p/ K/ V+ n. a
</tr>, ]; L! d* e' @3 z+ X
<tr>" _; i, g" H5 m( I3 ~: `/ [
<td>Row 3, cell 1</td>; q8 g0 g5 v7 y+ a0 r' [. `
<td>Row 3, cell 2</td>
. r% p% a, d7 L, w  `+ B9 W<td>Row 3, cell 3</td>
/ n/ a: u/ ?. h</tr>" [( M8 G9 j. _
<tr>
$ |  W7 U9 h: l% b8 {% {0 |8 |<td>Row 4, cell 1</td>7 j3 G. i4 ?1 g( b& `  O0 o
<td>Row 4, cell 2</td>/ O8 ^1 L! s5 \) d
<td>Row 4, cell 3</td>6 e* c" D( g: J( b
</tr>, e2 |9 B  z$ O1 {' Q  K: S
</table>& R" E- I+ |- H* m
<h2>一些隨意的表單</h2>
1 h  Y+ W# |) V5 `+ J5 R<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>: f+ Z: l* Y: b6 n  P
<form action="somescript.php" method="post">
, R- i' y; [) w- X<p>名字:</p>' {" @$ A/ L6 r) F3 W* e+ T
<p><input type="text" name="name" value="你的名字" /></p>
- O- i3 o1 w$ t% M<p>評論:</p>+ O  L6 L5 {0 {4 Q5 K  q
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>- I* _9 R! v9 m+ i3 ?
<p>你是:</p>
6 i. s. H$ g5 R$ u) s<p><input type="radio" name="areyou" value="male" /> 男性</p>
0 ^* V6 B. ]! b! v/ i<p><input type="radio" name="areyou" value="female" /> 女性</p>
! i9 ?" t, H$ }- i$ V, w& b  C' f<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>4 j" q3 L# M) W6 u1 k+ y; `3 q
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>/ O& \+ }5 `4 y* a
<p><input type="submit" /></p> <p><input type="reset" /></p>
4 M9 N: B  e7 O4 W  [</form>
8 p$ y  G# `% p0 b, J0 t( Q  a2 y</body>  B, y. F6 e" w* z0 M
</html> 4 P9 J$ f) [2 G+ z

% }  o% K9 x! n  i$ O就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
# F8 f0 G, Y) j$ X* Z# A% O7 o* M& x2 \2 _1 |2 ]
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-3-11 23:09

By DZ X3.5

小黑屋

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