- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title> 测试 </title>
- <meta name="keywords" content="">
- <meta name="description" content="">
- <style>
- </style>
- </head>
- <body>
- <form method=""action="https://www.baidu.com/">
- type="email":<input type="email" name=""value="" placeholder="请输入电子邮箱" required>
- <input type="submit" name=""value=" 提交 ">
- </form>
- <h1>-------------</h1>
- <form method=""action="https://www.baidu.com/">
- type="url":<input type="url" name=""value="" autofocus>
- <input type="submit" name=""value=" 提交 ">
- </form>
- <h1>-------------</h1>
- type="date":<input type="date" name=""value="">
- <h1>-------------</h1>
- type="time":<input type="time" name=""value="">
- <h1>-------------</h1>
- type="datetime":<input type="datetime" name=""value="">
- <h1>-------------</h1>
- type="datetime-local":<input type="datetime-local" name=""value="">
- <h1>-------------</h1>
- type="month":<input type="month" name=""value="">
- <h1>-------------</h1>
- type="week":<input type="week" name=""value="">
- <h1>-------------</h1>
- type="number":<input type="number" name=""value="40"min="0"max="100"step="20">
- <h1>-------------</h1>
- type="range":<input type="range" name=""value="50"min="0"max="100"step="10">
- <h1>-------------</h1>
- <form method=""action="https://www.baidu.com/">
- type="tel":<input type="tel" name=""value="" pattern="[0-9]{7,12}">
- <input type="submit" name=""value=" 提交 ">
- </form>
- <h1>-------------</h1>
- type="search":<input type="search" results="10" name=""value="">
- <h1>-------------</h1>
- type="color":<input type="color" name=""value="#000"id="col">
- <span id="txt"> 选择文字颜色 </span>
- <h1>-------------</h1>
- <h1>-------------</h1>
- <h1>-------------</h1>
- <h1>-------------</h1>
- <h1>-------------</h1>
- <h1>-------------</h1>
- </body>
- <script>
- var col=document.getElementById('col');
- var txt=document.getElementById('txt');
- col.oninput=function (){
- txt.style.color=col.value;
- }
- </script>
- </html>
来源: http://www.qdfuns.com/article/35646/1ffd2c6f425ee1a458b62d3ad94b2ea5.html