好孩子的網頁設計，第十三課

24 views

Skip to first unread message

Jedi

unread,

Sep 12, 2006, 1:23:42 AM9/12/06

to happyd...@googlegroups.com

FYI:

本次課程投影片：

http://Jedi.org/p4/slide/20060906/#eva

一定要用 Firefox 纔能看，用 IE 會出錯。如果妳沒有 Firefox 或不知道甚麼是
Firefox ，沒關係，底下是本週課程提要：

0. 本次課程所用到的標籤

<form> 定義一個表單
<input /> 讓使用者輸入的欄位
<label> 為表單元件加上標籤
<textarea> 定義一個文字區域
<select> 定義一個選單
<option> 定義一個選項
<button> 定義一個按鈕
<fieldset> 定義一個表單分區
<legend> 為表單分區加上抬頭
<optgroup> 定義一個選項分群

1. <form> 標籤

1.0. 常用屬性請複習第八課的內容
enctype 屬性請參考第十課的 type 屬性用法

1.1. action 屬性定義表單填寫好後要交給那個程式處理

例如， Google 搜尋表單要交給 http://www.google.com/custom 這個程
式來處理，那麼就可以這樣用：

1.2. method 屬性定義要如何將填寫好的表單送出

method 屬性祇有兩種值： get 和 post 。不特別指定的話，預設會採用
get 。例如前例的：

其實就跟：

是一樣的。

當 method="get" 的時候，會把表單內容放進網址中直接送出，這是最直
接的做法，不過有一百個字的長度限制；如果指定 method="post" 的話，
則會將表單資料塞到 HTTP 請求本體中。關於使用 method="get" 的範例
請見本課最後面的範例。

1.3. accept 屬性可以接受的媒體類型，請參考第十課的 type 屬性用法

1.4. accept-charset 屬性預期接受的字元集，請參考第十課的 charset
屬性用法

2. input 標籤

2.0. 常用屬性請複習第八課的內容
accesskey 屬性請參考第十課的內容
tabindex 屬性請複習第十課的內容

2.1. name 屬性表單項目的名稱（給程式看的）

當使用者填寫了表單後，表單實際送到程式做進一步處理時，所有的資訊
其實都是按照：「表單項目的名稱」─「表單項目填寫的內容」這樣的配
對方式存在的。因此，在此我們就是要用 name 屬性來定義這個表單項目
的名稱：

要注意的是， name 屬性的值並不是顯示在螢幕上、給使用者看到的名稱，
而是遠端程式所預期要處理的名稱（例如參數名稱）。

對於 text, password, checkbox, radio, hidden, button, image, file
來說（請參考下一節 type 屬性），都一定要加上 name 屬性

2.2. type 屬性表單項目的輸入方式

type 屬性可以使用的值有：

text 文字（明文）
password 密碼（暗文，輸入的時候會以 * 顯示）
checkbox 核選框（用於多選）
radio 選擇鈕（用於單選）
submit 送出表單內容的按鈕
reset 重設表單內容的按鈕
hidden 隱藏（並不會顯示出來，但是仍然會把資料送
給遠端程式）
button 按鈕
image 圖片
file 檔案

2.2.1. type="text"

用來輸入簡單文字資料的表單欄位，可以用 type="text" 來做：

<form>
姓氏：<input name="familyname" type="text" /><br />
名字：<input name="firstname" type="text" /><br />
身分證字號：<input name="id" type="text" />
</form>

如果要決定輸入框的寬度，可以用 size 這個屬性，其單位是字數。例如：

<form>
姓氏：<input name="familyname" type="text" size="4" /><br />
名字：<input name="firstname" type="text" size="16" /><br />
身分證字號：<input name="id" type="text" size="10" />
</form>

在上例中，輸入姓氏的那一欄，寬度會是 4 個英文字；輸入名字的那一
欄，寬度是 16 個英文字；輸入身分證字號的那一欄，寬度是 10 個英文
字。要特別注意的是， size 這個屬性祇會決定輸入框的寬度，但不會限
制所輸入資料的長度。

