过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
. w# O* T' Q! L9 O0 o% d0 W! }" e+ B
8 o! r  \; D5 A; K' ]表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
6 e- C$ F, j( s! ~5 O6 c7 ^2 i/ o" u9 y# t4 p
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
2 O/ w1 J( T5 O5 D( [2 k' b# @6 C5 n% T/ i) l- f
實際用在HTML中的標籤有form、 input、 textarea、 select和option。
2 [. o* h! k* Y/ M2 Q8 B" l6 _- F
$ V9 H: c: a* P# _) f表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。1 c( a% d1 c2 D9 N( v+ h
: R  ]- F1 R7 `$ ^& u
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
$ \- D1 _5 ~( Q' g$ g* t; D8 M8 K- m  C% ?. a
所以一個表單元素看起來是這樣子的:
2 w/ i/ o- a; K& Q8 Q9 k  W6 Y: D* I. k8 ~- v% d
1 K) S8 \9 t/ `

0 J# ~# W+ u: v  @ Example Source Code [www.cn-webmaster.cn]
5 w  k+ {1 B4 I8 H- ~" }1 w<form action="processingscript.php" method="post"> </form>
8 X" G* }# T+ a# J* K( c8 L
" S/ p) C8 l/ Linput標籤是表單世界中的「老大」。有10種形式,概括如下:9 j1 O! N& G- p# r- y' X& i

: t. B3 e; v6 P! I& X■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
  v9 Y% I4 j. q1 D7 b■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
; P9 K9 t: c8 L9 ?■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
3 x5 K/ v  a! m; k, [' G■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。 " e0 I, T/ o9 A2 W9 ^6 y" E
■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 ' T$ P, j9 q# C3 q; w) p! o
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
% ?6 Y* Q0 m: l9 Z2 ^■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 ) a4 B; b+ g  b/ j  V
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 3 y2 X6 `8 {3 p2 s: H  H! s2 ^
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 - A$ k; J* Q0 F. D+ m$ K7 \* g
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 3 p7 l/ Q  k, L) Q% r* n- S/ T" W
注意輸入標籤input也是用「/>」自關閉的。
3 l1 D7 e; p. \# E
2 ]4 ]3 {0 r. W) W* g: d多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
1 y0 a, I: k9 K3 P- h: n. S/ Q& \% |  X( g

9 H7 E5 y" E( G- V9 ]9 c% I Example Source Code [www.cn-webmaster.cn]; [$ P2 S4 P8 I$ v0 B
<textarea rows="5" cols="20">A big load of text here</textarea>
+ o) `/ Q1 a2 I1 m% G/ w7 I  }: W
: G& ^- a  N1 C! Z  ~. @- j1 A選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
) M  \7 W$ m  B7 x8 S7 A, P5 c9 t6 J. U$ U) }1 M) G

' ?# f# ]6 F5 v: l; k Example Source Code [www.52css.com]  `* I, z* p( |
<select>2 B1 p: z) l7 C$ `- `* u9 r
<option value="first option">Option 1</option>& b' m8 A0 A! N5 K1 ]0 G
<option value="second option">Option 2</option>( ]% n9 H8 X% n3 n" A- a
<option value="third option">Option 3</option>
- ?" `' S* c) }) i7 `</select> & P7 \7 y0 K2 o9 g0 i
! j4 x$ i9 \* C4 w8 C
當表單被提交時,被選中選項的值將被發送。5 j' ~$ n& `3 A- w/ ]% @. t

5 p9 ]( E5 Y; G5 s% H與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
( k1 I3 J' V& z6 F8 w& g
7 r7 p4 e% C) C, f7 W上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。* r2 p$ @9 A! p3 V; Q8 Y
# i) ]/ A6 S0 ?- b; p- f
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
9 |, \' R+ b$ o" g0 Y( Q% M; h% g7 a
: V* p  c8 J5 _3 l
2 I$ _  h: Y/ M2 i) v0 D# [! b+ Y Example Source Code [www.cn-webmaster.cn]+ G2 M- W, R2 `0 G
<form action="contactus.php" method="post">' A+ N4 A7 M( `2 f9 {" W
<p>Name:</p>( e" q  N4 P9 `/ z
<p><input type="text" name="name" value="Your name" /></p>" g- \: {# H# |8 s1 w
<p>Comments: </p>
5 F& T! V" }* K+ I3 H: E1 z<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>5 R1 z- j5 |5 s  w4 j. a# X
<p>Are you:</p>0 a$ L9 y- l! \
<p><input type="radio" name="areyou" value="male" /> Male</p>. [* o- x% v5 M  z; v  U
<p><input type="radio" name="areyou" value="female" /> Female</p>! j9 ?% ~- O; w
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>5 ]3 H2 T2 z2 K0 z
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
0 b) v' d- M5 Z<p><input type="submit" /></p> <p><input type="reset" /></p>
* }1 _6 q3 N- x& Q  \) s! s% t3 d</form>
7 v% E  e: q& m  C/ o1 g   [) O8 f, ?$ n8 ^6 h
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
5 l+ F. v0 t) G" l" N
: f/ F, M' W: K8 O7 `; x, F如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。# J1 v9 j# [# ~

0 n8 D9 K! _! a" m* M實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。4 Q0 a. v  ]- j$ P0 F4 f

4 g% _$ K: p& I6 K! a1 y. {: V下面的代碼把前面所教授的綜合在一起了:5 u& }+ I# B. a3 S- \. t  m
7 V' g% x$ k0 x: V9 V9 h3 z

