过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 " r3 J# R' y; `8 r2 K
/ j3 l1 q3 q/ L3 r* Z
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
. B. k1 v3 K/ f! i
* Y+ S$ q+ ^, P. o  ?! Q表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
; S6 k5 B: H4 m5 S# q. y" H" y: W; z8 I2 B
實際用在HTML中的標籤有form、 input、 textarea、 select和option。
% m! M* p* s4 @
' r- K5 c% e7 g7 O/ X2 s$ w& M$ ?表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。7 Q! @/ D& R2 |$ f; v3 o/ M

: k* k& m2 V; x0 m1 g3 Z可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
3 R5 C  ]3 C3 c3 q3 z; A  p$ s7 m3 |% J" ~) r
所以一個表單元素看起來是這樣子的:
- C: Q" X% g2 {! P$ C6 `- \0 u( P$ |6 f- I0 d$ E/ \# O$ |, L" e

3 R+ l! }0 [. j( E0 l* J/ D3 D4 b& \. Y8 M6 y" O
Example Source Code [www.cn-webmaster.cn]
6 N/ C7 ?7 H4 p<form action="processingscript.php" method="post"> </form>
3 \% l7 V% `6 u % J. K0 A: {9 g
input標籤是表單世界中的「老大」。有10種形式,概括如下:# i8 Y. w! B- V/ I8 w9 X' k# X
  a$ U, E0 @$ `: h0 J1 Y+ s
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
2 _5 Z8 f# C3 g- i  o2 ]7 b■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
# o9 s% y; X6 h& l■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
) f/ ^! w( m' M■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
% H2 j4 N1 C8 Y■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
5 D7 I! x8 r$ j4 j■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. $ k4 z8 }6 H9 o8 v0 S
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 / N  @1 @$ D! j/ x. J
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
4 r! a0 w$ l% E2 `1 h% b■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
  g5 a- e2 k% l' d; W! P/ w3 z  E■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 ( f8 B  `( l6 U4 ]2 C7 p. K
注意輸入標籤input也是用「/>」自關閉的。- Y- J3 y( Y+ h3 n
  k0 I% p! i- c  F
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:5 r; b; j) z( D! V% D+ A' l3 [
% R, ?( s3 D, w. t+ D8 q# Z
- l" ~$ E7 t' P. N1 k
Example Source Code [www.cn-webmaster.cn]
1 }* x" t9 n& M9 M- R3 S' r. b<textarea rows="5" cols="20">A big load of text here</textarea>& y: o' w8 Y5 Q" J

  X3 g; I& \- V選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
; `) l) ]4 G$ U
: f! h7 A' \  A" Z) I. q) D8 z; x  I/ _( ]9 V1 r; {; P' A4 ]
Example Source Code [www.52css.com]
+ r- [$ ^2 I( o' c<select>8 ~6 \$ D- m+ V; ]$ K0 \8 O
<option value="first option">Option 1</option>0 E" f" |% s/ A8 B
<option value="second option">Option 2</option>
. }3 {! i, j" A* [<option value="third option">Option 3</option>
5 O1 K7 v/ o: ]</select> : ~$ I  ^# d, B  N3 j& B5 {/ m

7 l; \2 w/ t$ i8 Z/ e" v5 u7 [* s當表單被提交時,被選中選項的值將被發送。
; v1 B* |# }1 t
% K. E8 r. F. s7 D與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。& J3 \( |5 h3 i) n3 z3 |% v
) z* [5 v  ?# z3 K: Q$ L' j
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。! f7 W# O% R3 w+ g4 T" M

4 t5 D% ~" a' Q. M一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)  H) j6 m, b3 J0 G; n) E& ]

. r" n3 l$ [, Y! \& o  b% n
: O7 c, O/ L4 [1 G Example Source Code [www.cn-webmaster.cn]/ V3 Q; v# ~+ L3 Y  E" T
<form action="contactus.php" method="post">
7 h& V1 P2 i! p: g2 c<p>Name:</p>% z# E8 g1 ]1 p+ N/ c; p3 N
<p><input type="text" name="name" value="Your name" /></p>
/ n# o6 A1 [% x1 h5 p<p>Comments: </p>
% N0 }  [8 {  s3 \" z9 ~<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
9 L& z1 w1 ^5 R( H; K<p>Are you:</p>
. `& Q) K1 D  a+ c2 V<p><input type="radio" name="areyou" value="male" /> Male</p>7 X, B0 @/ F' o' G
<p><input type="radio" name="areyou" value="female" /> Female</p>( h0 T1 _+ M) J0 D: [7 [4 X
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>* z" o. i: w7 v' r( F
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
' z1 Y6 k+ ~1 B& `, {. T<p><input type="submit" /></p> <p><input type="reset" /></p>
8 v. V6 o9 q) g+ ^* k' X! O</form>
- T, k* S. q8 A2 P
! z8 M: m4 Q; V/ R. M8 Y$ `5 k在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
9 Y  l2 J; _! t2 }( n
+ }% I+ T' M1 H9 F如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
7 F0 i' Y! U7 R. V& c
  d6 [' P% A7 ?  ?9 d7 q實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
8 j) Z$ ~, ]' f0 ~- [% g1 s
1 n0 R2 j( V7 t. L# u% Q* |! L下面的代碼把前面所教授的綜合在一起了:
1 l4 q- N0 A- F3 X* n7 X) U; B1 S8 ^9 k3 v7 w

5 l0 q$ F1 K7 ?9 N0 O3 i; F0 b! C8 Y; K
Example Source Code [www.cn-webmaster.cn]
( e) {& K( B( l. X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
% u* s' m& k* m5 Z3 t' _"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">& W3 e, R0 P- F  X6 w5 N) `
<html>
% q" p, x8 J5 B/ N/ C% |<head>+ K  p; O+ x5 }
<title>我的第一個網頁</title>
$ ~1 r& d/ V/ ~<!-- 順便說一下,這是註釋 -->
' U, X9 k' V) j& L0 B1 h( k</head>
% d! N6 ^& u: f! G<body>' U: U" B/ p. [9 k
<h1>我的第一個網頁</h1>
. T  v3 Q  |6 p<h2>這是什麼</h2>
: h2 h% P* C4 J# \<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>1 A4 F0 X! l& L
<h2>目的</h2>) Z2 @! n2 R0 |$ y; b% W4 i. \
<ul>
2 }- ?: i6 M1 n9 H<li>學習HTML</li>% C8 u# E; j6 k% Z3 M+ a0 L1 d
<li> 顯擺,炫耀
& n' E, d, r5 C  <ol>$ x8 [' Z4 Q" M* F8 t2 y/ C
<li>向老闆</li>1 k  l$ [3 d) v' Z( S
<li>向朋友</li>
- P( r9 b: U7 F <li>向我的小貓</li>
* }6 m( c- ]3 O, \+ L3 k7 t) E <li>給我腦中多嘴的小鴨子</li>. [  L' U# @6 Z8 k0 p, N* w1 E1 i
</ol></li>
+ s' G% G4 y* s; k$ u! z$ b0 G<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>0 z& n3 k: v3 |* s0 }8 B
</ul>
& _4 I2 Q" w9 w( s/ J7 @7 c<h2>在哪裡可以找到教程</h2>
2 K8 {: Z* c0 g& T& y. [<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>
& v/ v! @1 I. k<h2>一些隨意的表單</h2>) q8 x8 V8 @5 `5 @) f1 U
<table border="1">
$ W5 s% u: d: h3 M<tr>* t1 V: a0 V$ p+ I1 V# ?! b
<td>Row 1, cell 1</td>
* q- _2 d! h' x: s5 ^# w, [! j* ]# w<td>Row 1, cell 2</td>
4 ~: T0 B/ w* M7 k5 A* g<td>Row 1, cell 3</td>
0 j3 x- K( T6 u- B</tr>5 g# V- a* @- Q- [* _' {
<tr>$ o1 x- e4 W9 x' o; j- W: S
<td>Row 2, cell 1</td>
* m" ?8 p& y" J8 I" M* ]: a# j<td>Row 2, cell 2</td>5 f2 V7 y  o5 n+ T- J
<td>Row 2, cell 3</td>7 f: V6 B1 @9 r' ]
</tr>
( _* ~7 S7 w8 T1 J5 n8 ^<tr>
6 T) E- l5 h& [6 T; b. f# J<td>Row 3, cell 1</td>/ @. A1 i1 s" I- [0 V! U
<td>Row 3, cell 2</td>
  d$ `$ |5 ~) t; F4 O7 s<td>Row 3, cell 3</td>5 `$ }( E7 h# j- ?' O
</tr>5 I$ f0 l) V) n8 t/ _' T
<tr>/ m. m+ Z( a6 A& Z
<td>Row 4, cell 1</td>
5 j0 h# L# B6 f& M- v& D! ?<td>Row 4, cell 2</td>9 T6 l8 Z5 x" @. s( X8 x
<td>Row 4, cell 3</td>* f: |" _, `/ ~; {. [7 H" [9 J7 }
</tr>
7 Y" J' _5 A4 N3 P% N& A0 q</table>
+ j+ O, r$ U7 n2 N2 l<h2>一些隨意的表單</h2>
% N- P- ~* C$ o6 d0 a' @<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
' I4 t7 y7 R  ]2 |<form action="somescript.php" method="post">
2 U# T& _5 R5 B6 y<p>名字:</p>
) ]0 E. \! \1 B# p$ E4 z" S<p><input type="text" name="name" value="你的名字" /></p>* v  ~( [; U# l8 u
<p>評論:</p>0 C6 z6 `! g* F: H" }3 L% l  d
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
  |  g8 T1 p' R. v2 J* d$ N( v7 d<p>你是:</p>4 X* ?0 o/ o1 R% ^9 J
<p><input type="radio" name="areyou" value="male" /> 男性</p>+ Y4 ?8 J6 D/ T$ W  q9 g! x( S
<p><input type="radio" name="areyou" value="female" /> 女性</p>8 _( ?$ w: ?" W/ y) J
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>5 p3 A& H1 J4 d5 T2 u1 p
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
/ [7 N0 X. }; U<p><input type="submit" /></p> <p><input type="reset" /></p>
2 F" ?1 {1 O+ B</form>
7 l/ I1 Y( Z0 ^9 p1 N& y</body>- y" \$ _; r  o
</html> ; o: X) m% O' X5 y7 S4 U
; I. M2 K! _& c1 ]# L% C7 H. q) S3 N
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!; s8 x+ m7 E! T" a( a2 I
; L& f" c# }$ ?9 z7 R: [  ^" Z, z
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-1-26 14:33

By DZ X3.5

小黑屋

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