#WEB安全基础 : HTML/CSS | 0x10.1更多表单
程序员文章站
2023-01-14 20:51:41
来认识更多的表单吧，增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 1 2 3 4 5 6 7 8 ......
来认识更多的表单吧，增加知识面
我只创建了一个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
上一篇： 抹茶交易所服务揭秘，从海底捞到狼人杀