[精讚] [會員登入]
316

[HTLM5] 表單color、email、url、search、tel輸入類型

介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

此文完整連結 http://n.sfs.tw/10308

複製連結 [HTLM5] 表單color、email、url、search、tel輸入類型@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2016-11-27 21:49:12 最後編修
2016-11-27 11:12:35 By 瘦河馬
 

此系列文共分三部分,分別是

  [HTLM5] 表單color、email、url、search、tel輸入類型 
  [HTLM5] 表單date/time輸入類型
  [HTLM5] 表單number和range輸入類型

大家已知傳統表單input type有text, password, radio, checkbox等,例如一個登入的表單:

<input type="text" value="這是text類型" name="atextbox" />
<input type="password" value="這是password類型" name="atpassword" />

上面的input type有兩種,一個是text,另一個是password。這是傳統的種類,用起來很方便,但是html5有更方便類型,要知道善用:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

接下來介紹幾個很好用的輸入類型,分別是color、email、url,以及兩個形同雞肋的類型search、tel:

color 類型

color 類型是html5新增的功能,它的好處是可以產生一個顏色選擇器的調色盤,就不必像過去一樣用一個color picker的js。

  <input type="color" name="favcolor" value="#ff0000">

Firefox中外觀

傳出的值,色碼小寫
#0d74f2

使用限制
IE 和 SAFARI不支援,不支援的話就仍需要用 color picker,可參考[3]。

email 類型

email 類型是其實就是加了pattern的text類型,它會檢查輸入的結果是否符合email的格式,缺點是他的檢查似乎太寬鬆了一點,例如 abc@exmapl是能送出的。

  <input type="email" name="myemail">

Firefox中外觀

傳出的值,保持原本大小寫,前後無空白
abc@example
abc@example.COM

使用限制
SAFARI不支援,不支援的話就用text+pattern+js[2]來解決,或是不管safari。因為判斷是不是一個email的格式是比你想像的還要複雜非常非常多,我是建議你不要管safari了,反正用safari的人幾乎都是蘋果粉,蘋果粉他們是不會亂打打錯。

url 類型

url類型可以輕鬆的幫我們檢查輸入是否是合法的url

  <input type="url" name="homepage">

chrome中外觀

傳出的值,保持原本大小寫,前後無空白
http://n.zipko.info O
http:n.zipko.info O
http: /n.zipko.info O
n.zipko.info X
//n.zipko.info X
ftp://n.zipko.info O
sftp://n.zipko.info O
http:163.17.40.38 O

使用限制
SAFARI不支援,不支援的話就用text+pattern+js來解決,或是不管safari。

search 類型

這個類型在html5中像雞肋一樣的存在,因為他的表現型和text類型毫.無.差.別。而且只有 chrome和safari有支援。

  <input type="search" name="googlesearch">

使用限制
只有CHROME/ SAFARI 支援。

tel 類型

這個類型在html5中像吃剩的雞肋一樣的存在,因為他只在safari有支援。

  <input type="tel" name="usrtel">

解決方法
直接使用text+pattern來取代這個類型
   <input name="cellphone" value="" type="text" pattern="[0-9()#\-]{7,20}" maxlength="20" title="限定輪入符號為0-9()#及-,長度為7-20" />

使用限制
只有 SAFARI 支援。

不支援html5的瀏覽器怎麼辦?

沒有支援html5的瀏覽器都會把這些類型當作是text輸出。

參考資料

[1] W3C HTML5 Input type

[2] JAVASCRIPT email regex http://stackoverflow.com/questions/46155/validate-email-address-in-javascript

[3] 像photoshop的 Color picker


原文 2016-02-03 04:52:43

你可能感興趣的文章

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

維修冰箱 維修冰箱

對物品的感情 這個議題很奇怪,可是大部分的人都會有,物品是死的,壞了就淘汰,出新的就被替換。為何會有情感?

McJob 淺談 在英語世界裡,近期多了一個英文生字 Mcjob,定義為「低薪、無聊且沒有什麼前景的工作」。

維修洗衣機 2005年初買的西屋15KG洗衣機,丟在陽台風吹雨打日曬雨淋,終於在2009.08的時候罷工了...

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..