过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 $ b- ?) ?) x' J! F0 c6 A( X

" K6 n6 b1 U4 a9 w, V( z表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。9 N8 ~3 A) U1 F3 M) E4 T. D
) c* T6 B9 o7 s- b2 V' M2 l
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
( _8 Z/ i. ~+ l& k
! Q5 L8 x; i$ a8 ]  ]實際用在HTML中的標籤有form、 input、 textarea、 select和option。/ ~+ u: ?# Q  Z' k: l8 x
% N+ T! n! S1 m* ^. s6 [
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
0 A9 e- Q: W/ S* c; W. L, |
/ j) s/ z4 T1 W& v2 f7 [可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
6 i1 F! V8 a8 y# o7 ~! N
- K+ E5 S: e& S5 j0 t所以一個表單元素看起來是這樣子的:
& m" t# B& g3 \! n4 U" `' I; I$ e0 o  |/ t" q" O
, p. \  S" L1 _! v# g7 ?! ^
: H2 N! i3 S) v# ?; h
Example Source Code [www.cn-webmaster.cn]
4 e6 \+ F6 ]+ x3 d# K* F<form action="processingscript.php" method="post"> </form>7 ~8 p: Z6 p* o

& P8 ]& q  W+ d% winput標籤是表單世界中的「老大」。有10種形式,概括如下:
) T3 l" T2 K/ Y  Y  C' N- }/ @1 W
7 u4 Q6 p, E* L2 T" g- V" N■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 ( K9 k# ~& a, x$ x8 x" K; Q5 ?$ O% \
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
! ~8 T5 t& S" C8 p7 g! K" E6 Q■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />. $ V$ {0 c+ N! O+ X4 a5 p& ?7 x
■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
7 s8 L2 a7 L$ k, B■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
: ^  {: ~3 }! v1 t■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. % ~1 D% N+ w9 w0 l0 R( h7 x
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
! ^' H& K+ |. P% _9 F' L$ I■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
' B& D5 O. `3 H' J* O5 D5 r, N+ N■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
  _' P: Z# m9 B■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 - F4 r4 K; R9 m0 ~. {# h2 `& x! f
注意輸入標籤input也是用「/>」自關閉的。
4 }2 H" }2 M3 k) w( p- d8 g2 b4 x7 }7 z6 z2 n
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
3 E1 o- O- O  Y7 `0 @9 p) N& h+ E3 E3 y( l
, a+ p. K4 V, F2 \# x. w3 r
Example Source Code [www.cn-webmaster.cn]* z% U3 c# c% h% u% w
<textarea rows="5" cols="20">A big load of text here</textarea>
( W- v8 F. H+ r7 b5 R0 |5 ~# t1 \) @" D! v# b9 n; t2 T
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:+ h2 R$ |1 K0 d. R1 x* r

3 X: Y( ~/ x5 r0 ^! G2 a
( p8 [2 f# u4 l* N  S Example Source Code [www.52css.com]. ?* O! w* H$ c5 Q0 r
<select>
' F8 h  Q- C. X. L<option value="first option">Option 1</option>
+ C/ [- e3 o0 t$ k+ |" b1 J<option value="second option">Option 2</option>0 E6 X9 _$ i' X, H: A5 ?9 f$ t
<option value="third option">Option 3</option>
, Y, G9 a0 L0 `% F5 A9 h# i</select> + v6 ?! p* y2 t+ j/ M2 E

