html5新增了很多的form表单类型,学会这些表单你会发现h5有多么的神奇,摆脱js照样可以实现很多你无法想象的功能效果,而且h5对于网站的优化是非常好的,但是,新技术你懂得,兼容性是很差的,这是一个很棘手的问题,我们不需要理会,交给时间和趋势来解决它。我们需要做的是学习最前沿的技术,跟随趋势而走。

        html5新增表单类型一览:

            QQ截图20150617193908.jpg

  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>


新表单源码下载:

html5新表单类型.zip


    案列效果图:

                    html5表单.png


       ps : html5新增了很多表单类型,今天小浪在这里给大家一一列举出来,希望对大家有所帮助!!!

       1、压缩包密码:bulang123.cn

            2、如果您对效果源代码有什么建议,可以给我们留言,我们会及时处理;

            3、如果您使用时有技术问题,可以加群(459450213)交流;


官方公众号