HTML5基礎知識匯總_(2)自己定義屬性及表單新特性

來源:互聯網
上載者:User

標籤:split   str   代碼   電話   min   使用   mit   高度   action   

自己定義屬性data-*

說起這個屬性,事實上如今非經常見了;怎麼說呢,由於在一些架構都能看到他的身影!!!
比方Jquery mobile,裡面非常頻繁的使用了這個屬性;

這個屬性是哪裡來的….當然是尾隨最新的H5一起出來的…..
相容性在PC端僅僅能呢說一般般(眼下.比較老式瀏覽器居多),,手機端支援還是比較OK的;

雖說是自己定義屬性,可是還是有一定的規格的,,比方首碼必須是data-[自己定義屬性];

比方

    <div data-id="id"></div>

這貨有什麼用呢?用來操作資料的居多,比方給一款遊戲弄一些額外的資訊!!(data-level,data-score);
而操作資料一般有兩種方式(原生JS和JQ):
1. 利用 getAttribute、setAttribute 存取 data[原生JS操作]
2. 利用 dataset API 存取 dataset [這樣的能夠直接忽略data-,相似對象直接訪問屬性,也是JS操作的]
3. jQuery使用attr 和 data 依次等同於上面兩種

在網上發現了一篇解說比較具體的操作資料,能夠瞄瞄
傳送門: http://blog.netsh.org/posts/html-data-jquery_1812.netsh.html

表單的進化!input添加的特性!email
郵箱: <input type="email" name="user_email" >
  • 若是用submit提交會驗證Email,檢查是否缺少@,@後面是否為空白….挺齊全的
url
首頁: <input type="url" name="user_url" >
  • 同上,會檢查內容格式,眼下僅僅支援絕對路徑!!!!
number
頁數: <input type="number" name="pagin" min="1" max="30" />
  • 有四個屬性:
    • min : 最小值 , 小於會報錯提醒
    • max : 最大值, 大於會報錯提醒
    • step : 默覺得1, 能夠看需求設定
    • value : 設定預設值,這個跟傳統的一樣
range
範圍:<input type="range" name="range" min="5" max="25" />
  • 這個和上面那個非常相似,連屬性值都一致了..就是表現形式不同,,顯示為滾動欄
  • 值得一提的是,寬高度的不一致決定了滾動欄的方向是水平還是垂直;h>w.垂直!!
Date pickers
 <input type="[attribute]" name="user_week" />

[attribute]換成以下的屬性就能看到各種效果了,,就是相容性不怎麼樣,chrome下正常;
等到各大瀏覽器都支援良好了,就能代替JS日期選取器了…. 一條代碼搞定一個日期選擇;

  • date - 選取日、月、年
  • month - 選取月、年
  • week - 選取周和年
  • time - 選取時間(小時和分鐘)
  • datetime - 選取時間、日、月、年(UTC 時間)
  • datetime-local - 選取時間、日、月、年(本地時間)
search
<input type="search" name="user_search" > 
  • 跟text相比,多了一個可關閉的X;另一些樣式上的差別;其它基本一致
tel
連絡方式: <input type="tel" name="user_tel" > 
  • 和text大同小異,支援不論什麼字元輸入
color
最喜歡的顏色: <input type="color" name="color" > 
  • 這個屬性相容性不是非常好,可是能夠支援的瀏覽器體驗非常好,就是一個color picker!!!
required
郵箱: <input type="email" name="user_email" required="required">
  • 防止域為空白時提交表單,傳回值是boolean, 設定了必須通過驗證才幹提交
placeholder
郵箱: <input type="email" name="user_email" required="required" placeholder="請輸入您的郵箱!!">
  • 這個屬性見怪不怪了,,有點相似預留位置,顯示一行淺灰色的字型,可是又是能夠編輯的,也能夠通過JS擷取當輸入為空白的時候,用placeholder的值替換
pattern
電話號碼: <input type="text" name="phone"pattern="[1-9]{11}" title="連絡人號碼" />
  • 眼下非常少看到, 可是正則卻非經常見,,待慢慢普及吧
novalidate
<form action="#" method="post" novalidate="true">郵箱: <input type="email" name="user_email" required="required" placeholder="請輸入您的郵箱!!" novalidate="true"><input type="submit" /></form>
  • H5特性之中的一個,驗證表單值;
  • novalidate的作用就是取消驗證,可作用於表單和input元素;
  • 預設不設定則為驗證!
multiple
<form action="#" method="post" novalidate="true">郵箱: <input type="email" name="user_email" required="required" placeholder="請輸入您的郵箱!!" novalidate="true" multiple="multiple"><input type="submit" /></form>
  • 支援上傳(file)和郵箱控制項(email)輸入多個值,值之間用逗號隔開(半形)
autofocus
    <input autofocus="autofocus" type="text">
  • 自己主動擷取焦點
autocomplete
    <input autofocus="autofocus" type="text" autocomplete="no">
  • h5下該屬性添加了開關功能(on/off),來決定是否自己主動完畢
表單新元素datalist
搜尋引擎: <input type="url" list="url_list" name="link" />        <datalist id="url_list">            <option label="Bing" value="http://www.bing.com" />            <option label="Baidu" value="http://www.baidu.com" />            <option label="Microsoft" value="http://www.microsoft.com" />        </datalist>
  • 如需把 datalist 綁定到輸入欄位,請用輸入欄位的 list 屬性引用 datalist 的 id
  • 下拉預設值設定在option的value中
keygen
<form action="#" method="post">username: <input type="text" name="usr_name" >加密方式: <keygen name="security" ><input type="submit" ></form>
  • 非常多瀏覽器對這屬性支援還不大完好,,,,
  • 加密方式兩種,原理還是通過公開金鑰和密鑰的方式(相似SSH)
progress
<progress value="5" max="70"></progress>
  • 進度條製作利器!!,用來推斷file這些的載入挺不錯的….
  • 必須設定max值才幹顯示相應的進度條,,不支持度百分比!!!
meter
<div>您的額度:<meter value="50001" min="0" max="10000" low="1000" high="9000" optimum="6000">盡情耍!!</meter> </div>
  • 用的不多,,眼下;也是進度條效果
  • min/max是最小值和最大值;
  • value是當前值
  • low和high是低於和高於最優值(optimum)
總結

表單來了一次大躍進,可是吧,,眼下還是沒法順心的用,,一些瀏覽器沒跟上,另一些使用者使用老版本號碼瀏覽器;
所以這些新特性的使用,,哪怕再人性化,也僅僅能慢慢來;過渡總須要時間的~~~

HTML5基礎知識匯總_(2)自己定義屬性及表單新特性

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.