html5的一些表单属性_html/css_WEB-ITnose
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-24 11:29:40
IE8及以下不能很好支持这些属性
1 | <br>input属性:<br> placeholder:输入框的默认值,向用户显示描述性说明文字或者提示信息 <p> autocomplete:值为on和off。。on则代表当该字段填写并提交后再返回该页,再输入时会显示以前输入的。off则是关闭,包含用户输入数据的安全。默认为on<br> autofocus:页面载入时设置某个input自动获取焦点,注意该页面只能设置一个input的这个属性,设置多个相当于没有设置。<br> list特性和datalist:通过list为某个输入框增加下拉列表。。相当于js实现的“自动完成”功能,但是不能进行模糊查询<br> 如果datalist内有2项值: "a34343" 和 "并24234" ,用户希望的是输入了3后这2个值都出现,但实际上一个也不出现。<br> 它要求是完全匹配,比如输入a,则下拉a34343出现,接着输入4,那么这个下拉值也就没有了。<br> <br> required:表单提交前该元素必须填写,即不能为空。不建议使用,因为提示信息‘请填写此字段’,除非有属性可以代替该提示信息。<br> pattern:给input标签内写正则的地方。。type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。。<br> 不建议给type为email或url的元素使用,因为提示信息固定,正则固定。。还不如js直接重写。<br> <br> 一些输入设置:<br> rangeUnderflow 限制数值控件的最小值 设置min, input type= "number" min= "0" value= "20" <br> rangeOverflow 限制数值控件的最大值 设置max,input type= "number" max= "100" value= "20" <br> stepMismatch 确保输入值符合min,max,step的设置 设置max min step, input type= "number" min= "0" max= "100" step= "10" value= "20" <br></p>
|
登入後複製
1 | 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 输出表单output60 <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 | 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>
|
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2025-02-26 03:58:14
-
2025-02-26 03:38:10
-
2025-02-26 03:17:10
-
2025-02-26 02:49:09
-
2025-02-26 01:08:13
-
2025-02-26 00:46:10
-
2025-02-25 23:42:08
-
2025-02-25 22:50:13
-
2025-02-25 21:54:11
-
2025-02-25 20:45:11