% w5 Z5 Y' n; E8 t2 a, L5 l/ s1 G& i9 r+ z
Example Source Code [www.cn-webmaster.cn]
; n) V" B/ h0 [( Y' h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
! z+ g5 H$ g* U" q5 ~+ k5 \: v"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">( }; E4 G. ?0 T! p5 g/ t% X. o
<html>  ?6 g8 ~+ Q- f) Y; B1 U0 z
<head>
4 x7 x% l( o" D4 q+ C' F<title>我的第一個網頁</title>* P! B& _1 l3 m0 t3 L- p
<!-- 順便說一下,這是註釋 -->
- R- J# I: U8 y0 J- \8 o$ L0 Z' J* Z</head>' o/ T9 V, u0 q* m
<body>& a4 D# g0 A4 ^5 I+ x& p
<h1>我的第一個網頁</h1>: k5 q/ @2 P, D
<h2>這是什麼</h2>9 V; q9 d3 o& J8 E# b& S
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>( {& B$ e- Y) B+ ?( C/ ~. v
<h2>目的</h2>
, Q# U' t  w4 ^) z4 ~8 A% \+ W<ul>
& G2 R# d5 O+ s+ b5 F) P<li>學習HTML</li>
% v" D& e0 l1 [7 E& `, `5 O: |<li> 顯擺,炫耀
0 G* P  s% F; W3 ^! Z  <ol>0 z' g" j% y+ `: x! n; M9 t& S
<li>向老闆</li>) q4 h6 q- E( I+ h  t6 y2 D& x
<li>向朋友</li>, z7 s$ A( c- K) M
<li>向我的小貓</li>
/ {- f1 ~1 s/ B% q <li>給我腦中多嘴的小鴨子</li>& y* r- l& P2 W8 Q+ s4 P& O+ D9 l. h
</ol></li>
* N& f6 o# v, W0 f<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
8 E+ x5 Z+ r, ?! M2 U! F& d) F5 X</ul>3 X5 |' y3 Q" m( G8 y
<h2>在哪裡可以找到教程</h2>8 c/ f2 K# n0 x: r/ r& L% n
<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>; V5 k' C% @5 D) S
<h2>一些隨意的表單</h2>
& w# b) U5 S6 h/ ]<table border="1">
" z0 t3 a. j; _<tr>- A0 H% N) i3 R5 D' z
<td>Row 1, cell 1</td>
: M: }' B0 y- x<td>Row 1, cell 2</td>: q. I* y, X( j5 {2 ]( T4 B
<td>Row 1, cell 3</td>! Z* N7 Y3 k3 P2 A! l: U
</tr>5 o  y+ d7 e6 F- K2 E) n4 d3 u. T
<tr>1 Y9 l6 H( [5 B! N" a/ h: ^
<td>Row 2, cell 1</td>4 l+ f% B; a  M
<td>Row 2, cell 2</td>: g5 |2 h/ `2 M! `, W4 p! a9 q
<td>Row 2, cell 3</td>0 L; H2 c7 z1 M/ V. ]3 g
</tr>( r2 M  _* h( j, [" s% ]- s- c
<tr>" u2 x! d' [- N3 i3 e6 W* L4 I1 D
<td>Row 3, cell 1</td># N  i1 \" \3 X  v  U1 J( `
<td>Row 3, cell 2</td>; W0 b8 {! _' Q6 T( M& K
<td>Row 3, cell 3</td>! s; I" h9 V$ n+ W4 K1 L
</tr>
9 |9 y* @/ b% `6 }) S; z' u<tr>
4 W+ W9 g1 t6 c! i/ L! ^$ F: c3 _<td>Row 4, cell 1</td>, O& a( D" ^- l
<td>Row 4, cell 2</td>: |5 q" r/ S+ x+ o3 Y
<td>Row 4, cell 3</td>  p  m' K& P% D+ Y  S" D
</tr>
* x: p( C+ M! y% Q</table>. {6 }$ u- @+ Q) Z% f& h
<h2>一些隨意的表單</h2>& G: I6 f; O0 \* l* c
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p># n) ^  ?% T3 Q" g0 p3 W3 m
<form action="somescript.php" method="post">$ |$ P5 H- y8 u4 v" v" q0 _
<p>名字:</p>
9 O' e2 b' e6 g' u; G# J* L" n1 z<p><input type="text" name="name" value="你的名字" /></p>
/ m4 V% P! ^( I7 W7 I<p>評論:</p>8 F* X: n* }! y4 {7 D$ q, g; @$ K
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>1 E+ q4 U6 @8 D0 C1 c" u$ S
<p>你是:</p>
2 ]4 g0 @% a+ e<p><input type="radio" name="areyou" value="male" /> 男性</p>2 f9 \) v4 I! d8 i
<p><input type="radio" name="areyou" value="female" /> 女性</p>
. C5 _& Q! u. n) G" N8 B' }; R7 Y1 H<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
% j2 n2 Y) o% e- p& ]! L<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
- l4 V9 M( t1 s1 c<p><input type="submit" /></p> <p><input type="reset" /></p>
# W3 Z( K2 M" N: n</form>
* ?! m8 R7 B$ H6 {# J1 B</body>
- g" A/ Z, ?8 J) T8 M7 x</html>
2 B+ a6 e' w  i# P9 w1 ~' w" K  T5 `: x; f
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!: u4 e) x- W) \& I

0 W6 ~! U  L6 |5 A感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2025-12-1 15:37

By DZ X3.5

小黑屋

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