第十四章主要講了 html forms,通過 forms，我們可以得到 customers' feedback,使得網頁能夠 interactive,本章的內容分為三個部分：

1. forms 的 element 以及它們的 attribute.
2. forms 進行互動的原理
3. 如何對 forms 進行 style

How forms work?兩個方面闡述

Web Server 的角度

接收

1. 當 visitor 在一個網頁上 fill out the form 並且之後 submit 了之後
2. Browser pakages up all the data in the form and sends it over to the Web Sever.
3. 然後Web Server 接收到之後，再將其傳給裡面的 Server Script 去讓它 process
   ###返回
4. Server Script 對 data 進行 process 了之後，建立一個新的 HTML 檔案，然後把它傳給 Web Server
5. Web Server 得到這個 HTML 檔案之後，將它再傳給 Browser.
6. 然後 Browser 得到這個介面並且 display it.

Browser 的角度

1. 當它 encounter 到 
   element 的時候，開始 create 相關的 controls, 所謂的 control 是：allow you to input various kinds of data 的地方。
2. 當 visitor fill out 了 form 之後，並且進行了 submit， Browser 將 data 進行 package up,然後將它傳送給 Web Server.
3. 最後，接收到 Web Server 返回來的檔案，然後 display it.

語法以及相關的 attribute

關於<form>

形式：

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
/*(Everything inside the form)*/
</form>

引數：

• action:這個 attribute 包含了 Web Server 的 URL 以及Server Script 的位置。
• method 分為兩種： POST 和 GET，
• </form>這個 closing tag 用來 ends the form

關於 method 這個 attribute

GET :會在傳送給 Web Server 之前 顯示 append the data on the end of the URL ，並且你可以 bookmark 這個網址，缺點每次開啟這個網址時，會 resubmited the order,所以不適用於 order 或者 密碼，個人資訊等網頁
POST：你不能 bookmark 這個網址。但是更加安全，沒有辦法通過 History 檢視，可以用於 密碼，個人資訊等網站。

form elements that create controls 關於<form>中的 element

<input>型別：

形式：<input type="" name="address">

經典的 type attribute:

• type="text" name=""
• type="submit":可以通過“value="Order Now""這個 attribute 來更改其顯示的內容。
• type="radio" name="hotornot" value="not"
• type="checkbox" neme="spice[]" value="Garlic"

HTML5 中的 type attrubute:

• type=" tel\url\e-mail "：實質上是一種 text 型別的 input ，但是在手機上顯示的時候可以控制其 UI，比如顯示相應的數字鍵盤。
• type="number min="0" max="20" 可以設定 max 和 min 這兩個 attribute 來設定其最大值和最小值，數字都為整數。
• type="color"
• type="range" max="0" max="20" step="5" ：這個 attribute 和 number 很相似，但是是以 slider 的方式顯示的，其中的 step 為一個 optional attribute.
• type="date"

其他型別

1. textarea <textarea name="comments" rows="10" cols="48"></textarea>用於 create a multiline text area that you can type into ，其中的 cols 和 rows 用於限制 text area 的寬度和高度。在<textarea>和</textarea>之間的內容鬼稱為 initial text in the browser's text area control
2. select 和 option<select>和<option>是一對搭檔，互不分離，select 用於 create a menu control in the web page.select 用於create every menu item.它的形式是：

<select name="characters">
    <option value="Buckarpp">Buckaroo Banzai</option>
    <option value="Tommy">Perfect Tommy</option>
</select>

關於 name 這個 attribute

How form element "name" work:
It acts as the glue between your form and the server script that processes it.
在 Browser 向 Web Server 傳遞資訊的過程中，Browser send the names and values to the server.

注意

1. 這裡的 name 需要注意的是：它是由 Script 所限定的，不是自定義的，寫 Script 的人應該 tell you what names to use, or provide that information in the documentation for the script.
   2.<option>沒有name,但是<select>有，原因在於name 的原理
2. 對於 checkbox 和 radio 來說，由於它們 come as a set ，所以對於一系列選項來說，它們的 name 是相同的。

實際操作： Back to get those <input> into your HTML

需要注意的是：
1.<input>是一種 inline element，一方面為了美觀整齊，用<br>換行；另外一方面，整個相關聯的資料用<p>包括起來。

1. 在<input>之前或者之後新增lable，作為表明給 visitor 的要輸入的資料。

其他小知識：

1. 如果想要在<radio><checkbox>中預設選擇一項，那麼就用 checked 這個 boolean attribute.
2. 在 CSS 中可以用 table display 對 form 進行設計
3. 其他attribute：
   placeholder\required 可以進行提示和限制必須填寫，其中 required 是一個 boolean 型別的資料
   multiple 是可以在 <select>中新增的，顯示的時候不再是下拉列表，而是資料的全部排列，可以使用 control 鍵進行多選。
   type="file"可輸入檔案型別資料
   type="password"可輸入密碼型別資料
   用<fieldset>來 group together comman elements,配合使用<legend>來顯示標題。 <lable for="">中的 for 這個 attribute 是 form element 中的 id 的名稱,所以建立 lable 有兩個步驟： 建立 element 的id
   然後建立 lable 設定 for 的值