上次咱们一起学习了一下一些常用的input表单，这次随小编来看一下html5新增了哪些吧。
不知道大家注意到没有，上次咱们提到了单选框、多选框，但在实际使用中除了这两个还有一个也很常用，是什么呢，我们一起来看一下：
携程网.png
相信大家在上网过程中一定遇到过这类下拉菜单，那它是怎么实现的呢？不要着急，咱们这次就从它开始，来互相学习一下html5新增的input表单。
1、下拉菜单
<select>
<option >江苏</option>
<option >北京</option>
<option >上海</option>
</select>
显示如下：
下拉框.png
下拉框中的选项内容写在<option></option>中，即可实现下拉菜单；
2、定义拾色器
听上去很高大上，其实就是字面意思，就是用来选取颜色用的，它的代码如下：
<input type="color">
在不点击它的时候是这样的：
定义拾色器1.png
这时候可以看到啥也没有，点击它时会出现一个调色板，用以选取颜色:
定义拾色器2.png
3、定义时间
①年/月/日
在浏览网页的时候也常见一下用以选择时间的表单，例如:
携程日期选择.png
他就可以通过这个来实现，我们先来看一下它如何实现：
其实很简单，仅仅一行代码
<input type="date">
可以和携程这个实现同样的功能
年月日.png
当然啦，没它那个好看，这个样式具体怎样可以根据个人喜好或者工作要求去修改。
还有类似可以选择其他不同时间的表单标签，咱们一起来看一下
②年/月/日/时/分
<input type="datetime-local">
它比年月日多了一个具体时间：
年月日时分.png
③年/月
<input type="month">
这个只可以选择年月，无法选择具体日期
年月.png
④年/周
<input type="week">
只能显示哪一年第几周
年周.png
⑤时间
<input type="time">
只能选择具体时间
时间.png
4、定义email地址
<input type="email">
和文本框长一样，但搭配提交使用输入的e-mail地址必须合法
email.png
5、数字文本框
<input type="number">
和文本框也很相似，当点击它的时候会出现一个调整数字大小的钮，也只能输入数字
数字文本框.png
6、数字选择空间
<input type="range">
这个用在音量调节上比较多，长这样：
数字选择控件.png
它是可以滑动的。
7、搜索框
<input type="search">
这个也和文本框长一样，它是定义搜索功能的文本框
搜索框.png
8、手机号码文本框
<input type="tel">
又是一个和文本框长一样的框，它只能输入合法的手机号码
手机号码框.png
9、网络地址文本框
<input type="url">
它也和普通文本框长一样，它和文本框的区别在于只能输入合法网络地址
网络地址文本框.png
input表单中得到各种文本框基本的长一样，区别在于定义的功能不同，不同场合使用不同文本框。
input表单基本介绍完了，今天就暂时到这吧。当然它们还有很多属性，小编将在下期和大家一起讨论input表单的各种属性，请大家持续关注哦。
小编作为初学者，多有不足和不对的地方，希望大家指出，同时也希望能和大家一起学习交流！
未完待续。。。。。。
网友评论