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

  • 相关阅读:
    std thread
    windows更新包发布地址
    How to set up logging level for Spark application in IntelliJ IDEA?
    spark 错误 How to set heap size in spark within the Eclipse environment?
    hadoop 常用命令
    windows 安装hadoop 3.2.1
    windows JAVA_HOME 路径有空格,执行软连接
    day01MyBatisPlus条件构造器(04)
    day01MyBatisPlus的CRUD 接口(03)
    day01MyBatisPlus入门(02)
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7468974.html
Copyright © 2011-2022 走看看