首页 > > 网页制作 > css >

#WEB安全基础 : HTML/CSS | 0x10.1更多表单

2019-01-21 02:38:31来源：博客园阅读 ()

来认识更多的表单吧，增加知识面

我只创建了一个index.html帮助你认识它们

以下是代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset = "utf-8">
 5 </head>
 6 <body>
 7 <!--单按钮输入(单选)-->
 8 <form action = "" method = "POST">
 9 <input type = "radio" name = "yesorno" value = "yes">Y</input>        <!--<input>和</input>中间夹的东西在网页上显示-->            <!--一个类型的选项推荐用同样的name值，增强代码可读性-->
10 <br>
11 <input type = "radio" name = "yesorno" value = "no">N</input>
12 </form>
13 <hr>        <!--分割线-->
14 <!--复选框输入(多选)-->
15 <form action = "" method = "POST">        <!--你也可以写在一个表单里，我为了让你更清楚得读代码，所以就没那样做-->
16 <input type = "checkbox" name = "spice" value = "Salt">Salt</input>
17 <br>
18 <input type = "checkbox" name = "spice" value = "Pepper">Pepper</input>
19 <br>
20 <input type = "checkbox" name = "spice" value = "Garlic">Garlic</input>
21 </form>
22 <hr>
23 <!--表单里只有input元素吗？大错特错!!!-->
24 <form action = "" method = "POST">        <!--文本区-->
25 <textarea name = "name" rows = "10" cols = "50">My name is </textarea><!--<textarea>和</textarea>中间夹着的东西作为文本区里的起始文本-->
26 </form>
27 <hr>
28 <p>
29 你喜欢什么颜色?
30 </p>
31 <form action = "" method = "POST">
32 <select name = "color">                        <!--菜单-->
33 <option value = "Black">黑色</option>        <!--菜单选项-->
34 <option value = "White">白色</option>
35 <option value = "Blue">蓝色</option>
36 <option value = "Red">红色</option>
37 </select>
38 </form>
39 <hr>
40 <form action = "" method = "POST">
41 <input type = "number" min = "0" max = "9">        <!--输入数字-->
42 </form>
43 <hr>
44 <form action = "" method = "POST">
45 <input type = "range" min = "0" max = "15" step = "5">        <!--范围输入-->
46 </form>
47 <hr>
48 <form action = "" method = "POST">
49 <input type = "date">        <!--输入日期-->
50 </form>
51 <hr>
52 <!--下面这三种input元素都是文本输入的变种，可以在移动设备的浏览器中看到定制键盘-->
53 
54 <form action = "" method = "POST">
55 <input type = "email">        <!--输入Email-->
56 <input type = "tel">        <!--输入电话号码-->
57 <input type = "url">        <!--输入url-->
58 </form>
59 </body>
60 </html>