过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
- ]- b" r! \9 p, }+ r
6 z, r$ v9 D6 L5 {( b! e表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。) ~% M1 F4 |, h0 @
  e" n$ X9 n% H& ]5 i
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
) W4 w9 e, ], u5 Q3 C) {+ `& H
: a; {2 c  S# Q實際用在HTML中的標籤有form、 input、 textarea、 select和option。
3 l4 b" x  Y. \3 z8 ]3 ]: x- e( p
, a$ d+ C, U, }7 j' C* w( R表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。0 O- F- g) t& G) }6 a* `, V* {

3 Q3 d6 o1 P+ |/ q% e# a7 ^可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。( N/ P; ^. `* a7 M0 Z1 M" f4 {3 A2 L- g

  D2 F& u' b& D! f/ a所以一個表單元素看起來是這樣子的:# G, A6 g4 z& w" `/ p" S- H

" Y* I" D& V7 g( s' i' k
6 G4 E8 b. b5 x: o& |; n9 w$ k5 |& [5 a! z, y4 S
Example Source Code [www.cn-webmaster.cn]/ X# x# K9 b- S
<form action="processingscript.php" method="post"> </form>7 q9 H; t3 {2 H. b

9 ?) B1 p2 W; o1 C- }! Sinput標籤是表單世界中的「老大」。有10種形式,概括如下:
% M* y, L8 Q+ o5 ~
) t- V3 L  }1 r% I; {/ u5 b) F■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 6 r1 o1 V2 A7 i$ G' G7 G; k7 q
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
2 L9 @, d' a5 T$ [# f- U% l■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
) e8 g- I! c' Q/ B" p■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
* `: R/ ]/ P% B* ~! E* X; {■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
  d) D/ N- U& k, j5 B4 x■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
5 x( P& ]% ]8 j0 T■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
8 t$ ?+ r1 T4 Y) |& \■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 5 E7 U# Q  k1 c
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 ' G5 L& j3 H; k$ T! R
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。 8 U& R. u" G: D, u1 C1 m
注意輸入標籤input也是用「/>」自關閉的。
& M' J; B2 L* T4 s0 _# t; _& w! a1 j# p
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
2 r  D" g4 |$ B" b4 T
8 ~# r7 a+ Q  I$ F8 W, v) k, c* @+ u3 B
Example Source Code [www.cn-webmaster.cn]
, Q  k( C& Q  ^1 T  O: K. c9 Z8 R9 T<textarea rows="5" cols="20">A big load of text here</textarea>
. f# O- |" f, T: ^9 c% U0 V! v# l$ g8 ~" e4 G. L
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
) U) o& E; d3 u) I. J8 @1 K
( W! L& @3 Q( C2 F  F
  h) |$ o* E, G& f* S2 @% K Example Source Code [www.52css.com]
5 E- ^# W3 `5 C: L: O! h7 ^<select>. I7 T' j- e: f$ A# `: a+ _" y
<option value="first option">Option 1</option>! N- k' H8 B; q
<option value="second option">Option 2</option>
+ ]; @3 n' w& u6 S, h4 W<option value="third option">Option 3</option>, M2 ]/ v6 b0 E$ N/ ], y
</select> 1 b- @+ ~, h2 h

