zoukankan      html  css  js  c++  java
  • html5 新增和改良的input 类型实例

    url

    test1.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>s</title>
    </head>
    <body>
    url提交成功
    </body>
    </html>

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form   action="test1.html"  method="post">
         <input type="url"   name="url" value="http://baidu.com">
           <input type="submit"  value="提交">
    </form>
    </body>
    </html>

    效果:

    email

    test1.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>s</title>
    </head>
    <body>
    email提交成功
    </body>
    </html>

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form   action="test1.html"  method="post">
         <input type="email"   name="email" value="1774761877@qq.com">
           <input type="submit"  value="提交">
    </form>
    </body>
    </html>

    效果:

     date

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form   >
         <input type="date"   name="date" value="">
    
    </form>
    </body>
    </html>

    效果:

    time

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form   >
         <input type="time"   name="time" value="10:00">
    
    </form>
    </body>
    </html>

    效果:

    month

     test..html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form>
         <input type="month"   name="month"  value="2017-9-3">
    
    </form>
    </body>
    </html>

    效果:

     week

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    </head>

    <body>
    <form>
    <input type="week" name="week" value="">

    </form>
    </body>
    </html>



     效果:

    number

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form>
        <input type="number"   name="number"  value="20"  min="10" max="100" step="10">
    
    </form>
    </body>
    </html>

     效果:

    range

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form>
        <input type="range"   name="range"  value="20"  min="10" max="100" step="5">
    
    </form>
    </body>
    </html>
    

     效果:

    color

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form>
        <input type="color"   name="color"
               onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value" >
         <span id="currentColor">
    
         </span>
    </form>
    </body>
    </html>

    效果:

    2017-09-03  11:02:15

  • 相关阅读:
    C++11并发——多线程std::thread (一)
    css属性操作
    mustache使用
    layer常用方法代码
    layer使用
    java后台获取和js拼接展示信息
    生成二维码
    循环体中去除一部分特定的数据
    eclipse工具maven项目打包文件不是最新修改的
    sql server数据库备份单个表的结构和数据生成脚本
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7468974.html
Copyright © 2011-2022 走看看