首页 > 代码库 > 【HTML5】增强的表单
【HTML5】增强的表单
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <details open=""> 9 <summary>summary是配合details用的元素，给details设置标题</summary> 10 这是details元素演示！ 11 <br>这是detail演示。 12 </details> 13 <form action=""> 14 用户名：<input type="text" name="username">学号<input type="text" name="sno" pattern="[0-9]{4,5}"> 15 密钥： <keygen name="keygen"><!--kengen是单标签，开发工具有bug，会自动补齐成双标签。--> 16 <input type="submit" name=""> 17 </form> 18 <form> 19 <fieldset><legend>请登录：</legend> 20 <input type="text" name=""> 21 <input type="password" name=""> 22 <input type="submit" name=""> 23 </fieldset> 24 <br> 25 <input type="text" name=""> 26 <input type="password" name=""> 27 <input type="submit" name=""> 28 </form> 29 <hr> 30 <form oninput="number.value=http://www.mamicode.com/parseInt(number1.value)+parseInt(number2.value)"> 31 <input type="number" id="number1">+<input type="number" id="number2">=<output name="number" for="number1 number2" style="background: green"></output> 32 </form> 33 <br><hr> 34 <form action=""> 35 <textarea name="textarea" cols="20" rows="6" placeholder="这是默认文本框内容" style="background: #E0FFFF" ></textarea> 36 <button type="submit" style="background: #F0E68C;border-radius: 10px;padding: 10px" formaction="http://www.sogou.com">提交<img src="img/花1.jpg" width="10" height="10"></button> <button type="reset">重置</button><button type="button">普通按钮</button> 37 </form> 38 <form> 39 <select> 40 <optgroup label="前端"> 41 <option>HTML5</option> 42 <option>CSS3.0</option> 43 <option>javascript</option> 44 </optgroup> 45 <optgroup label="后端"> 46 <option label="javaEE">java</option><!--option元素中的label属性是高优先级，此时显示javaEE而不显示java了。--> 47 <option>Linux</option> 48 <option>MySQL</option> 49 </optgroup> 50 </select> 51 </form> 52 <form action="" id="form1" novalidate=""> 53 <br><hr> 54 <input type="checkbox" name="" id="checkbox1"><label for="checkbox1">标签</label><!--和checkbox1关联，当点击标签时也会触发checkbox1动作--> 55 <label><input type="radio" name="radio">男</label><label><input type="radio" name="radio">女</label><!--此法要去掉Label的for属性--> 56 邮箱<input type="email" name="email1"> 57 <select name="myselect"><!--若想在提交时将此作为参数一并提交则需要加name属性。可用属性size="2" multiple--> 58 <optgroup> 59 <option value="北京">北京</option> 60 <option value="上海">上海</option> 61 <option value="广州">广州</option> 62 <option value="深圳">深圳</option> 63 </optgroup> 64 <!-- 65 <optgroup> 66 <option value="http://www.mamicode.com/北京">北京</option> 67 <option value="http://www.mamicode.com/上海">上海</option> 68 <option value="http://www.mamicode.com/广州">广州</option> 69 <option value="http://www.mamicode.com/深圳">深圳</option> 70 </optgroup> 71 --> 72 </select> 73 <input type="submit"> 74 </form> 75 <input type="text" list="datalist1" form="form1" name="input1"><!--form=form1的作用是form1表单的提交动作可以把input1也作为参数提交。--> 76 <datalist id="datalist1"> 77 <option>合肥</option> 78 <option>芜湖</option> 79 <option>马鞍山</option> 80 </datalist> <br> 81 meter元素<meter min="0" max="100" value="10" low="30" high="70" optimum="50"></meter><br> 82 meter元素<meter min="0" max="100" value="30" low="30" high="70" optimum="50"></meter><br> 83 meter元素<meter min="0" max="100" value="50" low="30" high="70" optimum="50"></meter><br> 84 meter元素<meter min="0" max="100" value="70" low="30" high="70" optimum="50"></meter><br> 85 meter元素<meter min="0" max="100" value="90" low="30" high="70" optimum="50"></meter><br> 86 proress元素<progress value="1" max="10"><!--可设置小数value="http://www.mamicode.com/0.1" max="1"--> 87 <br> 88 </body> 89 </html>
一个实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 body{background: #DCDCDC} 8 form{width: 30%;background: #228b22;padding: 9px;margin-left: 450px;margin-top: 100px} 9 button{background: #FFFACD;padding: 4px;border-radius: 8px} 10 input{padding: 5px;} 11 input:focus{background: #7FFF00} 12 button:hover{padding: 9px;background: #FFFF00} 13 </style> 14 </head> 15 <body> 16 <form> 17 <fieldset width="200" height="150"><legend>新用户注册</legend> 18 <label for="username">用户名：</label><input type="text" id="username" placeholder="用户名" required="" autofocus=""><br><br> 19 <label>密 码：<input type="password" name="" placeholder="密码"></label> 20 <p><label>手 机：<input type="text" name="" pattern="1[0-9]{10}" placeholder="手机号码"></label></p> 21 <label>邮 箱：<input type="email" name="" placeholder="电子邮箱"><br></label> 22 <button>注册</button> 23 </fieldset> 24 </form> 25 </body> 26 </html>
【HTML5】增强的表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。