过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
. ?! ~: O: p" h0 M( z3 q2 W: K9 ^8 I; v- N9 W+ D
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。/ W: r( y- b& X

' W- |. t" s" h3 |3 A( j表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
% t( c- X0 \! b  g( A# J- X/ A
- {& `" E! H+ r0 |實際用在HTML中的標籤有form、 input、 textarea、 select和option。
* `( {0 m. E3 w. [, @* l* h* H- e$ o) a+ B4 }: g+ s. Y
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
) q# s3 }8 X/ o( v1 {
4 M  T) f. o8 J4 R/ c可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
6 [4 a) u3 [8 L2 ?! k  j1 K/ m/ T
) t2 \# K9 N. C. @+ g2 D所以一個表單元素看起來是這樣子的:
* t3 B$ {+ l/ x( |) a; y/ }( O( m) d3 e& T* \4 P3 D3 t
; c/ {/ o8 g* H
( x" @5 j- q1 l* W$ x
Example Source Code [www.cn-webmaster.cn]  h5 A7 A# J& ~1 B2 }2 U, h. [
<form action="processingscript.php" method="post"> </form>* J% {6 d" `* T2 v( b

, H- o$ v8 L6 ?* e. |input標籤是表單世界中的「老大」。有10種形式,概括如下:1 u# h( I5 ?1 o$ x
9 }) U4 @9 P: f1 h
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
2 B" s* f$ F% R% g3 G, _0 T- S■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
: Z/ S( P5 o. ?* F+ \■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
; s2 x  H+ ]3 b( S3 Z* U■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
, Q4 F+ W* a8 I& n! b■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
+ I" \( v9 A, C" T, V4 ~■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.   C; N9 ~8 K0 t' E3 W1 T: Z
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
5 D. k- z& d9 p. @■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
  l- t9 x* c2 R, K( p$ Z■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 1 V( D, J% ?( c6 a* {
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 / H+ x& f/ M: {$ |+ E6 t  ?8 x3 p
注意輸入標籤input也是用「/>」自關閉的。
8 z$ c# ^  F+ K" U  ?9 {
! g1 _  V4 o& t多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
- X! G6 m2 Y- N! ?0 w0 R
$ w2 V: |! I$ l8 x) T, w; I) D% R8 J! p" Z2 ~+ D6 x# ]8 R
Example Source Code [www.cn-webmaster.cn]
- B- p' m- a9 L0 m6 [- U<textarea rows="5" cols="20">A big load of text here</textarea>
$ r+ E. K+ V% F% [. b3 x. h
* ^) d0 k* `+ d0 n選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
" J% r6 v* `; L: e3 N8 l/ @: M" c% I- k( M, z4 N! q4 Z. M

* b- u4 |) j) j1 y Example Source Code [www.52css.com]
  u  p. Q9 ^: ^& j& e<select>
+ X  o6 I; \' T; s9 g; `; c<option value="first option">Option 1</option>; W/ B& u3 ~/ S
<option value="second option">Option 2</option>3 O/ |5 i# s4 O# U
<option value="third option">Option 3</option>' _( N$ k3 B9 E; Z; k- ^
</select> & W, W% c. o0 \6 W# j
% W. U; T4 z/ m) i4 k! s
當表單被提交時,被選中選項的值將被發送。4 z  b, w! w) Q3 R

2 V& }. F" y: S4 ?6 |與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
' J0 M; P; K- O. K
# K& }8 t0 u1 {7 I5 }上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。+ S/ A0 S: T, O& T

  a4 W  D$ L/ r% R  s5 u8 _: n9 O7 Z一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)! `+ o; ^6 K1 q- _$ z
3 F& h! L( B5 }9 N' J$ ~

6 _! P5 m) s- K  s6 e; B- n Example Source Code [www.cn-webmaster.cn]
6 D4 P& d2 Z' @6 J3 U; }, k<form action="contactus.php" method="post">
+ R; X) @! p" y0 @2 @1 D. X. u<p>Name:</p>* E/ ?$ ?2 _) }4 j7 N9 ^
<p><input type="text" name="name" value="Your name" /></p>& Z. I7 K# p# c1 R7 t
<p>Comments: </p>
- q# j. w3 D: [& |; p4 z  m<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
$ ^9 C& {# K+ \2 D7 l' k6 s2 t- g<p>Are you:</p>; k" y5 s* m. S; o2 ]4 T7 m
<p><input type="radio" name="areyou" value="male" /> Male</p>+ D/ {6 }8 d5 o5 s$ K7 m
<p><input type="radio" name="areyou" value="female" /> Female</p>
" D, u/ J& Y6 I/ L7 b9 C1 x<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>! v9 I3 a. F  Y! E* ~( x3 U
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
4 h! u* I8 S4 _) i* W8 d2 P<p><input type="submit" /></p> <p><input type="reset" /></p>/ f% j! ?; t# o/ ^& o+ P
</form>
) j- D6 ]5 ^. |- z) |6 o. |, C0 l1 E0 [
) G7 Q$ s. f: b* ^# x在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來: R% L, @( F& u9 a" S
! D! d! G' M$ n+ `
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。3 z% [( O8 M& V/ @, w( @

! f$ ^8 G2 q' A( A8 I實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。( I+ d  M9 j" Y! I) y6 ]

0 P( {* O) X! H6 d2 l. O3 `' m下面的代碼把前面所教授的綜合在一起了:
' d/ R. j9 h5 R& h: o0 j) e3 m- G& }4 V, C% D
( r1 @1 b1 I1 j" I

! j  i7 P: V2 u$ ~ Example Source Code [www.cn-webmaster.cn]9 U4 `9 I. D: O% c# a* m* s& p' ]" N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ) _9 g" y. s& ?  q
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">8 Y2 d6 v5 Q; l! V: t& ^
<html>1 S4 \% _0 H% U) c
<head>0 p, W- l) v- H0 s' K  d
<title>我的第一個網頁</title>7 c) l5 d8 B3 p6 i* C
<!-- 順便說一下,這是註釋 -->
5 W9 x) `  p7 D  `3 L8 T1 W</head>
9 K" x+ u8 [" C! k7 a6 d' L<body>
9 L9 f! |% b3 N& j0 W<h1>我的第一個網頁</h1>
4 Z: }0 p0 @: c; }2 ]% K<h2>這是什麼</h2>* t+ ~% x9 G, [. k
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>/ [9 V9 e, h  F5 D8 n
<h2>目的</h2>
1 H* V8 e$ B: p<ul>* Z& L2 ?) _+ _) `+ |( P4 z
<li>學習HTML</li>
( E% t1 p+ F2 G& B+ r<li> 顯擺,炫耀
  B' N2 K$ m( u5 y2 E" o  <ol>; a/ q1 D  G$ a
<li>向老闆</li>
% J$ c* q. Z/ A; a. Z/ E3 q8 L <li>向朋友</li>" O. d! e  K7 e7 K0 d7 [
<li>向我的小貓</li>: a+ q" N* }  |: J' o6 O! f+ P! C- a9 [
<li>給我腦中多嘴的小鴨子</li>
6 ~: P8 ^0 ?5 d" x& F0 A </ol></li>
2 o" b1 `/ p1 {) ?/ _9 i<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
8 L* f! S; a: z9 s. r- {</ul>
9 ]1 X: L- V' N& \<h2>在哪裡可以找到教程</h2>
3 n" i. I2 z9 f4 Y3 R' P<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  A  u6 d) w! T9 O
<h2>一些隨意的表單</h2>
6 s1 I6 ^/ L2 G<table border="1">/ O, Q# k0 k6 F# _
<tr>/ n! l$ ~* j3 E
<td>Row 1, cell 1</td>
6 g/ v. H8 r' B( U8 Z- v. r4 a7 q<td>Row 1, cell 2</td>/ w8 n5 l2 ]% O) x
<td>Row 1, cell 3</td>& ~# r' y" m  x5 O5 H- I
</tr>
( t# S/ @9 v  l$ y, \<tr>7 }2 f$ M  ?: k/ j% }9 V) ?
<td>Row 2, cell 1</td>* u+ B% f$ {: E& Z, P9 h! i
<td>Row 2, cell 2</td>
6 s0 U2 _2 L" Y<td>Row 2, cell 3</td>( d! p4 d9 }( n
</tr>' C8 F$ e% }. \
<tr>
0 ^4 L9 z; r" F- s<td>Row 3, cell 1</td>
2 m, K, u0 L. _4 a, F0 z<td>Row 3, cell 2</td>
# W! L9 A8 L! D# ^3 z+ I- ]' n<td>Row 3, cell 3</td>" N4 R7 c4 V5 x, @+ q, r
</tr>! S1 N" P% r- d/ ?& N# z/ o
<tr>6 m% v6 ^4 u+ ?  l8 M
<td>Row 4, cell 1</td># ~- v6 _( v% ]; q" ?3 Q3 Z3 C
<td>Row 4, cell 2</td>
$ h0 P# L, K6 b' b9 S/ b<td>Row 4, cell 3</td>
5 Q+ [& z: L% b" d; A</tr>
# l7 g3 V: n3 b7 \</table>5 A* t. o( ]7 g
<h2>一些隨意的表單</h2>
7 r# h. T% u* e9 A9 S2 F, u% ^<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
. N( G9 f- f5 r* v<form action="somescript.php" method="post">9 k3 l" K+ H/ V) |; x
<p>名字:</p>
  b. Z7 M! U! Q" }" g<p><input type="text" name="name" value="你的名字" /></p>
0 H! t0 {; h2 y0 c! a<p>評論:</p>  w2 M$ k) T$ }2 W" B  A  v
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>7 x% P0 C0 D5 q7 }
<p>你是:</p>
* T6 A0 x; r+ p  j<p><input type="radio" name="areyou" value="male" /> 男性</p>* ]& Z5 W3 t, D0 Z
<p><input type="radio" name="areyou" value="female" /> 女性</p>
5 o& P4 c0 @" U3 F3 k. v<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>/ u) ?: C1 J. h: ^
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>; J  ?# q* I8 P: d9 J! k0 ~( V
<p><input type="submit" /></p> <p><input type="reset" /></p>
+ u; W3 O" N4 B2 G) |5 v9 n; O</form>
5 T- x  A6 }3 d& u4 L- _* r* p</body>
, g% \) g2 P/ `, y</html>
! I* g/ E+ ]+ C$ _9 A" W0 I+ G/ i' t( {6 `7 G. q1 S  e
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
! ~! H/ b- }. g$ }7 D
( m( j/ |4 E( `: O  Q感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-2-20 05:50

By DZ X3.5

小黑屋

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