#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>
以下是显示效果
发挥你的想象力创造出更整洁,更有用的表单
//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买
转载请注明出处 by:M_ZPHr
最后修改日期:2019-01-17
原文链接:https://www.cnblogs.com/MZPHr/p/10282546.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
- HTML基础01 2020-06-07
- [03]HTML基础之行内标签 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash