<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<title>表单元素</title>
<style>
table{
border:1px solid #ddd;
border-collapse:collapse;
}
th,td{
border:1px solid #ddd;
padding:5px;
}
</style>
<script>
function txtRange_change(){
var value=document.frm.txtRange.value;
console.log(value);
}
function getValue(){
//1.获取txtColor控件的value
var color=document.frm.txtColor.value;
console.log("txtColor:"+color);
}
</script>
</head>
<body>
<form name="frm">
<table>
<tr>
<th>名称</th>
<th>控件</th>
<th>说明</th>
</tr>
<tr>
<td>Email类型</td>
<td>
<input type="email" name="txtEmail">
</td>
<td>要求用户输入Email类型数据,提交表单时,会自动验证</td>
</tr>
<tr>
<td>search类型</td>
<td>
<input type="search" name="txtSearch">
</td>
<td>搜索文本框,与text相似,特点是数据允许被快速删除</td>
</tr>
<tr>
<td>url类型</td>
<td>
<input type="url" name="txtUrl">
</td>
<td>对用户输入的数据进行URL检测,如果不符合规范,给出提示,并阻止表单提交</td>
</tr>
<tr>
<td>tel类型</td>
<td>
<input type="tel" name="txtTel">
</td>
<td>注意:只对移动终端有效,会显示出拨号键盘,通过该键盘接收用户录入的数据</td>
</tr>
<tr>
<td>数字类型</td>
<td>
<input type="number" name="txtnumber" min="18" max="80" step="3">
</td>
<td>只能接收数字,min表示数字范围下限值,max表示数字范围的上限值,step表示步长</td>
</tr>
<tr>
<td>范围类型</td>
<td>
<input type="range" name="txtRange" id="txtRange" min="18" max="80" step="1" value="18" onChange="txtRange_change()">
</td>
<td>提供一个滑块工具给用户去选择指定范围内的数值</td>
</tr>
<tr>
<td>颜色类型</td>
<td>
<input type="color" name="txtColor" id="txtColor" >
</td>
<td>弹出一个调色版提供给用户选取颜色</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交">
<input type="button" value="取值"onclick="getValue()">
</td>
</table>
</form>
</body>
</html>