过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 $ K1 ]( O. u( p) U
- i& y) y: }+ K. K; _1 v
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
- C* A, k1 k8 m7 C
; V/ X! h9 E2 h: S' r表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
; x8 F; I, W; {+ w  L1 I
  _2 R9 W' T% ~7 A8 t4 d6 n實際用在HTML中的標籤有form、 input、 textarea、 select和option。+ H6 D2 Y+ M5 A2 ~3 x- X0 Y
! h- r7 O; @* |5 A/ ~" F, o! B5 l4 t
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
- F2 p, @  O7 ^; B2 a, V+ E2 s( S* k  `+ s$ p: i
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。" i2 `  e5 \" t1 J) r! w9 }: N

0 [6 e, x) O9 |7 i6 g% l所以一個表單元素看起來是這樣子的:5 c6 W, O6 ]/ X# X# x
! Z: H! K$ k; u( u& p1 k; `

! J5 o" j; q! b1 u  l) j" |& i' A: q0 k" }& X
Example Source Code [www.cn-webmaster.cn]
4 O6 N! D! C4 g  n( s# }<form action="processingscript.php" method="post"> </form>" t) k" h( |  v" y) S
! w* |! E. S6 p/ h% q
input標籤是表單世界中的「老大」。有10種形式,概括如下:
+ C4 ^& ], u2 D8 r# u
3 U7 p: ^4 ?( E+ M! J■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
0 u6 p# c; T- v■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
  m! w9 K' h0 Y; V5 f3 ]9 {5 B, _: T■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
- O  Y! `& C. Y7 ^9 t■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。 - }- V' k$ T  O0 g( V, d/ H* \
■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 ! x- s; M0 {4 Y: \% c  e
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. ' B4 w* `/ M$ s: L
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
6 E  I: ?: ?9 n7 k■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 . }3 m! B5 l) \& ^1 m4 R
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
7 i$ t4 K0 t) V/ h% R7 M■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
4 }+ J& z- o7 X  r' K注意輸入標籤input也是用「/>」自關閉的。
" @7 [7 ^: e3 v4 M4 ~. q; M* u7 r# H2 p
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
2 B; E5 d. e! F8 ~
0 k. k6 ^5 \! T& C7 E! y4 S* k0 a, S( g/ C, W* P; F
Example Source Code [www.cn-webmaster.cn]
7 h% n! k& m# b* s4 r0 S9 X& w<textarea rows="5" cols="20">A big load of text here</textarea>
2 W# p- P; C+ B: M( h6 p- ^9 V
# j/ _% g% z% I1 s6 }  _選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
( e$ R: U* j# o, S  ^6 k1 s- a1 W/ E3 Z
# o8 U7 Z1 Q) j$ [3 @. I
Example Source Code [www.52css.com]
( B! A$ v9 n1 h# P5 t<select>
. n# D, C: G% w9 C<option value="first option">Option 1</option>: v$ Y# |: S. f" t8 M, b; e
<option value="second option">Option 2</option>9 E  N# d7 `) r( M
<option value="third option">Option 3</option>3 _4 a4 M( [  }7 M& j- U( o! I
</select> ' Y0 e6 a$ ?9 r$ F! b* B

" m' j' e# }- r& D- g當表單被提交時,被選中選項的值將被發送。
  k) y0 Z8 A8 M$ |4 i0 M
* b/ Z. [/ z& f與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。* H) d3 b+ l" G$ o& y: ^

7 x) u, g, k- y3 q8 b" T上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
. M0 \1 x. i4 A4 S+ \# V3 f/ A5 e& l' F
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)( Q; D4 l, [- ?) l+ D. F
% ~0 G! g/ N; j$ T6 d

- U3 Q( P2 Y) e& {; g" T! [ Example Source Code [www.cn-webmaster.cn]
4 o& A$ i" ]: U; W) _, n5 [<form action="contactus.php" method="post">
/ R0 t' q8 _% c+ }7 N+ g, {<p>Name:</p>
1 D3 D1 X/ D& w  R7 ]" }$ e<p><input type="text" name="name" value="Your name" /></p>
- V2 M4 w1 h5 K; I- Y, E8 t1 l<p>Comments: </p>7 h) F" M- {; ^  j4 K. d/ w8 Z
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>$ f3 T3 a1 K* r" V0 ~
<p>Are you:</p>
( A; M* n( D: _% T<p><input type="radio" name="areyou" value="male" /> Male</p>) u3 {. Z" h; }. h5 z8 p4 c
<p><input type="radio" name="areyou" value="female" /> Female</p>9 w0 g  z3 `/ h7 x  q
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
: \1 `5 |1 J6 [7 t# a/ T0 M2 B<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
! M! W+ S3 ~- E) ^7 g" ~<p><input type="submit" /></p> <p><input type="reset" /></p>
  H6 a8 O8 P( ?% D  B0 p</form>
8 Y6 f7 ]2 \* H8 U* [# k 7 X5 p7 `8 C* l1 L, h# v- X4 y; b
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
; r0 I* i# o6 l, Y' ^8 r/ F" J
$ s1 }9 J# F5 [3 y$ @4 X# l) `如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
% A8 k, a7 Y. @& B& p% m* S
  H! N( ~+ |3 G! p實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
3 N* Q% j( C1 y
3 X: j% n, m! E0 {  a; y7 p7 O下面的代碼把前面所教授的綜合在一起了:! u( @4 H; V. d3 |* E7 k3 c
: t3 v* b% \/ N8 K, i. N& W, G# _
# r4 t; b6 `4 [) Z$ N4 d# ~
  F1 M0 Y: t! x) B/ \
Example Source Code [www.cn-webmaster.cn]4 b( A" _% f, {( s4 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 7 J- J4 Y$ u: }6 Q0 m
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">; [6 |9 y6 V3 n3 l6 F8 x6 q# D
<html>
7 E: d5 q. l: ?9 a9 a<head>8 l9 F9 N; k$ n( I. ^/ L  k2 v
<title>我的第一個網頁</title>
8 k4 _: z% w% q& k2 W. R<!-- 順便說一下,這是註釋 -->( ]3 K+ a- }- b! B# b/ I6 l( b
</head>% n; U! v3 H: H, K: q7 |; }
<body>
9 y" F* _1 ^# A! H/ p2 N$ t6 {<h1>我的第一個網頁</h1>
7 n& V/ E# o. e) j- Q5 u: j! ?<h2>這是什麼</h2>, H' m8 m6 y' G' H3 Y; Y
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>  E; H2 o3 [" Q/ ~, m
<h2>目的</h2>$ ~( e5 v9 @# O- j. J$ f
<ul>
1 f/ U) H, O+ S3 w6 }9 K# m1 C* V( Q<li>學習HTML</li>
' a4 m+ T9 O% B6 G) X% f<li> 顯擺,炫耀 . d5 H" h0 ^" W! \
  <ol>
. u  W+ y+ H6 _8 Q <li>向老闆</li>
* r% @7 T* f( H4 e6 [. o% ~; H <li>向朋友</li>
% U+ w8 p) ^) i9 W <li>向我的小貓</li>
* A/ p) ]+ q* L/ M; E' }! C <li>給我腦中多嘴的小鴨子</li>
( q5 ?+ S9 L4 H </ol></li>
3 `; }$ `' O( o) B/ z- i8 O8 A<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>5 q7 [. v. ~, w0 N- V
</ul>
$ S* R3 ^- E$ [6 R/ O6 e6 A9 X<h2>在哪裡可以找到教程</h2>3 l. X! `. u3 h6 V
<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>
4 u# I) m0 g0 c<h2>一些隨意的表單</h2>
' v; y  i* t( W+ ^) N# H<table border="1">+ w, v0 |% |# L3 A7 m8 R
<tr>3 @9 \; v1 g- g. x
<td>Row 1, cell 1</td>
0 Y$ i/ ^  V2 Z, n<td>Row 1, cell 2</td>, \5 e; v; r( O% P. j, F& q
<td>Row 1, cell 3</td>
5 z# Q% B( L( R</tr>
. }. U4 k+ G& w. x+ M<tr>
; T7 K% z( b3 p9 s5 L<td>Row 2, cell 1</td>7 T  u5 u( a( s5 E
<td>Row 2, cell 2</td>, Q0 J5 {- |; `5 E
<td>Row 2, cell 3</td>
' J0 n9 [, L7 u+ X) T</tr>
% s6 F6 Q: q8 ~+ L& U& q<tr>4 u7 o3 l+ K, L, J' M7 p  Y
<td>Row 3, cell 1</td>4 l0 R4 T( {# t( b& b- X
<td>Row 3, cell 2</td>
" o' H  l/ n( N# O+ O  r<td>Row 3, cell 3</td>. x8 j$ X- ~6 k8 \( [# U
</tr>8 |3 |* U+ y3 H7 F/ Q
<tr>7 m" W7 H: B# F2 R* M- y! D1 x# S
<td>Row 4, cell 1</td>
8 ]6 f* |5 i' q+ x4 f! E/ D<td>Row 4, cell 2</td>
, w. _3 G% F4 r. J2 |5 L<td>Row 4, cell 3</td>5 a7 H0 F; \$ i/ L3 t7 ~
</tr>
6 r2 A: ^7 f2 i$ t" _  t1 N</table>
: n" u5 h; H/ M. `/ o<h2>一些隨意的表單</h2>  \0 ~% `1 f& A4 v) H8 |1 r, z
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>" y8 g, W' j3 ^' v- h, ]( k
<form action="somescript.php" method="post">
4 \* C' ^6 U2 f, E# a& T7 V<p>名字:</p>
6 V  U/ C; x( X- b- a9 u) p/ r<p><input type="text" name="name" value="你的名字" /></p>
! s$ X' _* Q- X5 t<p>評論:</p>
7 ^2 ]0 I$ |' \( }' P. ]: b<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
8 M) |* h, p. k$ K! Y0 C% @* ~<p>你是:</p>
5 f  a; z4 v" {! v<p><input type="radio" name="areyou" value="male" /> 男性</p>" j/ b/ T2 g7 s- X) K1 N* S  {
<p><input type="radio" name="areyou" value="female" /> 女性</p>- w4 p* N/ [9 D7 g
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>8 G; ?( |9 W6 P9 E
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>! t+ `0 H7 {# ~# Y
<p><input type="submit" /></p> <p><input type="reset" /></p>
' E" p! C9 ~6 f/ L0 L</form>- e& J" [; c" E$ J
</body>) R# S3 _7 @  C
</html>
, g$ a. q, i  Y/ E  q5 \8 g8 [. ]# ~2 o6 a$ C  J6 P+ D
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!. X% y) [9 _) f5 m* _
. t( @: f5 F6 T& h4 l
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-2-5 15:15

By DZ X3.5

小黑屋

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