首页 > 代码库 > 【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】增强的表单