html5的一些表單屬性_ZenDei技術網路在線

IE8及以下不能很好支持這些屬性input屬性： placeholder:輸入框的預設值，向用戶顯示描述性說明文字或者提示信息 autocomplete：值為on和off。。on則代表當該欄位填寫並提交後再返回該頁，再輸入時會顯示以前輸入的。off則是關閉，包含用戶輸入數據的安全。預設為on aut...

IE8及以下不能很好支持這些屬性

<pre>
input屬性：
placeholder:輸入框的預設值，向用戶顯示描述性說明文字或者提示信息

autocomplete：值為on和off。。on則代表當該欄位填寫並提交後再返回該頁，再輸入時會顯示以前輸入的。off則是關閉，包含用戶輸入數據的安全。預設為on
autofocus：頁面載入時設置某個input自動獲取焦點，註意該頁面只能設置一個input的這個屬性，設置多個相當於沒有設置。
list特性和datalist：通過list為某個輸入框增加下拉列表。。相當於js實現的“自動完成”功能，但是不能進行模糊查詢
如果datalist內有2項值："a34343"和"並24234",用戶希望的是輸入了3後這2個值都出現，但實際上一個也不出現。
它要求是完全匹配，比如輸入a，則下拉a34343出現，接著輸入4，那麼這個下拉值也就沒有了。

required：表單提交前該元素必須填寫，即不能為空。不建議使用，因為提示信息‘請填寫此欄位’，除非有屬性可以代替該提示信息。
pattern：給input標簽內寫正則的地方。。type為email或url的輸入控制項內置相關正則表達式，如果value不符合其正則表達式，那表單將通不過驗證，無法提交。。
不建議給type為email或url的元素使用，因為提示信息固定,正則固定。。還不如js直接重寫。

一些輸入設置：
rangeUnderflow 限制數值控制項的最小值設置min， input type="number" min="0" value="20"
rangeOverflow 限制數值控制項的最大值設置max，input type="number" max="100" value="20"
stepMismatch 確保輸入值符合min,max,step的設置設置max min step， input type="number" min="0" max="100" step="10" value="20"
</pre>

 1 <input type="number" min="0" value="0">
 2 
 3 <input type="number" max="100" value="20">
 4 
 5 <input type="number" min="0" max="100" step="10" value="20">
 6 
 7 <hr />
 8 List特性和datalist:<br/> 
 9 <input type="url" list="url_list" name="link" />
