<HeadFirst_HTML與CSS> O’REILLY_Chap.14(完)_HTML表單

本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫成部落格形式, 使用關鍵字查詢便可以快讀的找到相關的內容.

FollowMeReading系列所選的書籍一般選自O’REILLY或Apress出版社, 儘量保證筆記內容的權威性.

FollowMeReading系列的部落格標題格式為: <書名> 出版社章節數章節名, 方便大家在紙質版書籍中查詢.

FollowMeReading系列博文中的內容大部分是原文, 非原文部分前面將有’博主’字樣提醒.

感謝<HeadFirst_HTML與CSS>作者 Eric Freeman & Elisabeth Robson
感謝<HeadFirst_HTML與CSS>翻譯 徐陽 丁小峰

本部落格由@scott編寫. 若轉載此文章, 請註明出處和作者

正文

原文

BULLTE POINTS(要點):

• <form> 元素定義了表單, 所有表單輸入元素都巢狀在這個元素中.

• action 屬性包含伺服器指令碼的URL.

• method 屬性包含傳送表單資料的方法, 可以是 POST 或 GET.

• POST 打包表單資料, 並把它作為請求的一部分發送到伺服器.

• GET 打包表單資料, 並把資料追加到URL.

• 如果表單資料應當是私有的, 或者表單資料很多, 如使用了一個 <textarea> 或者 file <input> 元素, 就應當使用 POST.

• 對於可以加書籤的請求, 要使用 GET.

• <input> 元素在Web頁面上可以作為多種不同的輸入控制元件, 這取決於它的 type 屬性值.

• type 為 text 時會建立一個單行文字輸入框.

• type 為 submit 時會建立一個提交按鈕.

• type 為 radio 時會建立一個單選鈕. 所有同名的單選鈕構成一組互斥的按鈕.

• type 為 checkbox

  時會建立一個複選框控制元件. 通過為多個複選框指定相同的名字, 可以建立一組選擇.

• type 為 number 時會建立一個只允許數字字元的單行文字輸入控制元件.

• type 為 range 時會建立一個滑動條控制元件提供數字輸入.

• color 型別會在支援這個型別的瀏覽器中建立一個顏色選擇器(否則只會建立一個普通的文字輸入控制元件).

• date 型別會在支援這個型別的瀏覽器中建立一個日期選擇器(否則只會建立一個普通的文字輸入控制元件).

• email , url , tel 型別會建立單行文字輸入, 在一些移動瀏覽器上會出現定製鍵盤方便資料輸入.

• <textarea> 元素會建立一個多行文字輸入區.

• <select> 元素會建立一個選單, 包含一個或多個 <option> 元素. <option> 元素定義了選單中的選單項.

• 如果將文字放在 <textarea> 元素的內容中, 這會成為Web頁面上文字區控制元件中的預設文字.

• text <input> 元素中的 value 屬性可以用來為單行文字輸入控制元件提供一個初始值.

• 在提交按鈕上設定 value 屬性可以改變按鈕上的顯示的文字.

• 提交一個Web表單時, 表單資料值與相應的資料名配對, 所有名和值會發送到伺服器.

• 由於表單有一個表格結構, 通常會用CSS表格顯示來建立表單佈局. CSS還可以用來指定表單的顏色, 字型風格, 邊框等樣式.

• HTML允許用 fieldset 元素組織表單元素.

• 可以用 <label> 元素以一種有助於提高可訪問性的方式關聯標籤和表單元素.

• 使用 placeholder 屬性可以為表單使用者提供一個提示, 指出你希望在一個輸入域中輸入什麼內容.

• required 屬性指示一個輸入域是必要的, 要讓表單成功提交, 這個輸入域中必須有值. 有些瀏覽器在你提交表單之前強制要求在這些域中輸入資料.