html5改良的input元素的种类
2024-08-27 06:40:51
1.url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、
month类型、week类型、number类型、range类型、search类型、tel类型、color类型
<!--url类型-->
<form>
<input name="url" type="url" value="http://www.baidu.com">
<input type="submit" value="提交">
</form>
<!--email类型-->
<form>
<input type="email" type="email" value="admin@qq.com">
<input type="submit" value="提交">
</form>
<!--date类型-->
<input type="date" name="date" value="">
<br/>
<!--time类型-->
<input name="time" type="time" value="10:00">
<!--datetime类型-->（utc编码格式，国际时间）
<input name="datetime" type="datetime" value="">
<!--datetime-local类型-->(本地时间，会进行判断)
<input name="datetimelocal" type="datetime-local">
<!--month元素-->(只能选择月份)
<input name="month" type="month" value="2010-01-01">
<!--week元素-->
<input name="week" type="week">
<!--number类型-->
<input name="number" type="number" value="12" min="10" max="100" step="5">
<!--计算器-->
<script>
function sum(){
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber=n1+n2;
}
</script>
<form>
<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum()">
</form>
range类型的input元素
是一个只允许输入一段范围内数值的文本框，具有最大值和最小值属性，具有step属性，
<input name="range" type="range" value="25" min="0" max="100" step="5">
<!--search类型-->
<input type="search">
<!--tel类型-->
<input type="tel">
<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor ').textContent=this.value">
<span id="currentColor"></span>
<!--output元素的追加-->
<script>
function value_change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change() ">
<output id="output">10</output>
</form>
表单验证
<script>
function check(){
var email=document.getElementById("email");
if(email.value==""){]
alert("请输入email");
return false;
}else if(!email.checkValidity()){
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check() " novalidate="true">
<label for="email">Email</label>
<input name="email" type="email" id="email"><br/>
<input type="submit">
</form>
最新文章
- 面对bug和困难的心态
- 深入浅出ExtJS 第七章 弹出窗口
- 按照自己的理解实现比特交换协议(alternating-bit protocol)
- 网上图书商城项目学习笔记-037工具类之BaseServlet及统一中文编码
- 关于java.util.Properties读取中文乱码的正确解决方案（不要再用native2ascii.exe了）
- LightOj_1317 Throwing Balls into the Baskets
- [原]Hadoop海量视频、图像分析分布式处理总结
- C题
- composer在ubuntu下安装
- 自动匹配HTTP请求中对应实体参数名的数据（性能不是最优）
- C#泛型类之List<T>
- Linux ldconfig 查看动态库连接
- pureMVC简单示例及其原理讲解一(开篇)
- Webpack学习系列（二）
- 《AI算法工程师手册》
- leetcode python 033 旋转数组查找
- 详解angular2组件中的变化检测机制（对比angular1的脏检测）
- NPOI设置单元格背景色
- centos7 安装部署jenkins
- Mysql实现null值排在最前或最后