10 <datalist id="url_list">
11 <option label="W3School" value="http://www.w3school.com.cn" />
12 <option label="Google" value="http://www.google.com" />
13 <option label="Microsoft" value="http://www.microsoft.com" />
14 </datalist>
15 
16 
17 <hr />
18 <form action="http://www.baidu.com" method="get" id="register"></form>
19 url：<input type="url" name="url" form="register" required/><br />
20 user：<input type="text" name="user" value="" form="register"/><br />
21 pwd：<input type="password" name="pwd" value="" form="register" /><br />
22 <select name="year" form="register">
23     <option value="1970">1970</option>
24     <option value="1980">1980</option>
25     <option value="1990">1990</option>
26 </select>
27 <input type="submit" value="註冊" form="register"/>
28 
29 
30 <hr />
31 正則：<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>
32 
33 郵箱：<input type="email" name="youxinag" value="" placeholder="這是預設值" autofocus="autofocus" form="register" required="required" /><br />
34 地址：<input type="url" name="url" form="register" form="register"/>
35 DATE:<input type="date" name="riqi" value="" form="register"/><br />
36 TIME:<input type="time" name="shijian" value=""/>
37 MONTH:<input type="month" name="yue" value="" />
38 周：<input type="week" name="zhou" value="" />
39 數字：<input type="number" name="suzhi" value="" form="register" /><br />
40 滑動條<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
41 搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
42 顏色：<input type="color" name="huadong" form="register"/><br />
43 <input type="file" id="a33" />
44 
45 
46 
47 <hr />
48 自動填充表單<br/>
49 <input type="text" name="auto" value="" list="movie" />
50 <datalist id="movie">
51 <option>11111111</option>
52 <option>243234234</option>
53 <option>3324234</option>
54 </datalist>
55 <hr />
56 
57 
58 
59 輸出表單output
60 <form action="" method="post" id="output" oninput="result.value=parseInt(no1.value*no2.value)" >
61 <input type="number" name="no1" value="" />
62 <input type="number" name="no2" value="" />
63 <output name="result" ></output>
64 </form>
65 <hr />

  1 <h3>number特性</h3>
  2 <div id="info" style="width:350px;"></div>
  3 
  4 
  5 <input type="number" min="0" value="0">
  6 
  7 <input type="number" max="100" value="20">
  8 
  9 <input type="number" min="0" max="100" step="10" value="20">
 10 
 11 <hr />
 12 <h3>List特性和datalist:</h3> 
 13 <input type="url" list="url_list" name="link" />
 14 <datalist id="url_list">
 15 <option label="W3School" value="http://www.w3school.com.cn" />
 16 <option label="Google" value="http://www.google.com" />
 17 <option label="Microsoft" value="http://www.microsoft.com" />
 18 </datalist>
 19 
 20 <h3>datalist</h3>
 21 <form>
 22 <input id="myCar" list="car">
 23 <datalist id="car">
 24 <option value="BMW"></option>
 25 <option value="Ford"></option>
 26 <option value="Volvo"></option>
 27 </datalist>
 28 </form>
 29 <hr />
 30 
 31 <h3>表單</h3>
 32 <form action="http://www.baidu.com" method="get" id="register"></form>
 33 url：<input type="url" name="url" form="register" required/><br />
 34 user：<input type="text" name="user" value="" form="register"/><br />
 35 pwd：<input type="password" name="pwd" value="" form="register" /><br />
 36 <select name="year" form="register">
 37     <option value="1970">1970</option>
 38     <option value="1980">1980</option>
 39     <option value="1990">1990</option>
 40 </select>
 41 <input type="submit" value="註冊" form="register"/>
 42 
 43 正則：<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>
 44 
 45 郵箱：<input type="email" name="youxinag" value="" placeholder="這是預設值" autofocus="autofocus" form="register" required="required" /><br />
 46 地址：<input type="url" name="url" form="register" form="register"/>
 47 DATE:<input type="date" name="riqi" value="" form="register"/><br />
 48 TIME:<input type="time" name="shijian" value=""/>
 49 MONTH:<input type="month" name="yue" value="" />
 50 周：<input type="week" name="zhou" value="" />
 51 數字：<input type="number" name="suzhi" value="" form="register" /><br />
 52 滑動條<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
 53 搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
 54 顏色：<input type="color" name="huadong" form="register"/><br />
 55 <input type="file" id="a33" />
 56 
 57 
 58 <hr />
 59 <h3>自動填充表單</h3>
 60 <input type="text" name="auto" value="" list="movie" />
 61 <datalist id="movie">
 62 <option>11111111</option>
 63 <option>243234234</option>
 64 <option>3324234</option>
 65 </datalist>
 66 <hr />
 67 
 68 
 69 
 70 <h3>output</h3>
 71 <form action="" method="post" id="output" oninput="result.value=parseInt(no1.value*no2.value)" >
 72 <input type="number" name="no1" value="" />
 73 <input type="number" name="no2" value="" />
 74 <output name="result" ></output>
 75 </form>
 76 <hr />
 77 
 78 
 79 <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
 80 0
 81 <input type="range" id="a" value="50">
 82 100+
 83 <input type="number" id="b" value="50">
 84 =
 85 <output name="x" for="a b"></output>
 86 </form>
 87 <hr />
 88 
 89 <h3>progress</h3>
 90 <progress max="100" value="85">
 91 <span>85</span>%
 92 </progress>
 93 <hr />
 94 
 95 <h3>time</h3>
 96 發佈日期：<time datetime="2015-7-29T15:50">15:50</time>
 97 更新日期：<time datetime="2015-7-29:16:00" pubdate>16:00</time>
 98 <hr />
 99 
100 <h3>ruby</h3>
101 <ruby>
102 漢
103 <rt>這裡是註釋</rt>
104 <rp>漢（這裡是不支持時顯示）</rp>
105 </ruby>
106 <hr />
107 
108 <h3>wbr軟換行</h3>
109 <p>如果想學習 AJAX, 那麼必須熟悉 XML<wbr></wbr>HttpRequest 對象。</p>
110 <hr />
111 
112  <h3>canvas</h3>
113 <canvas id="myCanvas"></canvas>
114 <script type="text/javascript">
115 var canvas = document.getElementById("myCanvas");
116 canvas.style.width = "200px";
117 canvas.style.height = "200px";
118 var ctx = canvas.getContext("2d");
119 ctx.fillStyle = "red";
120 ctx.fillRect(0, 0, 80, 100);
121 </script>
122 <hr />
123 
124 <h3>conmmand</h3>
125 <menu>
126 <conmmand onclick="alert('Hello World!')"></conmmand>
127 Click Me!
128 </menu>
129 <hr />
130 
131 <h3>details</h3>
132 <details open>
133 <summary>MacBook Pro Specification</summary>
134 <ul>
135 <li>A</li>
136 <li>B</li>
137 <li>C</li>
138 <li>D</li>
139 <li>E</li>
140 </ul>
141 </details>
142 <hr />
143 
144 
145 <h3>keygen</h3>
146 <form action="www.baidu.com" method="get">
147 Username:
148 <label>
149 <input type="text" />
150 </label>
151 <keygen name="security">
152 <input type="submit">
153 </form>
154 
155 
156 <h3>menu</h3>
157 <menu type