过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
6 _: R5 r$ s4 c! M! r5 r  }2 @. g* X* m! F
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
9 c+ E1 V6 ~2 H% ?; S3 w1 q. P- i8 I; ^& R7 J% t  l" n
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。/ X' E! Y4 h0 u% h" l% y3 }
( w, x8 P' E0 m0 o/ v
實際用在HTML中的標籤有form、 input、 textarea、 select和option。
2 g$ w8 H  G$ _- {* B' @9 e0 d2 u* a5 w! k2 i5 N. `* ]
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
% A8 f9 z7 U1 j& L7 t* I( ]9 a* G: X: h& h) p* @
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
* V" [  N; a# M" q
- Y; g1 T, }( B, t* |; f8 v所以一個表單元素看起來是這樣子的:
3 J) j* ?. |: y3 a& g1 p2 X' [3 O; `2 t7 T

$ z" q! R: i. l) K; _4 K0 g: E: q/ Y4 M
Example Source Code [www.cn-webmaster.cn]
9 i& f/ B% i$ n0 u8 k/ R<form action="processingscript.php" method="post"> </form>
+ K3 M: @# E* X6 s % x1 I' B1 P) G5 @1 Z; K' ^
input標籤是表單世界中的「老大」。有10種形式,概括如下:
* l; U$ X* w/ y
0 X- Q( G" A9 }9 ~■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 4 G8 G" _2 E7 l: m5 T, K: i8 d
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
4 T5 P& C* v# ?- [6 Y* v■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
& Y; Y: [+ E. W3 x+ J■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
# ]* F. }. g* c" R  F5 L6 ]! }■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
( b$ Z7 N! w$ ^9 w7 B* x1 f■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. ( x+ W! C2 V) V3 z, t" H; Z
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 : s$ X) Q" y( o! x( |( x
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
- i$ C" e9 T5 v8 D" h■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
2 z) r. w+ C5 z& \* A+ f/ I3 ~6 a: P■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 ( V; g! |6 B. ]( M! E# V6 i: P
注意輸入標籤input也是用「/>」自關閉的。' c; ]7 s9 [- y5 |5 b  q
8 W3 [+ _) O- M# b* X* v: @3 C
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:% x6 w# U* y2 n5 P) V4 [( p
6 d3 L9 ]# a. P" U

' ^! x/ L7 t2 [7 I4 A5 D" ?' ^4 x Example Source Code [www.cn-webmaster.cn]
! {/ y+ J6 g  \) p, k& k8 \<textarea rows="5" cols="20">A big load of text here</textarea>8 b& T8 G$ j8 p0 g( {. x

1 O5 V5 s) H4 x選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
9 e2 ~8 @0 m  G3 g
- D6 w; x3 R  P
0 b9 Q/ P% \9 {% k8 ~$ [ Example Source Code [www.52css.com]% m- E& ^5 V5 B5 Z0 d& Q% T6 U% Q
<select>/ q2 j- \4 b+ o, p
<option value="first option">Option 1</option>* A7 |( z' {1 N1 f7 K0 F6 X( [
<option value="second option">Option 2</option>! r7 f; Y2 \# [' f9 z" b
<option value="third option">Option 3</option>' n8 t  g+ P. l2 q
</select> * v- C$ r# G3 l7 \4 Z  Y. O4 K) s

. [. l2 y+ p; R% U  K# ^3 N( V  H當表單被提交時,被選中選項的值將被發送。
0 W- B7 B9 Y" Y9 E$ F  D& z4 j. }+ g) X& \
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。- T8 w& b/ Y+ `+ {% L$ b
; P; p3 Q$ V5 x  g9 y3 z; j: o& o8 x
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
% g5 _1 A0 ~& z) K- \( G% a. c/ y8 c- e1 b, J4 v* c
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)$ j. u% ~& c6 D) l- `& \
0 d" u' z( b. g$ k- \% E

2 [; e, M9 c" J: e5 _ Example Source Code [www.cn-webmaster.cn]1 B6 V2 L& T3 J, u; [% w
<form action="contactus.php" method="post">, e7 Q# G2 l6 I2 a) q" O' E5 K
<p>Name:</p>
) R3 ?! j! R$ v+ O5 f9 v) n<p><input type="text" name="name" value="Your name" /></p>8 a& D: n1 A0 u5 W; N; C$ s
<p>Comments: </p>* Y' ]5 y0 ]1 L* C# }1 n" q- l
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
2 U4 F" {" P0 q6 _2 S- _; v7 M<p>Are you:</p>
0 ^0 A" n7 m8 F0 Z- }: r' q' v<p><input type="radio" name="areyou" value="male" /> Male</p>
0 t- H0 L- q" b: }( A<p><input type="radio" name="areyou" value="female" /> Female</p>, ^; ]* N& T6 v0 p; S
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
7 V; Z% H" d. Z0 S# C$ L2 e3 y<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
. A! x# B- Q$ E0 k! U- v<p><input type="submit" /></p> <p><input type="reset" /></p>- L% s/ ?6 ?; Q6 c7 c6 J' X
</form>
' B2 d5 M/ F) @$ B8 e- p/ u 9 I4 v' {+ [& Q9 f( K% t
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
  x+ o; \2 H( F7 t  E: F8 s9 M& [) L/ D
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。8 Z% P) v; `9 D4 ]: Q

: ^5 l# G1 V- p7 Z9 d" w實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。* ?5 P* t4 _! N+ H! `. K  H" S

5 }# H& n8 I- S下面的代碼把前面所教授的綜合在一起了:
) L; s. W3 q# y1 T
# g5 U" A( m$ C7 B8 X) w  ^) ~% z: ~# C% Z. y

, Z% l1 x) h" [$ v. i Example Source Code [www.cn-webmaster.cn]3 \+ \4 W$ m9 \! K% t; y1 p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
: {% {4 }. T. H( L( w: u"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' _0 ?% F! W& m7 J; p
<html>0 G/ Y" q7 J/ ]" K: r
<head>
# ~% j3 d% t" V<title>我的第一個網頁</title>% X! B9 v7 U! z* R: z, e
<!-- 順便說一下,這是註釋 -->8 y. G0 m( ]$ t( i! `
</head>: y  I& M& e/ N! X1 k
<body>( b& p$ ~' Q" p! F; X+ s) h  M* M
<h1>我的第一個網頁</h1>& v* f4 Z; w3 l  q# U6 h; @) ]
<h2>這是什麼</h2>0 ~; }# R8 Y3 b& w# X2 o/ v
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
1 |# ^) w! ?1 R/ g5 P: B<h2>目的</h2>' {) W4 t4 L6 _( i: [
<ul>+ x4 |! ^1 S( _8 B( s" |5 s  G4 \
<li>學習HTML</li>
$ |4 g. G3 ~% x; \" M- ]<li> 顯擺,炫耀 . e$ z- F" f$ q0 D8 M
  <ol>
" o' G4 V! J6 u/ v <li>向老闆</li>
! E  t1 c+ y! H' X7 x' I! P$ e$ { <li>向朋友</li>4 T$ c$ C) ?2 v
<li>向我的小貓</li>( n, V4 k# g$ Z) ]3 X5 f( k+ F
<li>給我腦中多嘴的小鴨子</li>! v% C2 [+ _! i* D! e/ o, H* O
</ol></li>5 V+ g+ Z( L; `8 x/ x: E
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>( S9 p" l- y. T+ G* s
</ul>1 S/ Q3 H, a' W8 u  T7 G. J
<h2>在哪裡可以找到教程</h2>
* B; [  u! Y+ t8 @, _! l/ 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>
/ O% N3 F" q- M, b2 L<h2>一些隨意的表單</h2>6 u* O3 O1 O& M
<table border="1">
" {( b0 {5 \' f- z! |2 C( Q- u<tr>
9 }3 k0 `' C* x7 Y% T0 E, q, H<td>Row 1, cell 1</td>9 n& M6 [) B) V( z% i/ w# A+ \. v3 E
<td>Row 1, cell 2</td>
( [( {8 E3 \( F9 G, e/ P3 C0 t<td>Row 1, cell 3</td>
* k; F/ o* w- i: t9 n. f( H</tr>( S8 o9 q; W8 n) r2 }7 a( ~
<tr>1 J* s' V$ k( H9 U, |3 T
<td>Row 2, cell 1</td>
: M9 P& X& R9 s- T; ?' j3 `* x4 N. V1 H<td>Row 2, cell 2</td>
; ^. f/ s+ w8 w3 n<td>Row 2, cell 3</td>
- u. z5 j% O7 }4 [" l! b' X( d* e</tr>! g3 f/ j. f/ F
<tr>. }# f- y7 \% @' p/ E5 r) x8 B' u
<td>Row 3, cell 1</td>
2 p- Q/ J5 @+ ]0 _; U<td>Row 3, cell 2</td>, Q8 x, j' {* z
<td>Row 3, cell 3</td>. Q4 x* j0 C9 s
</tr>
% O  \0 U, \5 G# ^8 H6 Q1 M- D+ g<tr>
+ k% @. Q% J3 L; d' {<td>Row 4, cell 1</td>$ V$ L' V$ s- S) i! U3 k
<td>Row 4, cell 2</td>2 P4 p& o; A: \. \, {" d
<td>Row 4, cell 3</td>
5 l" [2 v7 D; |0 F% A$ F</tr>( _6 ?2 }: n, f6 k, c6 I
</table>& I3 j4 ]# A6 G3 c, S" F7 P
<h2>一些隨意的表單</h2>2 O/ Y4 Q5 Z1 s6 G% L5 A9 E
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
* p$ K& y& \/ [! u! y7 x- G. V6 c<form action="somescript.php" method="post">6 m6 P. Q% M: w7 W+ y( [3 X+ T
<p>名字:</p>
. O5 g0 x- q( M, [# `7 ?- m1 y<p><input type="text" name="name" value="你的名字" /></p>
$ g5 Y: h- Z. S6 L" y3 g<p>評論:</p>( T  M: I: h$ Y8 Y' P
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>0 E( Y/ m; [# o* L* V9 t
<p>你是:</p>$ P( B! G% _3 C- l5 B
<p><input type="radio" name="areyou" value="male" /> 男性</p>% c& P& ?# d; q- ]  U) ~, ~
<p><input type="radio" name="areyou" value="female" /> 女性</p>
0 e3 Q) u: d4 Z, d% c' }  ^<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
% d8 S) O; P' |" S  i<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
4 V9 g: E* f( F4 j<p><input type="submit" /></p> <p><input type="reset" /></p>
% K6 e5 k# a7 B8 c) t. E; U</form>
0 }+ M$ d; W. l! [</body>/ k0 y- W% a6 W1 m% P9 s* b
</html>
- Y0 o4 Z5 v" X* p9 U
2 I# R, F) ]/ H就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
9 E/ Y: i( ?( d% M- ]; V" p# f3 R( M" k+ m" X$ ]8 u7 ]
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-2-2 16:56

By DZ X3.5

小黑屋

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