HTML5 改良的 input 元素及示例

来源：互联网发布：数据库防护编辑：程序博客网时间：2024/06/05 19:17

1.url 类型
2.email 类型
3.date 类型
4.time 类型
5.datetime 类型
6.datetime-local 类型
7.month 类型
8.week 类型
9.number 类型
10.range 类型
11.search 类型
12.tel 类型
13.color 类型
14.output 元素

<!DOCTYPE html><html><head><meta charset="utf-8" />    <title>Input元素</title></head><body><!--url类型--><form>    <input type="url" name="url" value="http://www.baidu.com" />    <input type="submit" value="提交" /></form><br /><!--email类型--><form>    <input type="email" name="email" value="123456@qq.com" />    <input type="submit" value="提交" /></form> <br />    <input type="date" name="date" />    <input type="time" name="time" value="11:30" />    <input type="datetime" name="datetime" /><br /><br />    <input type="datetime-local" name="datetime-local" /><br /><br />        <input type="month" name="month" /><br></br>        <input type="week" name="week" /><br /><br />        <input type="number" name="number" value="10" max="100" min="0" step="5" /><br /><br />        <input type="color" name="color" id="currentColor" value="" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').value;" /><br /><br />        <input type="range" name="range" id="range" min="0" max="100" step="1" value="10"  onchange="range_change()" />    <output id="output">10%</output>    <script>        function range_change(){            var number = document.getElementById("range").value;            document.getElementById("output").value = number+"%";        }    </script></body></html>

0 0