过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件 ) V, b4 y0 e" ?! E5 M

8 A& s' B6 [/ X3 u7 T表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
. ^6 h" J  ?* d! s  P/ ~! h$ f+ w3 O
表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。
! ?2 \7 ~# ~% ]8 [
  x# L% |8 y- e3 L* y實際用在HTML中的標籤有form、 input、 textarea、 select和option。  R' o* k1 B0 c$ a
! h# w$ }( r9 v  }) p) D( @$ [
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。9 Q3 A5 q/ D0 v) D' _4 J2 p, s

+ A4 F: {9 Q# Y2 `7 u0 C/ Q可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。; a, ^. U5 o2 O# n- l

- V( u; A' i8 l$ j所以一個表單元素看起來是這樣子的:
* d. K3 Z! G. K0 A) Q: ]7 _3 n
& G: Y. }! Z% b6 U; M1 E' U+ T8 l8 s0 Y: k
! g- I5 P) V& r
Example Source Code [www.cn-webmaster.cn]$ }- k1 M- d- J- Q! H# H& P& n
<form action="processingscript.php" method="post"> </form>" [2 c: ]( h* X

4 A$ l2 o, A9 a% ~input標籤是表單世界中的「老大」。有10種形式,概括如下:# M% A7 B2 m( Z3 _
, ^" P( r. r' a+ R8 u' X
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。 + i- U6 `- f5 i8 D
■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
6 g  Z) P/ G+ g, u& V  `+ r# A■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />. : V8 K; m) F) B" S
■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。 0 @8 b/ \9 Q) y. B# V; N
■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 ( o: G5 S$ s7 Z& ?: y; W( y5 `
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
: s: n! |+ c2 Z! ?4 z+ @7 c3 I■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。
8 D8 y# m' i, T. ?1 u/ |# t■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 0 q8 D3 o0 j( T# h6 O; C+ R. l
■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。 3 v3 u  N6 x! ?3 o" d0 S
■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
# s( W, ^' k5 X" B( |  c注意輸入標籤input也是用「/>」自關閉的。
( q2 u$ G1 n  G/ o  t( n( l* ?2 k( G$ |5 Y4 v5 z
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:1 E7 f& d! r: C+ u& K$ f3 l
- j1 X& s( Z& m% m# w

. W* ^% `! a; J4 `8 n Example Source Code [www.cn-webmaster.cn]
+ `5 H) V& X8 _. x+ ]<textarea rows="5" cols="20">A big load of text here</textarea>  R/ A* M) W( y
; Q  h9 s$ i+ v& e
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:) P0 p7 C: [8 k9 J% V4 S& T

1 Z9 X! {  j1 W. v7 L
% i2 @& N* A' l7 b/ e% Y Example Source Code [www.52css.com]) Q) L9 E" N) _. H# `# K; q( z7 t
<select>* r  q5 [0 J& C9 |
<option value="first option">Option 1</option>
; o( s5 O4 L* T$ b( k<option value="second option">Option 2</option>
0 C: W3 U- T$ Z. W3 ]5 b0 g  x, Z<option value="third option">Option 3</option>+ j! i8 v1 Z5 W' i1 y, `' Z
</select>
) Q4 O& V  `) Q8 W
  O* f/ d5 `; @9 F( f/ n  j+ s當表單被提交時,被選中選項的值將被發送。
9 d! ]: `" r1 k% P( V' P+ ^* ~# i6 \
與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。: h7 |6 z' L% H

( V; ^& e" b7 G0 \7 \0 m上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
# [: l- w( m8 y4 e' ]% J- m( Y! |1 }9 N
一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
) Q2 X7 w+ S7 I7 N% P& \2 y, h) U3 [" z" R+ h! O+ B5 C- P/ T

. s/ z& N# d! H' X5 W' ` Example Source Code [www.cn-webmaster.cn]. X: M" x1 G' Y. E! o4 u
<form action="contactus.php" method="post">
6 p& p8 a2 M2 r: k) O; I! p! m<p>Name:</p># S6 ]4 v7 {2 ]! B/ s
<p><input type="text" name="name" value="Your name" /></p>
* O" q* C1 i' b& |+ A+ i, j<p>Comments: </p>; a7 b4 m. k9 j. p( g
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>7 e( N: U4 h. y2 D2 X8 o5 v
<p>Are you:</p>
9 {& x$ X# a; L9 J<p><input type="radio" name="areyou" value="male" /> Male</p>
. Z& s0 b  M( V$ {! u<p><input type="radio" name="areyou" value="female" /> Female</p>% D0 ?4 a' B, h/ @) w
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
, \/ @/ ?: x5 s/ |8 P) c<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>/ ?& u0 g, f' y9 U' ~6 q6 C( o
<p><input type="submit" /></p> <p><input type="reset" /></p>
9 X# P, f$ [% ~$ j</form>3 q1 n4 C4 G. l& [

5 D; R; o. A7 R& m; u. s1 X7 H在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
8 A- Y3 b: u6 a2 k; ^% o3 e' P' y4 i+ X. O+ \# L$ r- C( b; b
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。9 R" v3 h; t7 g6 D4 `/ ]' d
) H7 Y! o# d7 S% r) p& o
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。& K3 U- X4 {* T
2 p7 S# ]( t; {3 d7 X8 S
下面的代碼把前面所教授的綜合在一起了:
, {' \& r3 _: C6 n* l1 g$ i9 {" ^0 \# x1 u+ d# ]' Q' s! m3 d7 N

/ ]( ~+ r+ @% B4 B3 X$ }0 y; `' o
Example Source Code [www.cn-webmaster.cn]
$ u& P! h8 q: c: x$ Q" \+ L<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ) z5 W" a8 P  y
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. E% g- @1 g- W* H
<html>9 F/ ~  v+ f6 d
<head>) [9 n7 h9 D7 M" R9 F
<title>我的第一個網頁</title>2 t+ t, i" X- T: x9 y
<!-- 順便說一下,這是註釋 -->
# Y1 o) A# x' Y' M9 [</head>
6 j- e9 Q+ C7 D% H; d$ z& Q<body>
1 s5 w+ s1 p  A" s, q- n/ |<h1>我的第一個網頁</h1>
/ |/ o9 F+ L4 u<h2>這是什麼</h2>
& z  {) ?, f9 ~2 A<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>2 q0 G5 O2 o3 A1 }+ e
<h2>目的</h2>5 R- y' B& S5 V
<ul>5 K' j6 f# R$ R2 t$ _* B
<li>學習HTML</li>
9 @% D$ w/ U4 F7 _<li> 顯擺,炫耀
0 g0 x1 {  B; V; R  <ol>0 p, z! S& J' w) |- A" h; Q
<li>向老闆</li>
% j8 W) n6 s: e <li>向朋友</li>
) N+ p! K" f! Q* }* x8 B <li>向我的小貓</li>
1 I7 B: Y+ k; l$ u7 N, c <li>給我腦中多嘴的小鴨子</li>( `, n2 t) o* H+ l4 \. F$ O
</ol></li># c; g1 x, W6 [6 I
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
, M& \# b7 {+ \' O</ul>
! B; [$ l6 e' \/ y2 R& B5 U: }/ r<h2>在哪裡可以找到教程</h2>; L2 ?0 \" y% W# Q
<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>
  \5 w. ~2 r% Q) Q! T8 b$ H6 r& D<h2>一些隨意的表單</h2>
" u& Z6 m; ^( O; |' Y  L<table border="1">
0 I3 A6 s! Y: Y" E; X8 y<tr>
9 _) N, f8 ]/ v/ `+ K4 D3 q7 b8 R<td>Row 1, cell 1</td>
3 o1 ]3 E) v$ Q8 t$ _7 c6 v4 Z<td>Row 1, cell 2</td>4 c* g& i0 v3 M- T4 c" L6 E8 B6 g  z
<td>Row 1, cell 3</td>
7 M, W4 M: k4 j7 B</tr>
- f9 E' M3 Q+ B3 @$ G<tr>
5 Z, @; D# w0 r' ]& ~<td>Row 2, cell 1</td>
' P6 |$ w; q2 R" x' n8 g9 W) J: m* R<td>Row 2, cell 2</td>
# X- {/ c0 {% L  [<td>Row 2, cell 3</td>1 v/ C3 j  s5 W5 V- t
</tr>  Q4 W* V0 |( G8 c, G8 L1 o
<tr>5 `$ d8 f3 S2 Y. w; C' m
<td>Row 3, cell 1</td>4 d; @# S2 v& R3 ^
<td>Row 3, cell 2</td>0 C3 b/ ^4 y, A9 |
<td>Row 3, cell 3</td>& ~4 H" ]7 B' h) ^0 C% |3 u9 M, J
</tr>0 \3 V# N7 r& S1 J! H5 C; v
<tr>
2 j; ]( d- E. N<td>Row 4, cell 1</td>6 y* }& M2 _3 W
<td>Row 4, cell 2</td>
/ i& W- u* j5 k4 c3 y. M<td>Row 4, cell 3</td>( h0 K& P# Z/ d) S5 c+ H
</tr>
6 |% r7 ?/ Z- n, I& A4 r. _9 f! ~</table>& M: `# R# _( I4 a& p
<h2>一些隨意的表單</h2>
, a* v$ F2 P4 ]1 a<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
% X9 q* A, e9 t; D8 s$ d<form action="somescript.php" method="post">
2 u+ e5 L  L6 j- e( }! Y  |0 w( A<p>名字:</p>
: {# z: s; j) Y8 l9 {/ q  s8 \<p><input type="text" name="name" value="你的名字" /></p>
, U8 s# r# \# W" ~$ H1 a<p>評論:</p># v7 t& p/ I3 B/ t3 k7 I6 W
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
6 b( z. V' }6 O4 ]( g/ \# U<p>你是:</p>
5 u: w0 L, _/ i( D9 C1 w<p><input type="radio" name="areyou" value="male" /> 男性</p>: {$ Y8 ]* W7 _" H" g- S
<p><input type="radio" name="areyou" value="female" /> 女性</p>
2 @6 Z" w; s+ T* r  W: Z  `<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
# Y; m2 `. l: d6 M' ~* [<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
1 m% N% x" L3 M9 O; j0 Q<p><input type="submit" /></p> <p><input type="reset" /></p>6 U, b3 K- h8 r* H1 }# x7 k9 Y7 }
</form>
/ g4 v$ R: n" o3 z</body>  q8 B  V# ^" I! G" W
</html> / P( {) f2 y5 Y$ j& Z4 d
: \1 o1 z: V4 L- {
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
. z5 V0 M: S" `3 \( n9 d6 |* M' o7 f/ A* m; o
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-2-9 09:22

By DZ X3.5

小黑屋

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