zoukankan      html  css  js  c++  java
  • 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

    今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性。

    这些代码是在猎豹浏览器下实现的。

    html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color

    email:提交时会自动验证输入的内容是否满足格式

    邮箱 :<input type="email" name="user_email"/>


    url:提交时会自动验证输入内容是否为url

    url: <input type="url" name="user_url"/>


    number:用于输入数字,其中min为最小值,max为最大值,step为点击箭头是数字的变化量,value为默认值,min,max,step,value均可不写

     年龄:<input type="number" name="user_age" min="18" max="120" step="1" value="20"/>


    range:用于应该包含一定范围内数字值的输入域,显示为滑动条

     比例:<input type="range" name="user_range" min="10" max="100"/></br>

    date pickers:有date,month,week,time,datetime,datetime-local这几种类型,

    date--选取年月日,month---选取年月,week---选取年周,time--选取小时和分钟,datetime--选取年月日时间,datetime-local--选取本地时间

    这里给一个datetime-local的截图

    时间:<input type="datetime-local" name="user_date"/>


    datalist:相当于下拉列表,有自动补充功能

     网址: <input type="url" list="url_list" name="link" required />      <!-- 自动补充 -->
                 <datalist id="url_list">
                   <option label="web1" value="http://www.web1.com.cn" />
                   <option label="web2" value="http://www.web2.com" />
                   <option label="web3" value="http://www.web3.com" />
                 </datalist>


    color:颜色选择器

    颜色:<input type="color"/>


    还有两个类型是telephone和search,由于我使用时看不出效果来,就不在这里写了,大家自己试试。



  • 相关阅读:
    CISP/CISA 每日一题 七
    CISP/CISA 每日一题 六
    CISP/CISA 每日一题 五
    C++编码优化之减少冗余拷贝或赋值
    CISP/CISA 每日一题 四
    CISP/CISA 每日一题 三
    CISP/CISA 每日一题 二
    CISP/CISA 每日一题
    C#与C++ DLL的交互
    数据同步工具otter(二)
  • 原文地址:https://www.cnblogs.com/oversea201405/p/3752166.html
Copyright © 2011-2022 走看看