HTML基礎教學(18)--表單相關標籤(一)

在很多網站上都會使用到表單輸入, 諸如個人資料的填寫, 張貼文章或回應文章等等, 但表單通常必須搭配 Server 端(伺服器端)的程式來運行, 也就是將使用者在表單上填寫的資料傳回給 Server 端去做處理, 若只限在 Client 端(用戶端或使用者端)的話, 實務應用並不大, 我們目前的教學還只在 HTML 基礎教學而已, 離 Server 端程式教學還有很大的一段距離, 現在說表單語法似乎太早了, 不過表單標籤終究還是 HTML , 而且日後也可以搭配 Script 做些 DHTML 效果的練習, 所以這裡還是先講一下好了

表單是由多個標籤所組成的, 除了最外層用 FORM 標籤定義一個表單範圍之外, 裡面還需要很多輸入元件, 例如輸入格, 密碼輸入格, 下拉選單...等等, 接下來我會一一介紹

FORM 標籤

<FORM name="表單名稱" action="處理表單內容的程式" target="框架名稱"></FORM>

這個 FORM 標籤就是在定義一個表單的範圍
name 屬性是在幫這個表單取一個名稱, 這個名稱通常只有在 DHTML 時才有用處
action 屬性則是在指定這個表單內容要送到 Server 端的哪一支程式來做處理
這些日後會再做介紹
而 target 屬性用途, 跟之前介紹超連結標籤(A標籤)時的 target 屬性一樣, 也就是表單送出後, 處理表單內容的程式處理完之後, 它回應的內容要顯示在哪一個框架中

INPUT 標籤

<INPUT type="輸入型態">

INPUT 標籤是個很特別的標籤, 它具有一個 type 屬性, 用來設定 INPUT 標籤的輸入型態, 設定不同的屬性值會呈現出不同的輸入型態, 下面是它所能設定的值

text：單行輸入格, 不指定 type 屬性時, 也會預設為此輸入型態
password：密碼輸入格, 也就是在此輸入格輸入文字時, 會在畫面上用其他的符號來代替(一般都是用 *), 以避免被他人看到輸入的內容
checkbox：勾選鈕, 一般是用來做複選選項或者"是"與"否"的決定
radio：單選鈕
file：上傳檔案
button：按鈕
reset：重設按鈕, 也就是會拋棄使用者在表單內各欄位所輸入的資料, 恢復成初始的資料
submit：提交按鈕, 點此按鈕時就會將表單內容送出到 Server 端去做處理

下面這個例子可以看出每一種型態的長相

text：<INPUT type="text"><BR>
password：<INPUT type="password"><BR>
checkbox：<INPUT type="checkbox"><BR>
radio：<INPUT type="radio"><BR>
file：<INPUT type="file"><BR>
button：<INPUT type="button"><BR>
reset：<INPUT type="reset"><BR>
submit：<INPUT type="submit"><BR>

另外, INPUT 標籤還有幾個常用到的屬性

<INPUT name="欄位名稱" value="欄位值" size="輸入欄寬度" readonly disabled checked type="輸入型態">

• name 屬性是用來設定此輸入欄的名稱, 在所有 INPUT 輸入型態中, 都會有 name 屬性, Server 端的表單處理程式就是依此名稱來取得表單內該欄位的資料, 因此, 必須有設定 name 屬性的輸入元件, 它的值才會被送交到 Server 端處理


• value 屬性是用來設定此輸入欄要送交到 Server 端處理的欄位值, 若用上述的語法直接給一個值的話, 相當於是在設定此欄的預設值, 當使用者改變此輸入欄的資料時, 此屬性值就會被改變。同樣的在所有 INPUT 輸入型態中, 都會有 value 屬性


• size 屬性是在設定可輸入文字的輸入型態它的元件寬度, 一般來說它設定的是指"多少字數的寬度", 但我個人覺得不是很準, 所以通常都用試的調到我希望的寬度, 或是用之後會講到的 CSS 樣式會更精確


• readonly 屬性是用來設定唯讀的, 這裡要注意到它不須設定屬性值, 只要加上 readonly 這個字, 就產生了唯讀的效果, 什麼是唯讀呢? 也就是只要加了這個屬性, 那麼就不能再在這個輸入欄上輸入或修改資料, 在部份的輸入型態會有此屬性, 主要是針對可輸入文字的輸入型態, 可參閱下面的說明


• disabled 屬性是將此輸入欄設定為不可使用、失去作用, 設定後輸入欄個變成灰色的狀態, 同樣的它不須設定屬性值, 只要加上 disabled 就可以了, 此時使用者就無法再對這個輸入欄做任何操作。在所有的 INPUT 輸入型態中, 都有 disabled, 尤其是不可輸入文字的輸入型態, 例如勾選鈕等, 必須設定 disabled 才能防止使用者變更輸入欄的狀態或內容, 而像按鈕等也必須設定 disabled 時使用者才無法去點擊這個按鈕


• checked 屬性是用來設定 checkbox 與 radio 是否要預設選取起來

由於 INPUT 標籤的型態很多, 用法比較雜, 我們等到下一篇再來說明各型態的範例

