HTML New input type & New Attr

HTML 的 input 多了幾種不同的 type :

  1. search
  2. email
  3. url
  4. tel
  5. number
  6. range
  7. color
  8. date
  9. month
  10. week
  11. time
  12. datetime-local

可以讓操作更為多變跟合適
尤其是在行動裝置上的輸入
鍵盤跟操作會因此不同而方便

也多了可以有預設灰字的 placeholder
必須輸入的 required
等等 屬性
接下來就直接看看語法跟效果

search

<input type="search">

螢幕快照 2013-11-04 上午12.20.39

email

<input type="email">

螢幕快照 2013-11-04 上午12.36.57(手機上)

url

<input type="url">

螢幕快照 2013-11-04 上午12.36.37 (手機上)

date

<input type="date">

螢幕快照 2013-11-04 上午12.20.58
螢幕快照 2013-11-04 上午12.37.19(手機上)

tel

<input type="tel">

螢幕快照 2013-11-04 上午12.35.50  (手機上)

color

<input type="color">

螢幕快照 2013-11-04 上午12.21.20

number

<input type="number">

螢幕快照 2013-11-04 上午12.21.41
螢幕快照 2013-11-04 上午12.40.58(手機上)

range

<input type="range">

螢幕快照 2013-11-04 上午12.21.50

month

<input type="month">

螢幕快照 2013-11-04 上午12.22.04

week

<input type="week">

螢幕快照 2013-11-04 上午12.22.16

time

<input type="time">

螢幕快照 2013-11-04 上午12.22.30

datetime-local

<input type="datetime-local">

螢幕快照 2013-11-04 上午12.22.49

新的 form 元素

有 datalist keygen output 等等

datalist

可以讓有出現在 datalist 的值打一個字就出現全名可以選

<input type="text" list="browsers" />
<datalist id="browsers">
  <option value="FireFox">
  <option value="Chrome">
  <option value="IE">
  <option value="Opera">
  <option value="Safari">
</datalist>

螢幕快照 2013-11-04 上午12.50.32

datalist 在不同 type 下會有不同的樣貌,下面這個網站有做了各種測試
http://demo.agektmr.com/datalist/

新的 form 屬性

有placeholder autofocus autocomplete required pattern multiple novalidate formnovalidate form formaction formenctype formmethod formtarget

placeholder

<input type="text" placeholder="請輸入..." />

required

一定必須要填的欄位,不然不能送出

<input type="text" required="" />

autofocus

進入畫面就會自動點擊進入輸入狀態

<input type="text" autofocus="" />

pattern

JavaScript 的 Regular Expression 來限制輸入

<input type="text" pattern="[0-9]{3}" />

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s