HTML/CSS

HTML5 Forms
在HTML5對form做了一些改變，如下

新的input type
新的form 元件
新的form 屬性
增加的input type有以下13種，如果瀏覽器不支援以下類型，會預設為text，讓網頁製作更為方便

Search   --手機鍵盤上會有search鈕
Email    --手機鍵盤上會有@、.符號
URL      --手機鍵盤上會有.、/、.com符號
Tel         --手機跳出數字鍵盤
Number --手機跳出數字鍵盤，桌機輸入框旁有加減鈕
Range    --會出現一可往左右拉的選取條
Date       --手機上會跳出日期選擇，桌機出現日曆
Month    --與Date相似，但只能選月份
Week     --與Date相似，但只能選某星期
Time      --可選時間
Datetime   --可選時間與日期
Datetime-local
Color      --可以呼叫調色盤

Datalist
datalist可以在網頁上建立一個輸入框，與select有些類似，但使用者是以文字輸入，當使用者輸入第一個字時，下方會自動跳出開頭一樣的選項(類似google)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text" list="browers" />     --list與id要相同
<datalist id="browers">     --id與list要相同
     <option value="Firefox">     --選項
     <option value="Chrome">
     ....
</datalist>

form屬性
在HTML5中，form增加了14種屬性，以下介紹 Placeholder、Autofocus、Required及Pattern 4種

Placeholder
Placeholder是input的預設值，用來說明要輸入的資料為何(Email、電話...)，只要使用者輸入資料，預設值就會自動刪除
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text"placeholder="Enter your Email.."/>

Autofocus
當網頁開啟時，焦點會自動移至autofocus的input
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input  type="text" autofocus />

Required
若input中有required屬性，那麼該input必須要有值才可以送出，如果沒有輸入值是無法送出的
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text" required />

Pattern
若input中有Pattern屬性，那麼該input有限制的格式，範例要輸入0-9組成的三位數數值，如果沒有符合條件，是無法送出的
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text" pattern="[0-9]{3}" />    --格式是3位數的0-9數字