6 H8 z* k2 A8 a+ o& P當表單被提交時,被選中選項的值將被發送。* h3 z- P3 L1 e# ?& @8 F& E3 r
7 B3 O3 K! |6 ~9 n" V& b: o
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
1 u, \# ~/ ^# X# h
6 A, ^% G+ W9 j# q上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
& m" v5 t9 t; Z7 U" X+ N
2 v4 J3 ?- `( U& c: t1 ]$ e一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
7 E1 D0 D1 X' Z0 n
6 \+ v* N6 n4 r' \
6 |) @/ ]* N5 t  s5 q* o: F+ | Example Source Code [www.cn-webmaster.cn]
9 l+ i! V5 q+ p2 f  g<form action="contactus.php" method="post">
) M" Q0 Z4 }* w" O) M# m4 @- H<p>Name:</p>$ C  V8 w  B3 @1 ]7 J& r+ H- S
<p><input type="text" name="name" value="Your name" /></p>
4 ]  S5 Q, e8 ^/ t6 i<p>Comments: </p>
& d3 E! S  |( H# K) y<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
! ^, S6 [- `; }) t8 P<p>Are you:</p>, S9 ]6 U+ ]) e- [3 K
<p><input type="radio" name="areyou" value="male" /> Male</p>2 k4 ^5 v) A  o3 R
<p><input type="radio" name="areyou" value="female" /> Female</p>
& `% G& m. T1 c4 s<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
3 t) Y! O8 t3 p; j<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>* d4 W/ Y( n/ j9 m; s0 c0 k6 {
<p><input type="submit" /></p> <p><input type="reset" /></p>
/ L1 j8 W! N# c6 {+ X, r9 r9 _</form>
. w# Z6 _5 E* c. S- o 8 w# ~0 [* G9 w; o" V
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
0 u2 p" }3 T6 [$ Q8 Z
* [, B* |* w  h* W6 N如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。) c" E7 u" q) m5 h4 ]" b* D6 o
  Z- ^  p+ h* G6 R
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
' j% m! [" F6 J) Z
8 l+ T& m! H! O下面的代碼把前面所教授的綜合在一起了:
+ @( V  V! h1 C+ r+ U6 U7 n% A) C8 Z5 ]" G- e) T
+ Z2 A( J" J! g/ I

  W! X8 V4 [$ b4 i Example Source Code [www.cn-webmaster.cn]( N  Y5 `6 v" K  w. P$ ~8 h# H/ c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 9 s: S$ ~; I2 {6 A6 k
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5 T5 ?# Z. H  ]3 @  g6 b" @' y<html>
6 B- V  @5 L: x! ?<head>
$ E4 M5 a0 g' F; v- o; F9 F, b9 O4 C) k<title>我的第一個網頁</title>; I9 l% i, a+ F4 A. J* V1 w2 Y3 ^( r
<!-- 順便說一下,這是註釋 -->
- w$ a# ?+ S& i  }1 U1 C$ G- z</head>. T) B# I4 N7 d/ H3 }, x
<body>
# O! c& I& J& ]! K! `- g2 w<h1>我的第一個網頁</h1>
4 u, [1 `: W: g  U. q<h2>這是什麼</h2>
1 C; R$ [1 \) O2 r3 Z' S<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>9 T( W' N+ `/ Y; C- Z& H8 B6 u  V9 G
<h2>目的</h2>
2 r: M+ \3 Q' y4 X, S+ G4 {9 }<ul>
7 ?8 F2 i7 z  J1 b# @3 D<li>學習HTML</li>
7 ?2 W9 e' n) u( S. m<li> 顯擺,炫耀 # V0 d  d( J4 o- u
  <ol>
: h6 T% ?5 G% `, N: e' I* \ <li>向老闆</li>$ v: m7 g* g1 c
<li>向朋友</li>
, [0 N- D1 {2 s! O  h7 W" e6 U3 C; m4 B <li>向我的小貓</li>0 k8 ]* w: J/ Y  l, E
<li>給我腦中多嘴的小鴨子</li>
3 R! y6 j4 p, T6 g- @# @% b </ol></li>% ~8 u8 E; `, K) |# ?7 H
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
: R# y( ^: o( d% q+ R6 T</ul>
1 Z# \; b# N" Q/ t<h2>在哪裡可以找到教程</h2># i/ ^8 q; G% ]; z2 g' }
<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>
- P7 f+ S: M0 P2 Q$ r; O2 a<h2>一些隨意的表單</h2>
5 b( u* E7 N& B7 ~% d/ d- D7 Z  I. g<table border="1">0 z8 B6 v) w/ a
<tr># @) r  o$ C8 U$ k  Q
<td>Row 1, cell 1</td>
; X- g  c. R6 R+ U<td>Row 1, cell 2</td>
6 y9 o: Y! ~5 I) M<td>Row 1, cell 3</td>
$ M. f+ p* n- e( ]$ T- u+ d</tr>
3 [3 Q! ?) n+ x( p4 f+ s<tr>
/ j( q0 p2 }5 B1 L& Y2 u, K$ q  k- w1 L<td>Row 2, cell 1</td>+ y4 O; Z' I' N  F
<td>Row 2, cell 2</td>
8 C5 o2 q* y8 l; O3 d$ a4 T<td>Row 2, cell 3</td>
2 p+ Z: N! ]2 T! H2 f, x</tr>
% f* \# [. q, d3 l7 E! k<tr>6 s: ~5 p- y0 A( K9 _; M+ F
<td>Row 3, cell 1</td>3 v- G2 s$ U5 ~5 {; N* i. j' \0 E
<td>Row 3, cell 2</td>8 b/ Q2 H) L3 [# X
<td>Row 3, cell 3</td>4 k) ]( A) l5 D- m+ E, W
</tr>
4 E( |" x% d5 e* m% M4 c<tr>: ]8 y0 c6 H4 Z
<td>Row 4, cell 1</td>
7 c8 P5 H6 v8 W, d; r0 [; c<td>Row 4, cell 2</td>
: k" V+ r+ j* V<td>Row 4, cell 3</td>4 M1 V. y; z( Y8 U9 H
</tr>8 T+ a+ z* f) d; v- B4 v3 ?6 x" i
</table>
# h( {+ ^3 t$ v5 S7 {* d* j<h2>一些隨意的表單</h2>
! Z7 e8 {. b* w: Z<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
( k0 r0 s3 f; s( \<form action="somescript.php" method="post">% j4 G& c3 E/ M
<p>名字:</p>: N! b# \8 k4 u6 s2 g) N
<p><input type="text" name="name" value="你的名字" /></p>
1 |' n8 ^( m1 Y/ I9 `+ Y$ w<p>評論:</p>+ ?# R) w6 ^  x( s
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>: [5 X2 o# w3 {( A" q- H
<p>你是:</p>
- n" E# E* a, q( K; t8 x1 F8 Z% F<p><input type="radio" name="areyou" value="male" /> 男性</p>7 l" P, S6 {2 E% V7 F; Q5 X
<p><input type="radio" name="areyou" value="female" /> 女性</p>0 c+ t2 Z( `9 I( _9 p
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
% c- k, c% N4 L<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
% S; A2 M1 H& V+ C<p><input type="submit" /></p> <p><input type="reset" /></p>
+ _" \- ]' _0 S; ]# m</form>
# w: s1 W6 u% Z% q7 L</body>, d! v  r0 {' v' n; l1 q1 U: l
</html>
5 O5 P; Q6 Q% @6 A
! f# c6 D  B. Z+ O就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!: l# k! t! A1 Y% F/ M" _

, Z" U9 d' G) s3 F感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-1-14 03:24

By DZ X3.5

小黑屋

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