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

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

新老客户大回馈,云服务器低至5折

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

我只创建了一个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>

以下是显示效果

 

发挥你的想象力创造出更整洁,更有用的表单


//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买


转载请注明出处  by:M_ZPHr

最后修改日期:2019-01-17


原文链接:https://www.cnblogs.com/MZPHr/p/10282546.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:#WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证

下一篇:H5的语义化标签(PS: 后续继续补充)