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++程序设计第二周作业
    navicat 连接windows服务器中的mysql数据库
    Python 多进程(二度回顾)
    MySQl 合并结构相同的多张表
    Python 验证码识别-- tesserocr
    Navicat Premium 修改MySQL密码(忘记密码的情况下)
    Navicat Premium 出现2059错误解决办法
    MySQL 1053错误 服务无法正常启动的解决方法
    mysql触发器trigger 实例详解
    navicat for mysql 连接报错1251详细解决步骤
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7468974.html
Copyright © 2011-2022 走看看