html5新增form表单类型

步浪
2016-10-28
HTML
1052

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

html5新增表单类型一览：

QQ截图20150617193908.jpg

html5新的form表单类型代码：

<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）交流；

上一篇新一代的html标签----html5

下一篇php自学征程（1）--序章