HTML基礎教學(19)--表單相關標籤(二)

上一篇中有提到了 INPUT 標籤可以呈現多種型態, 這裡再回顧一下

text：單行輸入格
password：密碼輸入格
checkbox：勾選鈕
radio：單選鈕
file：上傳檔案
button：按鈕
reset：重設按鈕
submit：提交按鈕

下面針對各種型態再做範例說明

單行輸入格(text)

<INPUT name="username" value="請填入姓名" size="15" maxlength="6" type="text"><BR>
<INPUT name="address" value="請填入地址" readonly type="text"><BR>
<INPUT name="tel" value="請填入電話" disabled type="text"><BR>

在第一個輸入格中, 指定了 size="15" , 所以它的寬度比其他兩個來得短, 另外, 單行輸入格中還可以設定最多能輸幾個字, 也就是上面所設定的 maxlength 屬性, 所以在此輸入格中最多只能輸入 6 個中英數字
而第二及第三個輸入格分別指定了 readonly 與 disabled, 都是不可輸入的, 但可發現到第三個會變成灰色的

密碼輸入格(password)

<INPUT name="pwd1" value="請填入姓名" size="15" maxlength="6" type="password"><BR>
<INPUT name="pwd2" value="請填入地址" readonly type="password"><BR>
<INPUT name="pwd3" value="請填入電話" disabled type="password"><BR>

密碼輸入格的用法跟單行輸入格其實一樣, 只是內容在呈現時會用其他符號來呈現, 但不影響實際內容

勾選鈕(checkbox)

興趣：
<INPUT name="movie" value="movie" checked type="checkbox">電影,
<INPUT name="ball" value="ball" type="checkbox">打球<BR>
<INPUT name="epaper" value="yes" type="checkbox">訂閱電子報<BR>
不可選取：<INPUT name="nothing" value="1" disabled type="checkbox"><BR>

勾選鈕一般的應用有兩種, 一是很多選項的複選, 以及單一選項的是與否, 例如上例中的興趣就是複選的應用, 而訂閱電子報則是單一選項的是與否, 而在勾選鈕上的 value 值, 其實可說有用, 也可說沒用, 因為不管你打不打勾, 它的 value 值都是不會變的, 它改變的是 cheched 屬性狀態, 而且, 當表單資料要送到 Server 端處理時, 是有勾的才會傳送, 沒勾的根本不會傳, 所以在 Server 端處理時, 通常我的重點是依它有沒有傳資料過來 Server 來判斷它有沒有勾選, 跟它的 value 值其實沒什麼關係
若你想讓某個選項狀態預設為勾選, 則只要加上 checked 屬性就好
另外, 若你在某種情況下不想讓使用者去改變它的勾選狀態, 則可以像最後一個勾選鈕一樣, 加上 disabled 屬性即可

單選鈕(radio)

性別：
<INPUT name="gender" value="M" checked type="radio">男,
<INPUT name="gender" value="F" type="radio">女<BR>
婚姻狀態：
<INPUT name="marry" value="Y" checked type="radio">已婚,
<INPUT name="marry" value="N" type="radio">未婚,
<INPUT name="marry" value="S" disabled type="radio">保密

單選鈕就是用在多個選項的單選, 例如上例的性別以及婚姻狀態, 而同一個表單上這麼多個單選鈕, 哪些才是一組呢, 請注意到上例中的 name 屬性, 我們可以發現到有一些屬性值是一樣的, 沒錯, HTML 語法就是利用 name 屬性來幫單選鈕做分組, 相同屬性值的為一組, 同一組中只能選擇一個選項, 所以上例中性別的兩個 radio input 的 name 屬性值都是 gender, 而婚姻狀態的三個 radio input 的 name 屬性值則都是 marry
而在單選鈕中的 value 屬性值就有實質用途了, 當表單資料要送到 Server 端時, 一組單選鈕只會送一個值過去, 也就是被選取的那個單選鈕的 value 值, 所以依據收到的值我們就能判斷使用者選擇了哪一個選項
同樣的, checked 屬性是用來預設選取某個選項
還有 disabled 屬性也同樣的是用來讓該選項變成不可使用的狀態

檔案選取元件(file)

上傳檔案：<INPUT name="doc" type="file"><BR>
<INPUT name="doc" disabled type="file">

這個輸入元件主要是用來上傳檔案到 Server 端用的, 在沒有跟 Server 端互動的網頁上, 這個元件並沒有多大的作用, 等到講相關主題時再來細說

一般按鈕(button)

<INPUT name="ok" value="確定" type="button">
<INPUT name="cancel" value="取消" type="button">
<INPUT name="nothing" value="不能點我" disabled type="button">

這個按鈕元件, 它並不是用來直接讓使用者輸入資料用的, 通常是用它來輔助輸入到其他的輸入元件內, 或是做其他的動作
若你試著點範例中的按鈕, 你會發現並沒有任何動作, 這是因為通常按鈕的應用會以事件搭配 Script 來使用(Script 是一種網頁程式, 主要用來做一些網頁的動態效果)這部份也等到講相關主題時再來細說
因此, 這個按鈕元件主要不是要來將它本身的內容傳送到 Server 端做處理, 所以它雖然有 name 屬性, 但其實作用不大
而 value 屬性值雖然也是它的內容值, 但它主要的作用是用來設定按鈕上的文字, 當然若你有設 name 屬性, 那麼傳送表單時, 也會將它的 value 值傳到 Server 端, 只不過應該很少人會這麼用
同樣的, disabled 屬性也是用來讓這個按鈕變成不可使用的狀態

重設按鈕(reset)

<FORM>
請在下面的輸入格輸入一些資料, 然後點下面的重設鈕
<INPUT name="something" value="這是初始值" size="30" type="text"><BR>
<INPUT name="ok" value="重設(還原)" type="reset">
<INPUT name="nothing" value="不能點我" disabled type="reset">
</FORM>

這個重設按鈕, 同樣的並不是用來讓使用者輸入資料用的, 而是用來拋棄使用者在表單內各欄位所輸入的資料, 恢復成初始的資料, 可以試試上面的範例, 因此它的 name 屬性與 value 屬性的作用跟上面一般按鈕一樣(button)
同樣的, disabled 屬性也是用來讓這個按鈕變成不可使用的狀態

提交按鈕(submit)

<FORM action="處理表單內容的程式">
<INPUT name="something" value="這是初始值" size="30" type="text"><BR>
<INPUT name="ok" value="送出" type="submit">
<INPUT name="nothing" value="不能點我" disabled type="submit">
</FORM>
(由於 FORM 標籤的 action 屬性不是設定為一個真正可以處理表單的程式, 故無法展示送出後的效果)

這個提交按鈕, 同樣的並不是用來讓使用者輸入資料用的, 它的功能用來將表單資料送交到 Server 端去處理, 因此它的 name 屬性與 value 屬性的作用跟上面一般按鈕一樣(button)
同樣的, disabled 屬性也是用來讓這個按鈕變成不可使用的狀態

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

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