常見HTML5新增表單特性演示

antzone發表於2017-03-23
HTML

分享一段程式碼例項，它簡單演示了HTML5新增的一些常用表單新特性。

這些新特效能夠在一定程度上提高我們的開發效率。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form action="" method="get" id="foo">
  郵件：<input type="email" placeholder="請輸入正確的郵箱地址"/>
  <br />
  網址：<input type="url" />
  <br />
  日期：<input type="date" />
  <br />
  月份：<input type="month" />
  <br />
  周：   <input type="week" />
  <br />
  時間：<input type="datetime" />
  <br />
  數字：<input type="number"/>
  <br />
  滑動：<input type="range" min="0" max="100" step="1">
  <br />
  搜素：<input type="search" results="n" value="搜尋">
  <br />
  顏色：<input type="color" />
  <br />
  正規表示式：<input type="text" pattern="[789]+" required />
  <br />
  <datalist id="mydata">
    <option label="top1" value="asp.net"></option>
    <option label="top2" value="C#"></option>
    <option label="top3" value="ado"></option>
    <option label="top4" value="server"></option>
    <option label="top5" value="ajax"></option>
  </datalist>
  <input type="submit" />
</form>
</body>
</html>

相關文章