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

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>