如果要限制輸入資料的最大長度，則可以用 maxlength 這個屬性，其單
位是字數。例如：

在上例中，輸入身分證字號的那一欄，最多祇能輸入十個字。

如果要設定預設的資料，則可以用 value 屬性，例如：

<form>
姓氏：<input name="familyname" type="text" size="4" value="吳" /><br />
名字：<input name="firstname" type="text" size="16" value="調更" /><br />
身分證字號：<input name="id" type="text" size="10" maxlength="10" value="A123456789"/>
</form>

當然啦，使用者還是可以改掉的。

如果要讓使用者連改都不能改（也就是，祇能看）的話，可以加上
readonly="readonly" 這個屬性。例如：

在上例中，使用者雖然可以看到輸入欄位，也可以看到裡面的「處理中」
字樣，但是卻無法修改。

2.2.2. type="password"

用來輸入密碼資料的表單欄位，可以用 type="password" 來做：

如果要決定輸入框的寬度，可以用 size 這個屬性，其單位是字數。例如：

在上例中，兩欄的寬度都是 4 個英文字。要特別注意的是， size 這個
屬性祇會決定輸入框的寬度，但不會限制所輸入資料的長度。

如果要限制輸入密碼的最大長度，則可以用 maxlength 這個屬性，其單
位是字數。例如：

在上例中，輸入密碼的那一欄，最多祇能輸入十二個字。

如果要設定預設的資料，則可以用 value 屬性，例如：

當然啦，使用者還是可以改掉的。

2.2.3. type="checkbox"

要做出多重選項讓使用者勾選的時候，可以用 type="checkbox" 來做：

<form>
<input name="attribution" type="checkbox" />需要標示姓名<br />
<input name="commercial" type="checkbox" />不能進行商業使用
</form>

如果要設定預設核選的項目時，可以加上 checked="checked" 這樣的屬
性。例如：

<form>
<input name="attribution" type="checkbox" chceked="checked" />
需要標示姓名<br />
<input name="commercial" type="checkbox" />不能進行商業使用
</form>

在上例中，預設就會勾選需要姓名標示。當然使用者可以再加以取消。

要設定核選框被勾選時，實際上要跟著表單送出的值時，要用 value 這
個屬性。例如：

在上例中，如果送出表單時祇勾選了「需要標示姓名」，則會送出：

http://cc.org/license.cgi?attribution=by

如果「需要標示姓名」和「不能進行商業使用」都勾選了的話，則會送出：

http://cc.org/license.cgi?attribution=by&commercial=nc

2.2.4. type="radio"

要做出單選題讓使用者圈選的時候，可以用 type="radio" 來做：

<form>
<input name="attribution" type="checkbox" />需要標示姓名<br />
<input name="commercial" type="checkbox" />不能進行商業使用<br />
<input name="derivative" type="radio" />可以自由改作<br />
<input name="derivative" type="radio" />可以改作，但須用相同方式分享<br />
<input name="derivative" type="radio" />禁止改作
</form>

請注意，上例中的三個單選， name 屬性的值都相同，因為這樣纔能表示
他們屬於同一題，纔會具有「單選」的效果。

如果要設定預設核選的項目時，可以加上 checked="checked" 這樣的屬
性。例如：

<form>
<input name="attribution" type="checkbox" checked="checked" />
需要標示姓名<br />
<input name="commercial" type="checkbox" checked="checked" />
不能進行商業使用<br />
<input name="derivative" type="radio" />可以自由改作<br />
<input name="derivative" type="radio" />可以改作，但須用相同方式分享<br />
<input name="derivative" type="radio" checked="checked" />禁止改作
</form>

在上例中，預設的選項就會是姓名標示、非商業性、禁止改作。當然使用
者可以再加以取消或改選其他選項。

要設定選擇鈕被圈選時，實際上要跟著表單送出的值時，要用 value 這
個屬性。例如：

<form action="http://cc.org/license.cgi">
<input name="attribution" type="checkbox" chceked="checked" value="by" />
需要標示姓名<br />
<input name="commercial" type="checkbox" value="nc" />
不能進行商業使用
<input name="derivative" type="radio" value="" />可以自由改作<br />
<input name="derivative" type="radio" value="sa" />
可以改作，但須用相同方式分享<br />
<input name="derivative" type="radio" checked="checked" value="nd" />
禁止改作
</form>

在上例中，因為預設就會圈選「禁止改作」，所以就算使用者甚麼都不勾
選，也會送出：

http://cc.org/license.cgi?derivative=nd

如果「需要標示姓名」和「不能進行商業使用」都勾選了的話，並且改圈
選「可以改作，但須用相同方式分享」的話，則會送出：

http://cc.org/license.cgi?attribution=by&commercial=nc&derivative=sa

2.2.5. type="submit"

要做出按鈕，讓使用者按下去之後，就會把整個表單的資料送出，可以用
type="submit" 來做：

如果要調整這個按鈕的寬度，則可以用 size 這個屬性，單位是字數。例
如：

上面這個例子就會做出一個很寬的按鈕。

如果還想在按鈕上寫字的話，可以用 value 這個屬性。例如：

上面這個例子會做出一個「登入」的按鈕，按下去之後就會把使用者填寫
的帳號及密碼送出。

2.2.6. type="reset"

要做出按鈕，讓使用者按下去之後，就會把整個表單的資料重設，可以用
type="reset" 來做：

如果要調整這個按鈕的寬度，則可以用 size 這個屬性，單位是字數。例
如：

上面這個例子就會做出一個很寬的按鈕。

如果還想在按鈕上寫字的話，可以用 value 這個屬性。例如：

上面這個例子除了先前介紹過的「登入」按鈕外，還會做出一個「重設」
的按鈕，按下去之後就會把使用者填寫的帳號及密碼清掉，回復成預設值。

2.2.7. type="hidden"

如果要跟著表單一起傳送某些資料出去，而且沒有要讓使用者看到的話，
可以使用 type="hidden" 搭配 value 屬性來做。舉例來說：

<form action="http://cc.org/license.cgi">
<input name="jr" type="radio" checked="checked" value="taiwan" />
台灣<br />
<input name="jr" type="radio" value="generic" />不限定司法轄區
<input name="version" type="hidden" value="2.5" />
</form>

在上面這個例子中，使用者祇會看到一個單選（有兩個選項：台灣和不限
定司法轄區）；如果使用者選擇了「台灣」，實際送出的會是：

http://cc.org/license.cgi?jr=taiwan&version=2.5

如果使用者選擇了「不限定司法轄區」，實際送出的會是：

http://cc.org/license.cgi?jr=generic&version=2.5

也就是說，無論如何都會把 type="hidden" 的那個 version=2.5 送出。

2.2.8. type="button"

如果要做出除了送出和重設之外的按鈕，則可以用 type="button" 來做，
並配合 size 屬性決定其寬度、 value 屬性決定按鈕上要寫甚麼字：

2.2.9. type="image"

如果要做出圖形按鈕，則可以用 type="image" 來做，並以 src 屬性指
定圖片網址、以 alt 屬性指定圖片的替代文字（請參考第十課的內容）。
例如：

在上例中，會出現一張圖片，以滑鼠點選的時候，會送出點選位置的座標
（圖片的最左上角是 (0,0) ，依此類推），例如：

http://cc.org/license.cgi?x=63&y=10

表示點選位置是座標 (63,10) 處。

如果用了 name 屬性，則 name 屬性的值會冠到座標前，並以 . 與 x 和
y 相連。例如：

則前面那個例子就會送出：

http://cc.org/license.cgi?img.x=63&img.y=10

當然，還可以再使用 value 屬性，例如：

這麼一來，前面那個例子送出的內容就會變成

http://cc.org/license.cgi?img.x=63&img.y=10&img=click

2.2.10. type="file"

如果要讓使用者從自己的硬碟選擇檔案並上傳的話，可以用 type="file"
來做：

這樣子就會做出一個上傳表單：這個表單會有一個文字欄位，用來顯示選
擇了甚麼檔案（路徑名稱及檔名），還會有一個「瀏覽」的按鈕，讓使用
者按下去後可以從自己的硬碟中選擇檔案。

如果想要設定可接受的檔案類型，則可以使用 accept 這個屬性。（請參
考第十課的 type 屬性用法）

2.3. disabled="disabled" 屬性

當 type 屬性的值為 text, password, checkbox, radio, submit,
reset, button, image, file 的時候（換而言之，就是除了 type="hidden"
之外），如果想要讓使用者不能操作該項目時，就可以用
disabled="disabled" 這個屬性。

disabled="disabled" 和 readonly="readonly" 的差別除了適用的 type
外，還有一點：就是 disabled="disabled" 會讓 input 項目變成灰色，
而 readonly="readonly" 不會。

3. label 標籤

3.0. 常用屬性請複習第八課的內容
accesskey 屬性請參考第十課的 type 屬性用法

3.1.

在前面 2.2.4. 的例子中：

我們可以發現一個嚴重的問題：就是點選這些顯示出來的文字時，並不會
勾選核選框，也不會圈選選擇鈕；使用者一定要把滑鼠游標對準核選框或
選擇鈕，纔能加以選擇。

為了要解決這個問題，比較正確的做法是用 <label> 來指定特定元件的
標籤；為了要能正確地指定，我們在 <label> 內需要用到 for 這個屬性，
而在對應的 <input /> 內，也必須使用 id 屬性，並且使其一致：

<form>
<input name="attribution" type="checkbox" id="by" />
<label for="by">需要標示姓名</label><br />
<input name="commercial" type="checkbox" id="nc" />
<label for="nc">不能進行商業使用</label><br />
<input name="derivative" type="radio" id="der" />
<label for="der">可以自由改作</label><br />
<input name="derivative" type="radio" id="sa" />
<label for="sa">可以改作，但須用相同方式分享</label><br />
<input name="derivative" type="radio" id="nd" />
<label for="nd">禁止改作</label>
</form>

事實上，並非祇有核選框和選擇鈕有此需求，任何的 input, textarea,
select, button 標籤（請見後述）都可以用這個方法，加上對應的
label

4. textarea 標籤

4.0. 常用屬性請複習第八課的內容
accesskey 屬性請參考第十課的內容
tabindex 屬性請複習第十課的內容

4.1. name 屬性

在前面 2.2.1. 所介紹的 <input type="text" /> 作用是輸入簡單的文
字，但是有時候我們會需要輸入比較多內容，例如部落格的內容，例如信
件內容等，這時候祇有一行的 <input type="text" /> 就不敷使用了。
因此我們要用到 <textarea> 這個標籤來做出文字區域（別忘了 name 屬
性）：

請注意，由於文字區域所輸入的內容都比較長，所以無法使用 get 方法
送出，而得使用 post 方法。

如果需要預先指定文字區域的內容的話，可以這樣做：

<form method="post">
<textarea name="comment">在此輸入預設的文字區域內容……</textarea>
</form>

4.2. cols 屬性與 rows 屬性

如果要指定文字區域的寬度跟高度的話，分別可以用 cols 屬性和 rows
屬性，其單位分別是字數和列數。例如：

<form method="post">
<textarea name="comment" cols="30" rows="12">在此輸入預設的文字區域
內容……</textarea>
</form>

上述的例子會做出一個寬 30 個字、高 12 行的文字區域。

4.3. readonly="readonly" 屬性與 disabled="disabled" 屬性

<textarea> 也可以使用 readonly="readonly" 屬性與
disabled="disabled" 屬性，請參考前面的內容。一般很常把
<textarea> 的 readonly="readonly" 用來顯示使用者條款之類的：

<form>
<textarea name="eula" cols="30" rows="12" readonly="readonly">
<h3>使用者條款</h3>
<p>……</p>
</textarea>
</form>

5. select 標籤

5.0. 常用屬性請複習第八課的內容
tabindex 屬性請複習第十課的內容

5.1. name 屬性

我們前面提到用 <input type="checkbox" /> 以及 <input type="radio" />
來做核選框及選擇鈕，現在我們要來談談另一種讓使用者選擇的方式：下
拉式選單。

要定義下拉式選單的時候，就這樣用：

name 屬性的意義同前，不再贅述。

5.2. size 屬性

同樣地，我們可以用 size 屬性來設定這個下拉式選單要佔的寬度，單位
一樣是字數。例如：

5.3. multiple="multiple" 屬性

下拉式選單在預設的情況下是單選的，一次祇能選一個選項；如果想要讓
他是多選的話，則需加上 multiple="multiple" 屬性。例如：

加上了這個 multiple="multiple" 屬性後，使用者就可以利用 Ctrl 鍵
或 Shift 鍵，來選取多個選項。

5.4. disabled="disabled" 屬性

同樣地，如果下拉式選單要處於禁止被操作的狀態，就加上
disabled="disabled" 屬性即可。例如：

6. option 標籤

6.0. 常用屬性請複習第八課的內容

6.1. value 屬性

剛剛我們介紹了 <select> 標籤，說可以用來做出下拉式選單，但是我們
還沒有說明要如何設定這個選單內要有甚麼選項。要設定選項，用的就是
<option> 標籤，並且要用 value 屬性設定選項被選時，實際要送出去的
值。例如：

6.2. selected="selected" 屬性

如果想要把某個選項當作預設選項，也一樣是加上 selected="selected"
屬性即可。例如：

在上例中，臺北市就會變成預設選項。當然使用者還是可以改選其他都市。

當然這也可以搭配多重選項的情況，例如：

在上例中，三個都市預設都會被選起來。

6.3. disabled="disabled" 屬性

如果某些選項要設成禁選（就是不讓使用者選）的話，也還是加上
disabled="disabled" 屬性。例如：

在上例中，北京與上海都是不能選的。

7. button 標籤

7.0. 常用屬性請複習第八課的內容
accesskey 屬性請複習第十課的內容
tabindex 屬性請複習第十課的內容

7.1. name 屬性及 value 屬性

我們早在 2.2.8. 就說明過可以用 <input type="button" /> 來做按鈕
了，為什麼還要用 <button> 呢？有幾個原因：

1. <input type="button" /> 按下去後不會送出任何東西
2. <input type="button" /> 做出的按鈕，上面祇能寫字，而且不能有
字體變化等，更不能放圖

而透過 <button> 標籤，我們不但可以做出花花綠綠的按鈕，還可以真的
在按鈕被按下去時做些事。例如：

<form action="http://cc.org/license.cgi">
<button name="do" value="select">選擇授權條款</button>
</form>

在上例中，會做出一個寫著「選擇授權條款」的按鈕，按下去後，就會送
出：

http://cc.org/license.cgi?do=select

要特別注意的是， <input type="button" value="foo" /> 中， value
屬性的用途是設定按鈕上的文字，但是在 <button value="bar" /> 中，
value 的屬性卻是用來定義要送出甚麼內容。

除了單純的文字外， <button> 做出的按鈕，也可以包含其他變化。例如：

甚至是用圖片做按鈕，例如：

請注意， <input type="image" /> 會送出滑鼠點下的座標資訊，但是
<button><img ... /></button> 則不會。

7.2. type 屬性

<button> 標籤可以使用 type 屬性來指定按鈕的作用，可以用的值有：

button 一般的按鈕。這是預設值。
submit 送出表單用的按鈕
reset 重設表單的按鈕

正如同 <button type="button> 是 <input type="button" /> 的進階版，
<button type="submit"> 是 <input type="submit" /> 的進階版，而
<button type="reset"> 則是 <input type="reset" /> 的進階版。在此
就不再贅述。

7.3. disabled="disabled" 屬性

