来认识更多的表单吧，增加知识面
我只创建了一个index.html帮助你认识它们
以下是代码
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <!--单按钮输入(单选)--> <form action = "" method = "POST"> <input type = "radio" name = "yesorno" value = "yes">Y</input> <!--<input>和</input>中间夹的东西在网页上显示--> <!--一个类型的选项推荐用同样的name值，增强代码可读性--> <br> <input type = "radio" name = "yesorno" value = "no">N</input> </form> <hr> <!--分割线--> <!--复选框输入(多选)--> <form action = "" method = "POST"> <!--你也可以写在一个表单里，我为了让你更清楚得读代码，所以就没那样做--> <input type = "checkbox" name = "spice" value = "Salt">Salt</input> <br> <input type = "checkbox" name = "spice" value = "Pepper">Pepper</input> <br> <input type = "checkbox" name = "spice" value = "Garlic">Garlic</input> </form> <hr> <!--表单里只有input元素吗？大错特错!!!--> <form action = "" method = "POST"> <!--文本区--> <textarea name = "name" rows = "10" cols = "50">My name is </textarea><!--<textarea>和</textarea>中间夹着的东西作为文本区里的起始文本--> </form> <hr> <p> 你喜欢什么颜色? </p> <form action = "" method = "POST"> <select name = "color"> <!--菜单--> <option value = "Black">黑色</option> <!--菜单选项--> <option value = "White">白色</option> <option value = "Blue">蓝色</option> <option value = "Red">红色</option> </select> </form> <hr> <form action = "" method = "POST"> <input type = "number" min = "0" max = "9"> <!--输入数字--> </form> <hr> <form action = "" method = "POST"> <input type = "range" min = "0" max = "15" step = "5"> <!--范围输入--> </form> <hr> <form action = "" method = "POST"> <input type = "date"> <!--输入日期--> </form> <hr> <!--下面这三种input元素都是文本输入的变种，可以在移动设备的浏览器中看到定制键盘--> <form action = "" method = "POST"> <input type = "email"> <!--输入Email--> <input type = "tel"> <!--输入电话号码--> <input type = "url"> <!--输入url--> </form> </body> </html>
以下是显示效果
发挥你的想象力创造出更整洁，更有用的表单
//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买
转载请注明出处 by:M_ZPHr
最后修改日期：2019-01-17