html5新增了很多的form表单类型,学会这些表单你会发现h5有多么的神奇,摆脱js照样可以实现很多你无法想象的功能效果,而且h5对于网站的优化是非常好的,但是,新技术你懂得,兼容性是很差的,这是一个很棘手的问题,我们不需要理会,交给时间和趋势来解决它。我们需要做的是学习最前沿的技术,跟随趋势而走。
html5新增表单类型一览:
html5新的form表单类型代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < form method = "get" > < ul > < li >< p >以前的input:</ p >< input type = "text" value = "步浪是最棒的" /></ li > < li >< p >新的input:</ p >< input type = "text" placeholder = "步浪是最棒的" autofocus/></ li > < li >< p >搜索框:</ p >< input type = "search" placeholder = "输入您要搜索的内容..." /></ li > < li >< p >网络地址框:</ p >< input type = "url" placeholder = "输入您网址" /></ li > < li >< p >输入您的邮箱地址:</ p >< input type = "email" placeholder = "输入您的邮箱地址" /></ li > < li >< p >输入您的手机号:</ p >< input type = "tel" placeholder = "输入您的手机号" required/></ li > < li >< p >您喜欢的颜色:</ p >< input type = "color" /></ li > < li >< p >时间框(date):</ p >< input type = "date" /></ li > < li >< p >时间框(datetime):</ p >< input type = "datetime" /></ li > < li >< p >时间框(datetime-local):</ p >< input type = "datetime-local" /></ li > < li >< p >时间框(month):</ p >< input type = "month" /></ li > < li >< p >时间框(week):</ p >< input type = "week" /></ li > < li >< p >时间框(time):</ p >< input type = "time" /></ li > < li >< p >数字框:</ p >< input type = "number" /></ li > < li >< p >滑条:</ p >< input id = "range" type = "range" min ="0" max = "500" step ="50" value ="100"/>< b ></ b ></ li > < li >< input type = "submit" value = "提交" /></ li > </ ul > </ form > |
新表单源码下载:
案列效果图:
ps : html5新增了很多表单类型,今天小浪在这里给大家一一列举出来,希望对大家有所帮助!!!
1、压缩包密码:bulang123.cn;
2、如果您对效果源代码有什么建议,可以给我们留言,我们会及时处理;
3、如果您使用时有技术问题,可以加群(459450213)交流;