如果要把某個按鈕設定成不讓使用者按的狀態，也是加上
disabled="disabled" 屬性。例如：

<form action="http://cc.org/license.cgi">
<button name="do" value="select" disabled="disabled">選擇授權條款</button>
</form>

8. fieldset 標籤

8.0. 常用屬性請複習第八課的內容

8.1.

如果表單中就是一堆等著使用者填寫的資料欄位而以的話，在邏輯上其實
是很不清楚的，使用者很難知道欄位間的分段區隔，因此這時候我們需要
用 <fieldset> 標籤來將整份表單劃分為若干區塊。舉例來說，在這個表
單中：

這個表單有一個輸入姓名的文字欄位，一組選擇性別（男或女）的選擇鈕，
一個用來輸入回應的文字區域，還有一個送出表單內容的「張貼」按鈕。
不過，其實呢，前兩個部分（姓名和性別）應該是一組的，都是個人資訊，
然後文字區域自己是一組，按鈕則獨立於上述兩組之外。所以，我們可以
用 <fieldset> 標籤來分組，並稍加調整成這樣：

被 <fieldset> 包起來的部分，在顯示效果上就會出現一個框框包住。

9. legend 標籤

9.0. 常用屬性請複習第八課的內容
accesskey 屬性請複習第十課的內容

9.1.

然而單單祇用 <fieldset> 的時候，雖然我們可以知道各個輸入欄位間的
分組關係，但是卻不知道每一組實際的用途。這個時候可以再加上
<legend> 標籤。例如， 8.1. 的那個範例，就還可以再修改成這樣：

通常 <legend> 所設定的分區抬頭會出現在 <fieldset> 框線的左上部分，
壓在線上。

10. optgroup 標籤

10.0. 常用屬性請複習第八課的內容

10.1. label 屬性

讓我們回到下拉式選單（也就是 <select> 和 <option> ）。有的時候，
當選項多了，如果可以加以適當地分組，對使用者來說纔不會看得眼花撩
亂。這個時候我們可以用 <optgroup> 標籤來分組，並使用 label 屬性
來為他們加上分組抬頭。例如：

<form>
<select name="airport">
<optgroup label="台灣">
<option value="CKS">中正國際機場</option>
</optgroup>
<optgroup label="日本">
<option value="KIX">大阪關西空港</option>
<option value="NRT">東京成田空港</option>
</optgroup>
</select>
</form>

10.2. disabled="disabled" 屬性

如果要讓整組選項都處於禁選狀態的話，也可以加上
disabled="disabled" 屬性。例如：

<form>
<select name="airport">
<optgroup label="台灣">
<option value="CKS">中正國際機場</option>
</optgroup>
<optgroup label="日本" disabled="disabled">
<option value="KIX">大阪關西空港</option>
<option value="NRT">東京成田空港</option>
</optgroup>
</select>
</form>

在上面這個例子中，所有位於日本的機場就通通都不能選了。

11. 活生生的例子

以下是實際有效的範例，功用是利用 Google 的自訂搜尋功能，對
http://creativecommons.org.tw/ 站內搜尋關鍵字：

因為使用者看不到 type="hidden" 的東西，所以這個表單做出來祇有非
常清爽的一個文字輸入框，和一個按鈕。這個文字輸入框的寬度有 14 個
字，用來輸入要查詢的關鍵字，之後的那個按鈕則寫著 Submit ，按下去
之後就會進行搜尋。

如果在這個表單的文字輸入框輸入了 Commons 的話，實際送出的內容會
是：

http://www.google.com/custom?q=Commons&sa=Search&hl=zh-TW&inlang=zh-TW&ie=UTF-8&domains=creativecommons.org.tw&sitesearch=creativecommons.org.tw

12. 本週作業：

繼續修改上次作業，試著加入一組表單。

完成後，這個檔案請在 09/13 前寄給我。

13. 版權宣告：

本講義採 Creative Commons "Attribution NonCommercial Share-Alike 2.5 Taiwan"
授權條款釋出。著作人為 Jedi http://Jedi.org/blog/