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

查看全文

相关阅读:
学习bn算法
 记录pytorch的几个问题
 Python: 你不知道的 super
cmd里面怎么复制粘贴
 tensorflow的transpose
应该做一个软件,直接把视频里面的英语,转换成字幕,然后翻译
 继续修改,爬虫贴吧,上次的每次只取一个图片.
Deleting elements
Map, filter and reduce
List methods

原文地址：https://www.cnblogs.com/guangzhou11/p/7468974.html