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