来认识更多的表单吧,增加知识面
我只创建了一个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