过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
8 Q' m8 B. w6 G  b1 B" b
1 P" o' q6 p- H. v表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
+ W1 k9 w7 K$ w5 F$ x$ z5 y' ]
) s- A6 `, s' l( \/ C4 r表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
3 B5 T# \' ]/ ~% `' Z* H
' C( S" ^" Y6 F" q9 j, n  X實際用在HTML中的標籤有form、 input、 textarea、 select和option。7 w7 m% ~$ @7 e9 G# T' u; z

. d: A' t0 }2 r; K3 T2 t5 L表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。, v* K' a; A/ K6 Z% _0 j2 F7 s
2 J- G+ d4 I9 {; o( _0 @
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
5 |7 e3 |$ C! I8 q$ t+ D2 R0 F3 p0 a. j
所以一個表單元素看起來是這樣子的:" J! {8 C/ A. `( U# x
# u: n) f/ F" b9 n
! r; U1 T2 E3 i+ z: [$ J
  `5 X6 |" ]. f- v4 V
Example Source Code [www.cn-webmaster.cn]+ o' D+ _" A: D# B0 n- l
<form action="processingscript.php" method="post"> </form>& q5 Q4 u2 I  E' O
2 l3 \+ S$ U! a" f% c
input標籤是表單世界中的「老大」。有10種形式,概括如下:
" A6 |* [) P, N0 c" Z' j% A! g* i4 A; y- M
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 & @  Q$ g, F7 p( x8 r& [
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
6 f& q* B1 a8 u6 g6 ?- B2 d4 S■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
5 c# R& }1 z& j' O( u# Z; d$ w■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
, p, V" d% \3 ~' H. T7 X7 l■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 # l" p" H7 B, m- P6 e6 m
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
0 y% {* D  w2 N; k3 [" ~■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 7 |) E) }. K; ~' J; |3 `
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
5 A; g9 {$ X4 F6 u■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
2 d* s3 m. _$ V3 d3 ?3 w■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 , z. O9 {: t1 e! P  i+ J* P2 H: S
注意輸入標籤input也是用「/>」自關閉的。
. R7 i- C, G2 A# B
; o* p3 @" x- M* t4 t2 p# V' C多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:: a( x2 z& `$ N) ]
* G3 \2 S" O+ y: ~1 \+ u8 `

3 u% @5 _( p  K% x' v4 Z! }8 j% p" C Example Source Code [www.cn-webmaster.cn]0 I2 O6 Q. o# Z& D8 ~& T
<textarea rows="5" cols="20">A big load of text here</textarea>
- F9 r$ l7 y/ C& _, g- m' Z5 h" Q/ T6 M. D% r+ r
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
' m; y$ m, |5 ?" V
# L  ~6 |3 S0 n) H# H; b
( Z* p8 s2 V* P8 W3 z1 m Example Source Code [www.52css.com]
: W8 \8 ]3 _/ l" L- P<select>8 }$ e0 Y9 a) O7 _- _6 w
<option value="first option">Option 1</option>
7 ^1 ]" O; z5 F# s9 |<option value="second option">Option 2</option>
+ t- {3 `0 p  @; `2 u- u8 ~& w9 s<option value="third option">Option 3</option>- n3 F! W6 z' U# j2 Y' {: Y/ i
</select>
; m( k) u, M; L, K9 X& ~7 G! m1 {1 f
當表單被提交時,被選中選項的值將被發送。) s' p8 L- ?  r, x' P
) Z7 N& t; Z/ c9 S/ J' P! t3 k  }
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
" e; V) O/ C/ t. U3 d
) x4 X8 Z4 ]2 t+ u1 \" q上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。9 h  B5 v5 W  u7 s9 u2 g. H

7 e% V$ u7 I, Z一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。). A$ V$ a$ U  `% {
4 h) ?) Y) \" G$ ^

3 \2 |  ?  P# z Example Source Code [www.cn-webmaster.cn]: r: i3 t* x9 H9 x# a
<form action="contactus.php" method="post">% M/ V! V1 k; F( d5 |: t
<p>Name:</p>6 i+ T& m1 L: P
<p><input type="text" name="name" value="Your name" /></p>
, j" h) u+ x7 G# u4 N<p>Comments: </p>. Z5 E" k, W) o- U/ e0 E: g& j& O
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
3 H# l& @3 ~4 y: V, X, V5 l<p>Are you:</p>* C) i, c5 e% q; W, D
<p><input type="radio" name="areyou" value="male" /> Male</p>* ?2 T) P- g$ d; E
<p><input type="radio" name="areyou" value="female" /> Female</p>
7 b2 P% g" i: A6 v" J+ t  N<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
* }4 U/ |2 V. k4 z  }<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>0 R$ X) R4 n) d$ X5 K+ n
<p><input type="submit" /></p> <p><input type="reset" /></p>) W" f) K" S, s! i4 r/ c+ \0 l
</form>
3 q: Y4 L: Z+ a# w2 C % U2 V9 O0 [+ t( g
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來7 @, k' z, R9 j& ~4 e! T3 A

/ L/ Z% b, D% c- h/ e如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
, _2 j" M" Y$ Y
, p+ t- i" M" `& M% m* p' x" Y實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。' l0 ^" K% @" L2 l1 r2 G/ ]

: O% Z4 V5 o8 M8 W$ x1 u3 E* T下面的代碼把前面所教授的綜合在一起了:' f5 W$ W/ S3 [7 N

) d* n3 d4 V4 G  H& s$ k6 R
. ^, }% v2 Z2 K/ _* x8 v
+ `7 e3 u* u' R% j7 y Example Source Code [www.cn-webmaster.cn]
8 t+ J$ y  z2 K* C' j4 ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 5 c* J: H" }) z8 K  }
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0 L- W% y. L3 b: ^  I<html>
0 t3 H# O6 t4 W% O/ B% `+ u0 i9 z1 B) L<head>+ P5 m+ D( D4 f
<title>我的第一個網頁</title>
- h, ^' ]/ h0 u" F% K1 {, i6 r<!-- 順便說一下,這是註釋 -->5 D; o0 I- }: s# k
</head>
4 X; C. Y/ X2 z% j<body>
" ^9 {# V: z+ w9 x, a$ l3 h<h1>我的第一個網頁</h1>
) e. s" ]7 z) O" T" r<h2>這是什麼</h2>
! @* K! [8 ~7 W* G8 b6 j, W<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>, V: w+ d( I- _. G/ }3 x$ |
<h2>目的</h2>0 ?- F: a, n2 d& V1 Y. l' R0 r
<ul>9 O7 |* H3 A% D$ g1 ~" S4 p; y
<li>學習HTML</li>
* D% y' A" |$ i, B<li> 顯擺,炫耀
9 {  N7 l7 Q7 Y3 F2 w2 p  <ol>4 _4 C" V* K) k
<li>向老闆</li>% M9 j* Y( ^' q8 n+ ?' U' z
<li>向朋友</li>: u6 L7 X* r( ?' `- a
<li>向我的小貓</li>2 l3 g. @, K; d; [* ]2 j
<li>給我腦中多嘴的小鴨子</li>
4 m3 G% B' z; Q% v </ol></li>
. K- l7 D7 d) p4 q0 L: T2 G<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
$ V: b3 ?4 l6 |! J/ t2 a2 j</ul>7 f" X8 G& H1 z6 T7 f/ W4 v/ C1 w7 e$ U) _
<h2>在哪裡可以找到教程</h2>. e6 e1 b4 P9 f/ C+ v- i
<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>$ f- X. P: f9 A7 t- }4 b3 m
<h2>一些隨意的表單</h2>& a9 S0 C8 w2 Z/ z0 p9 a  p
<table border="1"># L9 O( u1 N/ _' _! _
<tr>, Y$ K+ h: ^" S. A& W/ ?
<td>Row 1, cell 1</td>  M+ a% J6 w1 @( e5 p6 z& ~2 ~
<td>Row 1, cell 2</td>5 C& ]5 k6 I9 ^" m
<td>Row 1, cell 3</td>% o: r1 }+ W% U5 e  c" ]/ U# k6 q
</tr>; t( S: s7 Q* d8 f6 h8 p5 g
<tr>, g# V0 z* {2 t- ]/ o  z- f
<td>Row 2, cell 1</td>6 V) G* J8 ~, l# d8 j4 ~( b6 |
<td>Row 2, cell 2</td>% d! @( A  z* X) m
<td>Row 2, cell 3</td>
/ H( g) J0 ?$ C: h* o" M( R</tr>" E% E& r; n+ i
<tr>$ X- ?( ?) N5 S# A
<td>Row 3, cell 1</td>6 f6 n/ ?9 H. W$ D
<td>Row 3, cell 2</td>' L1 I3 p; \5 B2 W' ?' N
<td>Row 3, cell 3</td>
# D8 @; d) M: A* h9 A" v</tr>+ a* T0 e8 m  T
<tr>
% u& y0 D8 E! S' ]/ c<td>Row 4, cell 1</td>
! `( O1 z  b' Z3 \8 d8 }! V3 J<td>Row 4, cell 2</td>
4 f  t' s( V7 P9 v/ F0 w8 R<td>Row 4, cell 3</td>
! n- j( L: f- m: @</tr>+ i9 J. R7 K# e* H! z$ [0 `
</table>: Q7 F, R4 |2 a1 C+ Q  A
<h2>一些隨意的表單</h2>
% e" S0 U+ N+ |/ j& }" Y/ [, s4 d<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>* I  U/ f) b- S7 f0 X
<form action="somescript.php" method="post">
8 e% m& g- h5 V; W+ M; B5 V<p>名字:</p>
9 k1 s6 A0 L4 R: K' K* h<p><input type="text" name="name" value="你的名字" /></p>
: ~1 i. Q; |) D5 F; I<p>評論:</p>
  ?' X' J# H6 E$ J, ~<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>4 W9 c  c+ l/ A4 j, A% l
<p>你是:</p>% ~  M& _4 D5 O* X1 S+ D
<p><input type="radio" name="areyou" value="male" /> 男性</p>, T; m- V/ `/ ^7 b9 @" ]: ^' l
<p><input type="radio" name="areyou" value="female" /> 女性</p>
6 q, P  D! n( H! v$ m. N<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
# P. k5 `9 w, c& I) Y7 P- Y<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
% E, o4 Z  V# N7 a8 B<p><input type="submit" /></p> <p><input type="reset" /></p>
7 a, u- O" ]7 j3 @. J7 W7 n1 F</form>
. h1 x. o+ F: I' o( ^9 b1 u6 X, ]</body>8 c* A  J: b9 p3 ]
</html> ! i% g1 Z, |' N6 f

2 G. u2 ~. I) j5 H% Z. r$ V: Q就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
: f/ S, q1 {9 Q! I  n$ m# l( c- P/ s1 P: \& n( A
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-1-13 00:01

By DZ X3.5

小黑屋

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