过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
 樓主| 發表於 2007-8-25 17:38:38 | 顯示全部樓層
10、表單form ──文本框和其他由用戶輸入的構件
2 z4 N! r1 D4 i8 p$ V( b+ l& L( u% _. X
表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單——用戶輸入信息然後發送到Email中。
4 Y( [5 m, G# X5 u
* r% i; w: f+ K  e7 }5 }表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡服務器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個服務器端的程序使一個發送到Email的表單工作。% ]8 ^: P, U+ J% y* ~) p4 H
0 j1 W. `' C6 @( A' i- k
實際用在HTML中的標籤有form、 input、 textarea、 select和option。
1 |' f. J; x3 y; S5 l8 K+ l- j7 J' B7 O3 a
表單標籤form定義的表單裡頭,必須有行為屬性action,它告訴表單當提交的時候將內容發往何處。
, C* i/ `9 [9 ?/ l& B' Z5 c. _+ z5 K! i
可選的方法屬性method告訴表單數據將怎樣發送,有get(默認的)和post兩個值。常用到的是設置post值,它可以隱藏信息(get的信息會暴露在URL中)。: o& @+ d" T- @- e& O. J

! i1 W, X2 K0 v( d% W5 l' u所以一個表單元素看起來是這樣子的:
% D" |% @6 |- Q) y; J* n- N/ f$ U# q+ h* p" S; R

, o* C( E" @; u7 `# e" N) l2 S# i2 q& \1 S( V9 U* W& Y
Example Source Code [www.cn-webmaster.cn]: e- r( c1 Q7 n1 @9 L. T6 M
<form action="processingscript.php" method="post"> </form>5 X( B* |! Z6 _/ V" R

5 }$ `, c: m% p4 o+ G$ s, L% `input標籤是表單世界中的「老大」。有10種形式,概括如下:
, p* o6 f" `* H/ U9 [$ Z  P9 R/ K8 e! V5 o1 a/ ]9 n
■ <input type="text" />是標準的文本框。它可以有一個值屬性value,用來設置文本框裡的默認文本。
. \4 J  @  c! o■ <input type="password" /> 像文本框一樣,但是會以星號代替用戶所輸入的實際字符。
  N% Y! u" S" q# f. K7 ^* X■ <input type="checkbox" />是復選框,用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked,像這樣的格式<input type="checkbox" checked="checked" />. , Q* q: R- T8 J! R. J
■ <input type="radio" /> 與復選框相似,但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked,使用方法跟復選框一樣。
2 t; z, t1 f6 E■ <input type="file" /> 是展示你電腦上的文件的一個區域,就像你在一個軟件中打開或者保存一個文檔一樣。 * I. Z; M6 W! P' T2 B- ^! `8 g
■ <input type="submit" /> 是一個被點擊後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本(下面的button和reset類型也可以這樣,稍後介紹),如下: <input type="submit" value="Ooo. Look. Text on a button. Wow" />. 4 k+ @& ~& z, ?( S4 v% s
■ <input type="image" />以圖像代替按鈕文本,src屬性是必須的,像img標籤一樣。 2 R9 \0 \3 X5 A! Z4 n
■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。
% R+ ?4 _* d% Z: |$ t■ <input type="reset" /> 是一個點擊後會重置表單內容的按鈕。
; L: n; }6 h+ f' r■ <input type="hidden" /> 不會顯示任何東西,它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。
+ H. {/ ~0 u/ q/ U: t2 z注意輸入標籤input也是用「/>」自關閉的。. E  H8 F9 f8 O8 w) D/ i  E
+ g* L* S9 z. [  d- o% e) H; v
多行文本輸入框標籤textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols,用法像這樣:
: N. q. S( j0 j$ E% F8 W1 q5 v. K6 T' v

! O! n5 R9 ~8 J9 }. [ Example Source Code [www.cn-webmaster.cn]. N% D$ b& u. ~' g! I
<textarea rows="5" cols="20">A big load of text here</textarea>9 s2 ^0 q; c5 ~5 S# k3 i
; W% Z# a. W0 Q* `% a1 r* J6 ]
選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的:
0 @8 b% y) \9 t' J5 O- q8 }7 V5 q7 z; {8 Z5 _8 I* G; e
0 _, Z( y! Q) B1 e
Example Source Code [www.52css.com]2 V0 v6 f; F5 `% p. F6 X  f$ Q) K
<select>
: w  g) {% m: t, E* C/ v7 R<option value="first option">Option 1</option>1 J1 Z0 e- h4 l8 @3 ]7 A( ^
<option value="second option">Option 2</option>
! R: g; x1 F$ A! y$ s- q% Y<option value="third option">Option 3</option>4 E1 J  _# g4 x2 g" J; O9 B( V
</select> ' J# R8 W. J/ @) m3 ^4 {

$ t  [- e0 p1 B: o# Y6 _當表單被提交時,被選中選項的值將被發送。
2 I" g6 Y! X! w2 h/ L: k
5 h/ A" O+ W  V5 S5 [/ H與復選框和單選按鈕的預選屬性checked一樣,選項標籤option也有一個預選屬性selected,它可以用在這樣的格式中:<option value="mouse" selected="selected">Rodent</option>。  V6 ]; T0 j: P

! m, U5 V4 c2 l  D上述的標籤中在網頁中看起來都不錯,但是,如果你有一個程序來處理這個表單,這些標籤都不起作用。這是因為,表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name,比如 <input type="text" name="talkingsponge" />。
' J7 B* y3 o* J( A9 A9 R
3 j+ w; Y% ~( U1 b8 ~一個表單看起來應該像下面這樣(注意:這個表單不會工作,除非有一個用來提交數據的「contactus.php」的文件,它位於表單標籤form的行為屬性action中。)
5 `! D5 l+ B2 V) X
) s' x+ e* L7 }" M7 @; k# Q4 K0 e- a2 x
Example Source Code [www.cn-webmaster.cn]
9 M2 B. a  |8 E) y! m  \* }' @7 j<form action="contactus.php" method="post">
$ E7 e* b) S" I+ b1 ^<p>Name:</p>
. [+ N  v. W1 K: S# M' Q% y# ^' Q7 D/ w<p><input type="text" name="name" value="Your name" /></p>
$ ~7 U1 v, w% i<p>Comments: </p>
6 L* A% l* \" |! b2 x<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
: {8 g9 f) U) v% z0 \6 N! B<p>Are you:</p>3 |! T- \& T6 ^. T
<p><input type="radio" name="areyou" value="male" /> Male</p>* r' ?5 ?1 \5 i8 r% `1 l
<p><input type="radio" name="areyou" value="female" /> Female</p>
8 A" n. f, x( F; X& W1 ?1 R<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
2 C- A% m$ A1 {6 `+ `  a1 x, S<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>$ s$ t+ W5 V7 q! [2 k6 j3 t# O
<p><input type="submit" /></p> <p><input type="reset" /></p>
; E) l6 ?0 y) D7 I7 e( H</form>
, v: Q2 ]) b% u: B ) {! u4 t& Q/ {' T. k3 D2 V2 J
在HTML高級教程中還有更複雜的高階水平教程等著你,如果你想進一步瞭解和學習.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:39:15 | 顯示全部樓層
11、綜合應用__把上面所有的要素堆積起來
3 {4 U% d, \" p9 {
/ i6 F( V+ t3 q% d如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
; i1 w/ ?% s9 d: o2 n; u  S; ~+ i" m* H1 ^  [7 v
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
* l' K4 {& S4 e2 O5 ^) C$ U! R- {: i
下面的代碼把前面所教授的綜合在一起了:0 b- s& y# ?4 T0 `
6 {( V1 J# _. \& a; T, u# E) L

: U, F& Y% u1 X% Q& i! p/ `
% S! n  [! y/ t$ G) r Example Source Code [www.cn-webmaster.cn]
" l3 A% h( |! r8 m! m; o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 m8 J" p* S2 w- z4 m0 E; `. C"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">7 e$ B2 ]0 P7 s4 ^4 s
<html>$ x! S6 B. n1 j+ X- m( O
<head>* }4 t! `" F5 |
<title>我的第一個網頁</title>
+ [# Y1 ?. x% p& ]- c<!-- 順便說一下,這是註釋 -->
* D: D2 ~2 y) s</head>
% C2 a" }9 e) |1 D<body>
! e  x7 G: ?, D8 n7 R<h1>我的第一個網頁</h1>
% q  E' g8 d$ D7 K9 H$ n* L& `<h2>這是什麼</h2>% X: c( R( z8 t
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
; d& F: N% _7 I* E' \' k<h2>目的</h2>* P; D: r  z: F6 Q
<ul>
/ t# t3 \. {+ e+ j6 B<li>學習HTML</li>
; `6 ^" @2 Q3 r0 e! M1 P<li> 顯擺,炫耀 / Z1 b' W# f- y: X* @" u0 E& ?
  <ol>- C* S: |! I/ m+ z: s& k
<li>向老闆</li>. n( e  O2 a3 p* C% |' \
<li>向朋友</li>* i5 g4 `) u6 ]/ m( i8 y: m/ d1 X
<li>向我的小貓</li>
* G) G' F$ ^2 D% U6 p3 C <li>給我腦中多嘴的小鴨子</li>8 _1 F7 x# b- V# R- j0 h
</ol></li>
- c# ^  n% C: L/ K/ p<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>9 Y0 m: G' W! ?4 h0 W% Z" L% }
</ul>3 W2 a: {- A5 M/ T
<h2>在哪裡可以找到教程</h2>
: B0 h( {0 l+ k% g3 w<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 {8 _# C' R- q6 Y9 S8 L+ }<h2>一些隨意的表單</h2>
4 e& ]' U  {3 ~) q8 i( y<table border="1">
. a' O: ~0 ?5 |% _( G<tr>& L+ q5 V- ~; N. |
<td>Row 1, cell 1</td>' ?2 B9 B) F/ V4 o; K
<td>Row 1, cell 2</td>+ y5 \" x, W6 u+ I+ K: i
<td>Row 1, cell 3</td>
2 J2 n6 r% B  ]$ J( d+ S</tr>
) f+ D: }: ~5 _3 ]/ m<tr>
% O  \% U8 d+ f( C" d<td>Row 2, cell 1</td>
5 W( X7 I7 p& H6 Z1 i9 w' w0 w, M<td>Row 2, cell 2</td>
3 q# x0 u* {) n! z: x4 M<td>Row 2, cell 3</td>
+ m9 u- E- o. U6 ?. p</tr>7 P" l7 `1 p* y  ^. C% Y
<tr>7 A$ ^1 O& u6 t5 R- e
<td>Row 3, cell 1</td>
; r1 R3 B* b* ~' x+ c<td>Row 3, cell 2</td>
4 Q# t- _) y5 O<td>Row 3, cell 3</td>
2 A3 ^: V3 c) {- T5 U</tr>- j- ^# a* P, A+ D% k+ A
<tr>
( S  `0 `+ v! [<td>Row 4, cell 1</td>, K6 P" s5 K- |0 p- L! {( ?
<td>Row 4, cell 2</td>" o+ ^! t/ X. ~% Z
<td>Row 4, cell 3</td>
$ e3 @( e! I8 Q/ e, B$ \  Y</tr>2 }6 q+ H1 v7 d( j
</table>9 n# K0 m; p  H' W& ?0 d3 _* \
<h2>一些隨意的表單</h2>4 Z$ G0 _( g; A$ y# J8 y* J
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
  p" G  l. X% h<form action="somescript.php" method="post">
5 K2 b7 d! n) \<p>名字:</p>
# [$ e/ Z8 [* T$ [<p><input type="text" name="name" value="你的名字" /></p>& d8 e6 h% W8 n9 W5 [
<p>評論:</p>
3 y9 |! C4 J: g4 C: `% P<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
6 r% E( \' n% c; {<p>你是:</p>
1 l1 @. G. Q1 K<p><input type="radio" name="areyou" value="male" /> 男性</p>: R' T2 ^/ x! V: i. x% @
<p><input type="radio" name="areyou" value="female" /> 女性</p>/ T2 z3 D: x2 z5 M( D0 ?
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>/ m: n6 ?/ Z4 L9 s4 d& J
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
! x" E' `+ ?* X. O<p><input type="submit" /></p> <p><input type="reset" /></p>
2 b2 y2 h1 [$ _0 c. V$ K! G$ ^" j( {</form>
/ X( d' k* H9 t8 P  Q* x</body>
7 d9 X  T& L" V' j; U+ u9 n$ S</html>
. ?! ~4 H  O5 ^2 W( U' k! b0 q% s% Q# j- \
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
% P* f6 `, ~* m2 D) X" U. o/ g9 P! s# W0 k9 W* X; U
感到滿意的話,你可以繼續學習CSS中級教程了。
回復 给力 爆菊

使用道具 舉報

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

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-3-6 01:26

By DZ X3.5

小黑屋

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