( H7 f* G- t$ {- f2 Q當表單被提交時,被選中選項的值將被發送。
- k+ V  z$ Y# W& l; t2 C
; {! i' G* ?5 X$ q與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。6 C2 l8 p& N; R; D3 X5 b5 a
% b9 r$ f" [9 V" n& G% |; D
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
2 S  r! |! x- v2 o6 f; e4 T& E
6 q+ h2 p1 Z& A# E. }5 l+ J一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
) Y7 a( o) q5 ]4 L, E$ Y( g' U0 q6 v0 J" E

1 }4 J$ q7 ~) S/ l3 _ Example Source Code [www.cn-webmaster.cn]
2 ~0 e5 l0 F2 |1 l<form action="contactus.php" method="post">
1 T6 A: b9 J( s<p>Name:</p>
3 l: N' h, C0 m5 j0 z9 m4 P<p><input type="text" name="name" value="Your name" /></p>, ~# X8 T7 k& @+ A8 s& C" E' ]$ C
<p>Comments: </p>: s; m3 {# L- Z2 n* i( s* z
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>2 m6 C# {3 N. Q; e6 k
<p>Are you:</p>
0 S% ?7 S3 R$ K( e# m- Y<p><input type="radio" name="areyou" value="male" /> Male</p>* O& `/ |: h! ~3 [$ C) e
<p><input type="radio" name="areyou" value="female" /> Female</p>
4 @) `. W3 x3 k0 ~<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
* P, i. @7 k7 g: b<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>' d! R& Z7 W0 X0 B
<p><input type="submit" /></p> <p><input type="reset" /></p>% X8 F1 p1 Y$ O3 \! y. f& J
</form>6 e" b# H" B% f" ?: a  g+ e
% {& ^+ ?: Y+ p. B" |# P
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來) x+ |# ~; l5 J. V3 w

2 ~3 ]) E6 P% P如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。$ C8 ?* w8 L9 }7 x
# R1 M. l7 S* X5 r% b9 l, O( `
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
, {6 s2 f3 ?0 w7 V
3 \, n- f" E1 Z5 \  q5 v6 r下面的代碼把前面所教授的綜合在一起了:" Q6 q# I, W; k( E( T  Q

( f; E. T9 Z. j* ^! b% I
  l" Y" [" b6 R. ]8 E# E) m" W  {8 P; n/ k
Example Source Code [www.cn-webmaster.cn]3 O  ^6 s4 S7 ^7 Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
' ^: |% X- L* `"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1 U% ~7 T+ M8 e<html>) Y) P. O. Q  v
<head>6 F9 P: ]' l1 L$ `5 {
<title>我的第一個網頁</title>; T6 [5 w" j( c( ?" H: l# ^$ b
<!-- 順便說一下,這是註釋 -->: Q/ |* V- P3 B4 I: u
</head>
0 _. ?- L9 ~9 b<body>$ O# d- a0 R0 [
<h1>我的第一個網頁</h1>5 T6 h4 M8 M% i( a; B
<h2>這是什麼</h2>
& ]. Y- D; d: W<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>$ G0 M6 N" P! _7 z2 J* e# \3 l0 R( J1 l
<h2>目的</h2>
" O7 G0 o, @+ F, U, {0 G1 n<ul>' ]4 k$ ^, i  x2 W
<li>學習HTML</li>0 W6 R: \' c0 @8 a% |
<li> 顯擺,炫耀 " n4 u6 A. T+ \! F$ L+ W
  <ol>: d* Y/ E5 l% d
<li>向老闆</li>$ s5 a' C; m- D
<li>向朋友</li>
$ M4 f2 L7 e: H# M' k; U) { <li>向我的小貓</li>) r! F7 d( e$ x/ W& ]: F
<li>給我腦中多嘴的小鴨子</li>! Q$ V8 G3 d* i5 y8 D7 q; }  v
</ol></li>
- |- ^& d9 R4 ]/ |9 {1 g<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
  m- \  {! [& Y+ b* a9 ^" Z</ul>% m9 `( ~  S# a( D; K$ U3 e
<h2>在哪裡可以找到教程</h2>0 F+ D0 a2 n5 ^$ q0 H
<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>
7 t1 t6 D, m+ V! h: P5 ^* u<h2>一些隨意的表單</h2>
7 i% J% a1 o- ^- M<table border="1">+ h$ s  j0 \# U, n3 S! i& z! W
<tr>) @7 R* W% k$ o9 t
<td>Row 1, cell 1</td>. S0 T) N% a* y6 R2 B
<td>Row 1, cell 2</td>0 j% p$ C7 m9 m8 T/ X$ U5 _
<td>Row 1, cell 3</td>8 V% s/ `+ s0 R( S
</tr>
# C7 L% C6 ^7 P! ?4 t5 ~8 z<tr>  J# i. u0 Z) T; r( Z: I
<td>Row 2, cell 1</td>5 l% }" B/ f1 H/ s1 @9 R
<td>Row 2, cell 2</td>! F% l7 g1 I7 u5 Q
<td>Row 2, cell 3</td>
0 ]6 O" ?/ P* i& W4 X- q" v</tr>7 n. P! J( B% r
<tr>
! f1 f5 |7 B4 o% Q<td>Row 3, cell 1</td>
- ]# {4 ^7 w/ s* D) U1 H<td>Row 3, cell 2</td>
5 g, a- T$ p" S2 ?- J! h! q<td>Row 3, cell 3</td>
* z! V5 Z3 H: _3 O7 d</tr>
9 P7 W. C7 |* `/ X) E<tr>
  f8 y9 \  G4 g4 x/ x<td>Row 4, cell 1</td>
4 v$ K8 v0 l2 k: q: l" X! I8 ]$ B<td>Row 4, cell 2</td>
4 Y  T. `8 l' Q1 e2 U<td>Row 4, cell 3</td>
3 g; i/ f* y# c2 u2 H</tr>
* I1 x8 N5 E! P3 m</table>
" s  n  ^, r# e8 w& Q8 x3 Q<h2>一些隨意的表單</h2>
( s/ M. O4 W9 c8 V) F<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p># J4 x: t( g6 k& C/ j+ n1 q
<form action="somescript.php" method="post">! U0 {( n5 M9 n% t: U
<p>名字:</p>8 w1 |' w1 P- d9 A. }
<p><input type="text" name="name" value="你的名字" /></p>1 f/ W2 ?' O, `3 v6 O3 [
<p>評論:</p>- t0 m- X- F# J6 V' b: a. v& l% b3 l
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>9 a( |5 d: I$ d( Y6 I
<p>你是:</p>2 |8 Q  Z* M2 N; D, i; s; X
<p><input type="radio" name="areyou" value="male" /> 男性</p>
1 t6 v$ T: y; R2 n' F7 S<p><input type="radio" name="areyou" value="female" /> 女性</p>
1 O9 b3 I) K+ @<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
4 x. V: V6 a4 T! g<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>5 }8 `# b- J# ~( j" @( ?" Q, \  C' h
<p><input type="submit" /></p> <p><input type="reset" /></p>
5 D0 x9 F: I' ^* t</form>$ I( J. W7 f7 [( W3 a
</body>
; \# u1 f) j5 ^7 F</html>
- Q; z8 H" U5 X7 p# v8 s" }( @. ^( y" ~3 {3 z$ y6 o. q
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!! `8 B  h' N+ H! ?$ r4 ^
) h) W# @' \6 R' x5 F/ n# T
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-1-16 18:28

By DZ X3.5

小黑屋

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