过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
% k' z1 C! S  r9 l
' a' Q. R: {; t- [& p6 Y  A表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。0 k. v$ [" c7 |6 |, i6 Q) m
+ A  G: x: U) p& D4 ^% v9 k- c
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。+ d1 Q" h5 k* N3 q; B3 m
9 v8 {, C- b& `0 B4 ~: u  \
實際用在HTML中的標籤有form、 input、 textarea、 select和option。& {: d) K: ^6 r, G. x3 f8 e  n
9 g, M# T5 C; I4 k; f; ^) a5 _2 p5 g
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
% e! _! K$ _8 Y% ]8 O/ x, X2 v6 J' O1 w! O2 K
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
9 |. L8 F% N( y+ ?- y& @% X( R- E/ j7 b" \& a: M7 Z# n* N
所以一個表單元素看起來是這樣子的:
( s8 z( N4 f3 Z/ B+ S; g9 j; v& f& V

& p7 U3 U5 u+ h  n4 e4 \
6 t3 y/ t3 v" Y- H% O+ M! n' n Example Source Code [www.cn-webmaster.cn]9 y& V6 X. z+ F, ]* ~& @- p. m
<form action="processingscript.php" method="post"> </form>4 u0 z. L$ l0 f% F3 j3 O

2 k  \7 X2 Q4 p3 z6 _9 _4 ainput標籤是表單世界中的「老大」。有10種形式,概括如下:
" d3 R9 ~1 G0 ]5 k! h( ^, |4 w7 M$ e5 q5 Q8 a5 @
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 # f) y* f$ F8 m# R+ O
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
' F9 S2 S8 }# m. V% I■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
9 S1 t$ ]6 L1 u/ S6 q5 D( B■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。 7 [# z+ f  r: u) j% Y- g  F; K
■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 - }$ L' w* C- s/ H
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. & b' g- Q/ {* j  t, {+ g8 C
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
! o" Q- Q  C! D4 P# V7 x■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
5 a" s& o$ G6 V& f4 j" R7 d■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
- ~9 z6 p( d6 ^1 {7 l) r■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
7 Q, V  b0 Z; ]3 l3 z- @- u注意輸入標籤input也是用「/>」自關閉的。
1 S2 z% Z% V  J. U! f* Z; ~# K& L+ g* _; `) i" Q) ?
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
+ t0 w( _) m0 M/ }. \# v4 y  [8 s) d5 h5 E! r; y) q% D

4 A6 B, {$ d) r7 O2 t Example Source Code [www.cn-webmaster.cn]( X8 s/ B( y1 @# G
<textarea rows="5" cols="20">A big load of text here</textarea>
& K; R, |- k* O* W5 ?# Y7 q$ m! o" E! Z* v/ {+ y, R
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:, q7 A1 _# \2 H8 d! t9 ^5 @9 s
3 d3 N, @$ O  w) e& c
: S; l( h  q1 l; @8 G: Q' a
Example Source Code [www.52css.com]
, r8 C" ?5 L* [' l- z$ N<select>
: ]8 w& V$ u6 h- x9 I<option value="first option">Option 1</option>
! N* z! q; Z" Q! x' Y; @: D7 |0 k<option value="second option">Option 2</option>/ u2 L- E$ `/ W% y
<option value="third option">Option 3</option>! S9 q9 R/ g8 {2 u) Z( Z  C
</select> 0 A, @9 I2 p# f& T+ B/ r

+ l. r2 A* n0 P8 Z, F! Q& U! d當表單被提交時,被選中選項的值將被發送。
7 O3 j2 L7 {: H
, i1 w! d, E7 s( c1 N8 [1 M! t1 b與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
- Y, P4 a& R% Y. V8 ?3 l9 K2 u$ ^% F5 A+ a- Y1 b
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
/ Z+ L* l: o" g! ~! b; F& W, b2 u9 c# Z: i7 c# b( ~6 C4 P- N
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)" _1 W4 N9 J& q5 \2 ^# Q) _9 o' z

9 E; F1 g5 G, `! S" X
: B7 Q8 Y* Z6 [3 `3 p  F Example Source Code [www.cn-webmaster.cn]! ?, |- N, ^9 L: D+ ]9 X1 s
<form action="contactus.php" method="post">+ n& J  j8 \" }0 Y$ W* g. B
<p>Name:</p>2 A+ Y2 R4 b: c; l) O
<p><input type="text" name="name" value="Your name" /></p>; n2 O. ]7 x: ^, v4 x% N
<p>Comments: </p>
- q/ j. ~- ^& ~<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>! K9 h$ G# Z8 s8 S7 Y- M9 T) f5 t
<p>Are you:</p>7 E# C8 l9 c8 y% h) }
<p><input type="radio" name="areyou" value="male" /> Male</p>; l$ A; u; f5 n" V! \
<p><input type="radio" name="areyou" value="female" /> Female</p>/ ^8 p( ?" k' Y4 J
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
6 n" w, O0 j' v9 v9 a0 c0 U<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
6 x5 _9 b, _) u: k$ g* ?<p><input type="submit" /></p> <p><input type="reset" /></p>/ T, c& y1 o, d: {! R. }: {( B
</form>9 {% k2 |/ b) |
$ C" f3 W. h8 b- f  E8 D1 ~
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來) J1 V" ], ~5 w
- {# i6 H1 I, C
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。" `9 S2 [9 k1 ?1 N/ O; b! b

; n! F% G; ?) W4 ]+ N5 K) E/ ^實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。4 D, s4 J4 }6 }; ]+ H- m1 T* S: w

