HTML5 智能form表單新屬性

XHTML中需要放在form之中的諸如inpu/button/select/textarea等標籤元素,在HTML5中完全可以放在頁面任何位置,然後通過新增的form屬性指向元素所屬表單的ID值,即可關聯起來。 html5中確實添加了不少的新的屬性,給我們省去了好大的功夫去判斷。

<FORM id=foo>

</FORM>

<INPUT … form="foo">

智能表單使用與規範

<input type=email  … 限制用戶輸入email格式
<input type=url  … 限制用戶輸入網址格式
<input type=date  … 限制用戶輸入日期格式
<input type=time  … 限制用戶輸入時間格式
<input type=month  … 限制用戶輸入月份格式
<input type=week  … 限制用戶輸入周格式
<input type=number  … 限制用戶輸入數字格式
<input type=range  … 一個滑動條效果
<input type=search  … 搜索格式 results="n"
<input type=color  … 選擇顏色格式

*********************************************自己練習的代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">


        input
        {
             width:200px;
             height:20px;
        }
    </style>
</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" value="sub" />




 </form>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章