SELECT 標籤 與 OPTION 標籤

<SELECT name="欄位名稱" size="輸入型態" multiple disabled>
  <OPTION value="選項值" selected>選項文字</OPTION>
  <OPTION value="選項值">選項文字</OPTION>
</SELECT>

這一組標籤是用來產生下拉選單或是項目清單(ListBox), SELECT 標籤是主要的標籤, 而 OPTION 標籤則是在設定它的選項, 在一個 SELECT 標籤內可以有多個 OPTION 標籤

SELECT 標籤
name 屬性與 INPUT 標籤的 name 屬性作用一樣
size 屬性基本上是在設定一次要顯示幾個選項, 但也跟呈現的輸入型態有關, 當 size="1" 時會是下拉選單, 大於 1 時則會變成項目清單, 不設定時預設為下拉選單, 可以參考下面的範例
multiple 屬性是在設定允許使用者一次選擇多個選項, 不設定時則一次只能選一個選項
disabled 一樣是在設定為不可使用

OPTION 標籤
OPTION 標籤所包住的文字, 就是這個選項在網頁上所顯示的文字, 而 value 屬性值則是這個選項的實際值, 當使用者選擇了這個選項, 在送交到 Server 端時, 即是傳送這個 value 值, 而不是顯示的文字
而 selected 屬性是用來設定這個選項預設被選取

血型
<SELECT name="blood">
  <OPTION value="A">A 型</OPTION>
  <OPTION value="B">B 型</OPTION>
  <OPTION value="O" selected>O 型</OPTION>
  <OPTION value="AB">AB 型</OPTION>
</SELECT>

這個例子是一般的下拉選單, 裡面有 4 個選項, 而使用者只能選擇一項, 預設是選取 O 型

興趣
<SELECT name="interest" size="4" multiple>
  <OPTION value="movie">電影</OPTION>
  <OPTION value="ball">打球</OPTION>
  <OPTION value="read">閱讀</OPTION>
  <OPTION value="net">上網</OPTION>
  <OPTION value="trip">旅遊</OPTION>
  <OPTION value="shopping">逛街</OPTION>
</SELECT>(可按住 Ctrl 鍵, 再點選項, 即可複選)

而這個例子則是一個項目清單, 一次顯示 4 個選項, 可以複選

血型
<SELECT name="blood" disabled>
  <OPTION value="A">A 型</OPTION>
  <OPTION value="B">B 型</OPTION>
  <OPTION value="O" selected>O 型</OPTION>
  <OPTION value="AB">AB 型</OPTION>
</SELECT>

這個例子是剛剛的血型下拉選單再加上 disabled 屬性, 即會變成不可使用的狀態

TEXTAREA 標籤

<TEXTAREA name="欄位名稱" cols="輸入欄寬度" rows="輸入欄高度" wrap="自動換行控制" readonly disabled>
輸入格預設內容
</TEXTAREA>

這個標籤是一個多行的輸入格, 例如一般在張貼文章或回應等需要輸入大量內容的時候, 就會使用這個元件
name 屬性一樣是在設定欄位名稱
cols 屬性是在設定此輸入元件的寬度, 跟 INPUT 標籤的 size 屬性意思一樣
rows 屬性則是在設定高度, 也就是要有幾列高的意思, 但這也不是很準, 尤其是在 Firefox
wrap 屬性是在控制當內容超過寬度時, 是否要自動換行, 這個看下面的範例說明會比較清楚
readonly 與 disabled 的用途與在 INPUT 標籤中的說明一樣, 是在設定唯讀與不可使用的狀態

<TEXTAREA name="something" cols="35" rows="3">
玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮
Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech
</TEXTAREA>

這是一個簡單的多行輸入格範例, 當不做 wrap 屬性設定時, 當內容超過寬度時預設會自動換行, 故在網頁上顯示時會變成 4 列文字, 而我將元件高度設定為 3 列, 所以你會看見縱向捲軸(ScrollBar)的效果,

<TEXTAREA name="something" cols="35" rows="3" wrap="off">
玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮
Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech
</TEXTAREA>

這個例子是將上例加上取消自動換行的設定, 所以當內容超過寬度時, 就會產生橫向 ScrollBar

<TEXTAREA name="something" cols="35" rows="3" wrap="off" readonly>
玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮
Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech
</TEXTAREA>
<TEXTAREA name="something" cols="35" rows="3" wrap="off" disabled>
玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮玩Web無窮
Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech Enjoy Web Tech
</TEXTAREA>

而這一個範例是在說明 readonly 與 disabled 的不同, 雖然兩個屬性都能讓使用者無法再輸入資料, 但其他效果上還是有所不同
首先就是 disabled 的輸入元件, 會變得灰灰的, 再來就是 readonly 的元件, 使用者還可以捲動 ScrollBar 來觀看完整的內容, 但在 IE 中, disabled 的元件是連 ScrollBar 也不可使用的, 不過在 Firefox 中還是可以的

(請繼續參閱下一篇針對 INPUT 各種型態的範例說明)

--gs--
{HTML基礎教學}{表單}{FORM}{INPUT}{SELECT}{OPTION}{TEXTAREA}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。