过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 $ q! X) }" M" K0 R$ m

& T' K2 {7 M- q* J表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
( f$ v' \1 i" V. v1 `# W" X6 d  e3 r( x- Y4 k
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
- t- X/ ^, z. D# n8 W) E5 c
2 s( N' T# x7 n0 {2 X實際用在HTML中的標籤有form、 input、 textarea、 select和option。+ R  y* u9 o) Z  }4 D
4 ~: o" |9 s( N' v. j* c" g
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。* d  V3 Y# m, q" g4 j+ E( i
9 g1 Z& x% P5 _
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。
( ?9 f" t: m3 {7 r) _' @( x1 n0 T7 M1 S) Z
所以一個表單元素看起來是這樣子的:; E3 O% C( h( [/ _( [

: E( @2 D8 T. x# K. K. d
: N9 e1 I% S0 x+ V
5 t& @7 ?9 R7 P( }! C* Q" c Example Source Code [www.cn-webmaster.cn]
1 |2 p# ~( U+ p+ g<form action="processingscript.php" method="post"> </form># B, M+ w3 ]. z3 \% A0 y$ o
+ {: a' z, i& X: K; m3 l! z
input標籤是表單世界中的「老大」。有10種形式,概括如下:  h9 G, ^2 t5 h0 n, S
& b; {" x. S/ j* V" O6 ]
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 ( J' E& _# M! e: k/ a) F
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。 6 L2 }# n1 b1 ]# @
■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
* |2 f  Y7 q! I1 _5 J8 I, \. R7 H■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。 % t7 X# p0 `2 T6 ?7 A
■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
4 G8 k% y: B) D  T3 `■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. & }3 x4 i" l9 d
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 - Q  a) }4 \: `+ z2 h9 T
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 ; i# M' z" M* J
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 8 ]" _  x! O7 K( o; Z/ M
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
0 T1 x' n% c+ a' w+ l! M注意輸入標籤input也是用「/>」自關閉的。3 p8 W8 |6 g( ]; k2 d

  i9 U( t0 a* H$ a% _! Q1 T( }: I多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:9 t( C8 ^$ \1 m( i+ C

* @$ t+ q9 P9 n  ^& a0 S" b$ f9 v, S# c& E
Example Source Code [www.cn-webmaster.cn]
- ~6 R( Z" j* _! e<textarea rows="5" cols="20">A big load of text here</textarea>) w/ U" v* r& M. a; o

3 P8 p/ A; N! ^選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
0 n+ E% p% Q3 B- k9 U
0 T" \' a# Z. J5 Z
, M, v* [9 e; q3 x# H9 R! ?, P, {+ H Example Source Code [www.52css.com]- x5 g( h/ Q/ U- d- q5 h
<select>
* j- L; V& {* ]+ y<option value="first option">Option 1</option>
: K. R) E( z/ d0 m5 E<option value="second option">Option 2</option>
5 c" J% L) l% L( J3 X9 o<option value="third option">Option 3</option>
- ]& ]  @' a) m) j2 n2 r5 A1 a</select> 2 i7 \- O+ D' W: [
/ W, q. e% F, v- A! L8 a1 }( h
當表單被提交時,被選中選項的值將被發送。
9 f, e8 m. v% t" k. f/ `; Y
6 i% G3 j+ m: Z. m8 f0 G* G1 N與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
8 P0 @* h  }# f+ t4 g) Z+ h
# ~4 ^$ z1 U5 }  L* x7 r! _: Q* N上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
$ M, a$ v# b4 ?& U! H4 n4 C$ o+ T4 M% _6 _4 c9 O: w& M8 n6 w
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
3 J1 x. F3 }3 W4 A) Y, T& s6 |0 e4 N' m# g

2 P9 p4 i- Z+ j* \- r9 C+ m* S Example Source Code [www.cn-webmaster.cn]
) m+ C3 |2 ^/ S4 N<form action="contactus.php" method="post">
* Z1 a) V: J9 S5 O( d<p>Name:</p>/ l6 l/ B; t: x. U& Z4 N' Q# E
<p><input type="text" name="name" value="Your name" /></p>) ?, G; ^7 q( l
<p>Comments: </p>6 ], H* F5 s$ ~2 j- ^/ b7 f, O
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
) q6 W5 ^8 g! @<p>Are you:</p>
, v& n6 e" A3 a* v3 l8 m. g<p><input type="radio" name="areyou" value="male" /> Male</p>
% v/ Z5 l! ~7 A# z" L<p><input type="radio" name="areyou" value="female" /> Female</p>+ C) b2 U. D. ?- P) U. a# ~
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
9 J' _. p5 s5 {& S/ [" G<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
# `1 y* A  d) K) Y! V; d) A<p><input type="submit" /></p> <p><input type="reset" /></p>
9 \& L2 w+ k+ F" J- F</form>+ C. ~! T/ g7 ^" n' p3 _1 m$ n" V

5 y% ~$ _0 z7 m8 j; Q在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
) J/ [% y! P/ R( ^$ D
5 d4 W5 M/ H5 g4 w如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。4 S& w. m; j3 d$ r

) Z# r4 X) [9 N1 }1 ^實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。( E  v( G3 b. V2 {* k$ B2 ?: Q' A

4 w& n# {! b+ E下面的代碼把前面所教授的綜合在一起了:
! |8 w. ?4 P' a7 ?
  S. |' t% r$ g6 e3 w$ {! L
2 e$ }) B  z( i, v1 b
2 t- f! G, y. p% u5 y2 T Example Source Code [www.cn-webmaster.cn]
6 c# _, S( M- U9 E- d- U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ) S& Q$ l' G, e( J* T( g. {
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
( a& \+ J: {/ h' c% i& z* Y<html>, h# I' \# x1 x+ J' H
<head>
* N) Y" z% w. g7 f* p$ J: M4 w# l<title>我的第一個網頁</title>
* @7 M, B4 }4 d; ?8 @3 @( J1 c8 L, a<!-- 順便說一下,這是註釋 -->
6 V4 r. W2 O( \3 g</head>+ f8 l7 i; M9 A
<body>
# X- D' [5 r4 ^+ ^1 e; k<h1>我的第一個網頁</h1>
( ~) M8 Q( Q; Z. z% M<h2>這是什麼</h2>/ C" }. Z. c* I& @3 B9 _! N
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>8 O2 I2 |- ~! N! {
<h2>目的</h2>
; E9 h! N+ f5 K5 V! _, f0 m  S<ul>
8 O5 u6 w; u# t: E; W* O, l<li>學習HTML</li>3 P( f! h: ]7 x" W/ y
<li> 顯擺,炫耀
8 z" ?' ^# U3 e5 i! D4 s! s$ r  <ol>
1 H$ }" ?# o( E" b, z4 F/ f <li>向老闆</li>( Q/ C& l# a  g& ^  X+ T9 G- u* r
<li>向朋友</li>! l# N3 Y# g* ]/ S
<li>向我的小貓</li>
7 ^5 n4 R+ ^" U1 o$ ^ <li>給我腦中多嘴的小鴨子</li>+ @6 `1 c8 q! ^  e  C
</ol></li>8 j8 N+ d- h$ Y% ~: {8 A
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
) V- ]: k8 s* ~" {" M</ul>/ ^: i/ L; v% i" D; T. B1 P$ M
<h2>在哪裡可以找到教程</h2>
# E; B# V; i/ L/ }<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># N/ c$ ?7 Y  W$ r- h7 i
<h2>一些隨意的表單</h2>$ q+ r; U& k3 g, B% M
<table border="1">
$ O% a# x, N/ r7 W<tr>
6 D$ T0 l$ J2 P! s1 S* R$ J0 |<td>Row 1, cell 1</td>% p0 D7 O$ Q) Q9 b: S8 k) i/ p
<td>Row 1, cell 2</td>
: |4 Z4 N- P3 j) [<td>Row 1, cell 3</td>/ G! g" |! d, [1 c! I# Z1 s  I
</tr>! K6 s: H' v0 t  n+ H+ h
<tr>
! f2 s- F# T: k! C: ?3 B# }<td>Row 2, cell 1</td>
1 O: H) _6 S5 I<td>Row 2, cell 2</td>
! j" ~4 S6 L) `( q' ]. i3 f  S1 A<td>Row 2, cell 3</td>
5 s: P' W5 P8 [: i0 n- A! _</tr>5 {  l$ \% ^% H0 p/ i8 q
<tr>0 {4 y1 C2 o6 m2 ^2 E% ^0 n3 D  h
<td>Row 3, cell 1</td>" N3 t8 @6 R& M8 I% C
<td>Row 3, cell 2</td>4 F/ k6 H4 e, Q% F
<td>Row 3, cell 3</td>
: \, h+ K& R& }* V</tr>4 j7 X6 x$ Q8 _# D, x) P5 ^& C
<tr>
5 Y0 \! R" G# ]1 Y! l<td>Row 4, cell 1</td>% F' s' c( G% }
<td>Row 4, cell 2</td>2 Q2 O% E* f* G% ~6 Q  A
<td>Row 4, cell 3</td>9 |' S* N# N) e, d% @9 e  k
</tr>
9 H( t: R8 x7 W* G# X* r</table>. b2 U& O+ J; R' L
<h2>一些隨意的表單</h2>
/ y; `- W$ o9 J$ H* n0 s<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>) C, c& W, _$ e1 c( q6 `: S
<form action="somescript.php" method="post">& Z/ k: T3 q; E& v5 o' L' F5 a
<p>名字:</p>* O1 l& ^# O0 h, e
<p><input type="text" name="name" value="你的名字" /></p>
6 k" e# ]/ J& f, b' c/ Z- y<p>評論:</p>
! M  c4 _1 s* Q8 D* ~<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>' u; t& {. Z  J. b$ D
<p>你是:</p>/ ~5 X* y1 \7 g- E4 t% G
<p><input type="radio" name="areyou" value="male" /> 男性</p>
/ E' M' _+ G, n<p><input type="radio" name="areyou" value="female" /> 女性</p>* s0 \% [5 q; k4 o% l5 e9 g
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
$ [0 q( S8 f0 d% r* a5 y. q$ C3 U<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>& S% b' L) ?" n: r- p. y3 X4 G9 u
<p><input type="submit" /></p> <p><input type="reset" /></p>
  w% }6 ?2 W0 c9 [' p</form>
# A% d2 |8 E  `  M8 O. f1 P</body>8 t! m' b8 v% ?1 o- H; H& E
</html> 3 c, ?9 p7 z3 i6 ]- p
4 w& o0 n! X+ }1 Z1 ]
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!8 U% ]( [3 k0 ^# X1 q3 ]

. ]$ `% [6 E, V  w感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-2-3 12:22

By DZ X3.5

小黑屋

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