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="toobar">
158 <li type="checkbox">Red</li>
159 <li type="checkbox">Blue</li>
160 </menu>