7 g5 n5 C4 T/ S  R$ D下面的代碼把前面所教授的綜合在一起了:% g: }1 g- H4 B/ C" Q

, P+ J( j9 J4 Z* z% q. u' N+ S; p$ G; M  l8 o9 }9 E
8 }* @2 w; B! g' N9 L' f
Example Source Code [www.cn-webmaster.cn]9 l" z' y" M+ }/ n: N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
/ _( I* B- q9 _# l"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
& H; S/ Z. d: X3 \/ a' J<html>& C. R; |/ B; Y( e( V7 G
<head>+ t  X. \0 H1 [0 C0 r4 a
<title>我的第一個網頁</title>, C+ {5 ]/ d+ L9 [/ c* E: G
<!-- 順便說一下,這是註釋 -->5 t- h' M5 N5 n, Y3 ]& H2 E
</head>
& z% ?& \+ Q/ o* g' H3 G% k$ T& \<body>3 e0 K: ?2 V) @" j1 v( }
<h1>我的第一個網頁</h1>5 Z9 O9 I% B5 f. q% b% D2 \
<h2>這是什麼</h2>
+ F* M! p7 w' C3 x2 Q4 R<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
* R! \1 ~' M& ~# R<h2>目的</h2>2 |& L7 e7 Y4 z. [- d
<ul>
, E" ?3 i/ J0 v* K% G<li>學習HTML</li>% w5 e. R4 M4 A' W% @( n' c5 R
<li> 顯擺,炫耀
: |3 S( D8 D9 ^, \) ^6 n; r  <ol>
: a! g6 O! |, I4 @ <li>向老闆</li>
  c( _* D; w- V+ o+ t( c <li>向朋友</li>6 g' q1 r' k; |5 @3 f) {+ X- I
<li>向我的小貓</li>0 u, Y: x2 T, i- J0 D% N
<li>給我腦中多嘴的小鴨子</li>1 }5 Q" [7 }% v  {: |' u
</ol></li>; q+ d2 W  ^4 Q0 i. s
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
( ]' Q. z' f4 u6 Q7 s</ul>8 W" v; D/ P$ m/ D5 T
<h2>在哪裡可以找到教程</h2>
2 |) ]# w/ c, k  ]<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>3 a6 N5 E/ i( D; t
<h2>一些隨意的表單</h2>
, F" X# A  J" E  r<table border="1">/ |5 }  v. F" I
<tr>
, N- S: h- X7 q. r+ P/ I<td>Row 1, cell 1</td>4 f+ F. J3 \/ V3 [0 H
<td>Row 1, cell 2</td>
, A+ Q4 v% U  F0 K" ~( m<td>Row 1, cell 3</td>
9 ^7 [9 C/ C& F</tr>
1 P& P$ G; ^9 o<tr>
" f2 Y2 B8 |: y+ U: n) w<td>Row 2, cell 1</td>
8 @5 a: C( W0 b% Y<td>Row 2, cell 2</td>. Z! B0 Q; X6 g# g' O6 T
<td>Row 2, cell 3</td>4 Z2 s/ P) L9 W0 B1 @+ L# B
</tr>
+ o& b$ C& G0 f<tr>
2 P: o0 x3 {8 G# Y9 J! x2 s3 q( ]<td>Row 3, cell 1</td>
" K/ ^& {* v6 w5 }2 q1 k0 ?8 O7 j<td>Row 3, cell 2</td>: m. `) p. c$ J2 b3 q. C$ Y
<td>Row 3, cell 3</td>1 r& r7 x7 }) X5 i4 a" M" `
</tr>
. h2 S- B! c& I<tr>
" x' {2 y( }% J5 U. Z7 B<td>Row 4, cell 1</td>
$ O  b# J& Z0 Z! [5 d<td>Row 4, cell 2</td>/ U( E: [8 H/ j/ Z+ a" D7 i) v
<td>Row 4, cell 3</td>
4 C5 {2 L  S1 g/ |% _/ j  @2 I9 b</tr>& B9 A/ E" H" Z( m3 y# m
</table>
0 f& k3 G; b- M7 w! f6 y<h2>一些隨意的表單</h2>+ b* C7 Z+ O: _4 [
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
4 R* e5 O- l. U. y<form action="somescript.php" method="post">: Q$ I- {1 G( g) u
<p>名字:</p>7 a. i7 q, `' q# N- r# X0 A; o
<p><input type="text" name="name" value="你的名字" /></p>5 w9 }$ ~" m, z; w1 m. j/ Y
<p>評論:</p>
* e) B* @* O; S<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>5 s* H3 K. [4 }( [  L. x6 ^
<p>你是:</p>( S; o& }. S$ U0 h! @
<p><input type="radio" name="areyou" value="male" /> 男性</p>+ J9 V# t4 @/ m6 D+ X
<p><input type="radio" name="areyou" value="female" /> 女性</p>2 s7 ]) @' I$ [2 A" O3 }( p
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>1 }( o4 Q( X; K% H
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
# s& |/ }$ V4 P2 h8 y( O* c) [<p><input type="submit" /></p> <p><input type="reset" /></p>
. s/ V9 Q3 L  d" t</form>
; z# K1 G' S; p; I</body>
  @. j- F( u1 H, k</html>
2 C' A, Q8 u$ h0 s! l7 f! K
3 _7 `3 x7 J# H" Q5 x就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!0 R9 ~# m3 X- c( S/ W

. d% l: j% @3 v6 @( Z% h感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-2-9 01:19

By DZ X3.5

小黑屋

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