Home >Web Front-end >HTML Tutorial >html5的一些表单属性_html/css_WEB-ITnose

html5的一些表单属性_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:29:401271browse

IE8及以下不能很好支持这些属性

<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 <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 <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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn