过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 4 r6 }7 a; Z! G; p- w  y+ C# j

0 k3 f" t( @, J  G表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
' y8 N  T* }* Y) Z: _# g3 ^( G& p0 g% C! E9 Z+ s6 B9 y6 D$ i
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
0 j! r9 P, E4 y1 ^. O; x: y6 m3 J" q9 F$ [) E. Q2 Y& g
實際用在HTML中的標籤有form、 input、 textarea、 select和option。
, }  ?- _% \" R1 W' W$ F# G" Z- h! |4 G  _% C  T5 z0 h( l( j9 m
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。- a8 Q, A9 ~0 E8 J* S3 c" Y

1 M. \1 Y  F: |4 m  j/ ]2 H8 m. n可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。4 U2 k- E% r3 u) d

/ ~2 D  R0 ^  p2 `! P所以一個表單元素看起來是這樣子的:
* `/ Z; c" o9 p
2 n2 B, z4 H- z; e! [
, U3 Y; J8 a2 B+ u# Q5 [3 ?2 T5 S
4 h/ ^8 d; V' p4 ~9 N Example Source Code [www.cn-webmaster.cn]
8 T0 a0 p, W1 w<form action="processingscript.php" method="post"> </form>
* \# _- d1 R2 D! I/ F+ e) L! p 5 ~' i7 N2 P7 o4 O) p) `9 v
input標籤是表單世界中的「老大」。有10種形式,概括如下:7 i7 @& G6 z1 T# {3 R- Y7 J
7 \6 D: c( J- S* J
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
. m( ]1 S* I2 ^, p' b2 v6 q# U  j■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。 6 n5 P: t/ Q! \4 A& Y; V  Z
■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />.
8 Q8 j) V: \/ g8 \4 m# d■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
% k0 A+ U. ]) W; u■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。
; j4 h) @& R# M■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. / o: D' y# p! b1 Y* c$ J! [
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
$ m3 z8 i/ X, h6 l9 N; g# l* _■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
/ D7 Y1 x$ v$ J, _/ }( S4 p& Q3 g6 g, e■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 + O& s' ]" ?; E
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
( w- H# v2 M( E7 R注意輸入標籤input也是用「/>」自關閉的。
) D0 j( U$ j0 G7 C& Z, p7 S) m5 `$ h% E8 i4 S
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:6 y! |1 _* t3 M6 A6 [0 q2 ^) f0 U

; E8 [: B. n% }* O' `
. I" u' ]( s  T" ^9 ^) F9 N Example Source Code [www.cn-webmaster.cn]
# C- H, A: V1 i1 J/ I% i) p<textarea rows="5" cols="20">A big load of text here</textarea>
, f8 E. b7 r2 S) ^4 W
5 P# x8 s% a3 |' A7 d0 Z, {2 `選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
9 X, e, d" o, d; F" x
6 W; S" l: n5 @; r
* O! ~9 g$ X3 x! O" s Example Source Code [www.52css.com]3 P' z9 a$ h5 C9 @% _; B7 X
<select>
) T; k) j' P; z5 [<option value="first option">Option 1</option>( U) ?: h1 E" |
<option value="second option">Option 2</option>
* i, k% Q0 x3 b* D<option value="third option">Option 3</option>
( u6 G0 C1 l8 ~1 Y& ~. t9 t# `</select> 5 r! A" n4 z9 t/ |
3 l9 X6 ^- P5 r, l; `3 T
當表單被提交時,被選中選項的值將被發送。
" z) D6 C& i& Q7 N1 G5 Z/ V# l: p6 _, y, @# M
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。
1 y2 e5 D" B/ r/ P! X9 v% S# n! G3 @7 l1 n7 T) d9 t! Y
上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。+ c, f+ K! L+ \7 `4 g

7 [" ^, b9 t% V3 F3 n一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
: R+ Y. U5 g/ E/ z
# [) @! c# p; X  p" @+ G  M- O3 z2 D, ^" C
Example Source Code [www.cn-webmaster.cn]
0 [. v  n3 U3 l1 ^! ~0 Q2 ^& t' w<form action="contactus.php" method="post">- i7 c; j! W7 U; |7 Q
<p>Name:</p>6 V9 y, u- D: e% q0 A! s& U
<p><input type="text" name="name" value="Your name" /></p>8 F! e8 u2 D$ c( g0 \2 J1 w
<p>Comments: </p>* }3 n4 k9 `: Z; P# V
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
. R* |) E0 F  t2 Y8 u<p>Are you:</p># d. M% k+ `1 w9 w7 A
<p><input type="radio" name="areyou" value="male" /> Male</p>2 F0 _- [& Q" ~& U/ B8 w
<p><input type="radio" name="areyou" value="female" /> Female</p>
5 E1 h- d0 e( y6 e<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
/ @- |  t. r, Q/ i7 G<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
/ R" T1 v% A0 p; |0 v9 C<p><input type="submit" /></p> <p><input type="reset" /></p>
: Y' [3 ?3 _4 E! Y" r</form>, i/ q& q  v0 \+ i

( y8 T) G8 D" I在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來" G8 S# M2 D/ v5 G0 [* D! N
: g& V$ D5 h, l- i( r
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。$ e8 i3 U* ~9 q7 Z) N2 N

+ w9 d6 _- V) P, ]/ E& a/ E7 m3 J實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
# p7 O: Y2 L/ G( c; [+ o- w" I8 c% C! T1 l: X+ _5 F& b
下面的代碼把前面所教授的綜合在一起了:# y; k3 _8 t, y/ m, Q( K
; n' h0 W6 t. \( \# P5 v- p% @" q
7 M3 g6 |% l  r2 G8 H) @" r% I
! b8 e/ k  v( D' e, }: F; l
Example Source Code [www.cn-webmaster.cn]
- E5 {3 {: R( g1 B6 l% K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
' c  I6 b  R) L" f"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1 i- k! q3 U! I$ Y  i1 s<html>" B" k; H8 G0 m% f' {. y
<head>9 n3 Q/ O0 v+ W  v
<title>我的第一個網頁</title>  M; {% A% A6 S$ D- G  {& j$ x
<!-- 順便說一下,這是註釋 -->/ g( Z) j: Q7 D
</head>/ q; c+ B0 f. x" Z
<body>$ v2 k$ L& q' w) U8 {
<h1>我的第一個網頁</h1>
  J4 a+ L$ F* G- E<h2>這是什麼</h2>2 K4 H' F: m. T+ _9 @
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>* T6 }) n1 y2 Y) X4 ]* x
<h2>目的</h2>3 S" q( P$ B! m8 J
<ul>
% V% @1 @# d, L' ]<li>學習HTML</li>
4 p9 F3 |  K1 D2 }) Y8 z<li> 顯擺,炫耀
  U6 r. @& Q% S0 g( p  l/ h  <ol>$ y- f; k' L$ X+ U2 E% ~/ _
<li>向老闆</li>3 d8 T6 m" N- m5 N6 q' C
<li>向朋友</li>
( ~9 H( y- m& h <li>向我的小貓</li>. Z3 J/ t/ W1 _9 ?1 ^( S
<li>給我腦中多嘴的小鴨子</li>
9 P/ }3 [- t) F" B9 g4 A! } </ol></li># G, i4 A2 s5 J. |% o
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
7 ^$ X9 `2 Z3 W</ul>
9 l2 w+ G8 X; @" A6 X<h2>在哪裡可以找到教程</h2>  K& t; H1 H6 g6 V9 ~: D& r
<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>" T9 `4 J2 c3 e3 j9 z
<h2>一些隨意的表單</h2>2 t0 z; i# l* P1 K0 v' y
<table border="1">2 K9 V- T& d9 I  g! z
<tr>
. P/ I" J8 w+ z+ f6 p<td>Row 1, cell 1</td>, z+ i, ^+ P* x8 B8 j1 A
<td>Row 1, cell 2</td>5 m$ r" X0 H2 L2 m
<td>Row 1, cell 3</td>
1 N4 Z- n& X. `: \! A( ~6 A</tr>% V" W8 J5 S6 _8 T
<tr>
1 l1 j  X( p; c+ Q$ y0 T& P5 t- U<td>Row 2, cell 1</td>5 F9 ^! p( ?5 J4 p' c% u. {, R
<td>Row 2, cell 2</td>
" k2 X9 O  z4 s# r<td>Row 2, cell 3</td>8 |( p" m" v/ }$ F" ]2 e9 q
</tr>: y" O0 |: D: s! k. }# r( G, @
<tr>
# y: q# f/ m* Q% w/ U$ }5 i0 x9 r1 b<td>Row 3, cell 1</td>9 Z2 p/ A4 _: B
<td>Row 3, cell 2</td>) {! v5 ^+ ]; C$ J% V
<td>Row 3, cell 3</td>7 R0 r' R: p3 m. h
</tr>
4 B, `% i4 c* k% W! |<tr>" v, |1 J! B) H- Z
<td>Row 4, cell 1</td>
# V8 u4 _9 h$ O0 Z( I<td>Row 4, cell 2</td>5 H% P5 I  o5 a; B3 B; d6 O5 l
<td>Row 4, cell 3</td>
& P# v- [3 {& O  x! Y/ ^</tr>$ L* h* L$ j3 c8 G
</table>! c& [8 ?" T2 h$ o$ u8 f: z0 _: n
<h2>一些隨意的表單</h2>
$ |/ P( B5 d, r# g: i: @$ g2 m<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
" h: w2 r0 [% t4 M  R0 w$ N' L<form action="somescript.php" method="post">
: `+ i. i, O; D, Y8 `; X9 k<p>名字:</p>* d& |( C, Y, P) K5 O9 K& y3 j
<p><input type="text" name="name" value="你的名字" /></p>
6 o3 O  p. i8 E<p>評論:</p>+ w8 j1 J5 U4 ~/ e/ W
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
8 D/ Y. O0 ]' K; T* |  q' ?) S<p>你是:</p>5 c" ~* Y# A1 k& ~4 O% ~6 \8 q
<p><input type="radio" name="areyou" value="male" /> 男性</p>
3 e5 N  ~5 T! ]: }/ k. |6 G<p><input type="radio" name="areyou" value="female" /> 女性</p>
& ~2 o* I6 y8 U' Y6 L<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>! _, P; ?$ l2 I7 S3 I/ f" q9 A
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>' T7 h( H9 D, W- G, Q
<p><input type="submit" /></p> <p><input type="reset" /></p>$ X4 p8 Q+ V+ S0 ?
</form>. b7 W! R! Q5 Q- M
</body>
7 o" X: e' ?+ v- {8 K7 l) `) F+ Q</html>
1 o+ M# X' B% r+ i! H1 S) @( ?. [8 b9 d  |- T
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
- Z3 \' R$ y- t9 s  u4 A+ t/ ?& t; Q, E9 K
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2025-12-2 03:45

By DZ X3.5

小黑屋

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