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=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="北京">北京</option>
67 <option value="上海">上海</option>
68 <option value="广州">广州</option>
69 <option value="深圳">深圳</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="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>
时间： 2024-08-25 18:25:16