HTML5表单元素:
input类型:电子邮件类型、搜索类型、URL类型、电话号码类型、数字类型、范围类型、颜色类型、日期类型、周类型、月类型、日期与时间类型、本地日期与时间类型
在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码。上述的不足,都已经在HTML5中被克服了。HTML5在以上的基础上增加了新的标签和属性。
电子邮件类型:
语法:<input type="email"/>
自动进行验证,如果不通过则会显示错误提示。
搜索类型:
输入关键字操作的文本框,基本上和文本框一样,但是能快速实现文本的删除切换
语法:<input type="search"/>
URL类型:
输入web站点地址的文本框,严格要求输入的网址必须以http:\\开头
语法:<input type="url" />
例:
<head>
<meta charset="utf-8"/>
<title> HTL5表单元素 </title>
<style>
table{border:1px solie black;border-collapse:collapse;}
th,td{border:1px solid black;padding:5px;}
</style>
</head>
<script>
function txtRange_change(){
var value = document.frm.txtRange.value;
console.log("RangeValue:"+value);
}
function getValue(){
var frm = document.frm;
//1、获取txtColor控件的value
var value = document.frm.txtColor.value;
console.log("txtColor:" + value);
//2、获取日期类型控件数据
var date =frm.txtDate.value;
var week = frm.txtWeek.value;
var month = frm.txtMonth.value;
console.log("Date:"+date);
console.log("Week:"+week);
console.log("Month:"+month);
//3、获取日期与时间(本地)
var datetime = frm.txtDatetime.value;//日期与时间
var datetimeLocal = frm.txtDatetimeLocal.value;//本地
window.alert("Datetime:"+datetime);
console.log("datetimeLocal:"+datetimeLocal);
//4、获取 txtNewEmail的值
console.log("txtNewEmail:"+frm.txtNewEmail.value);
}
</script>
<body>
<form name="frm">
<table>
<tr>
<th>名称</th>
<th>控件</th>
<th>说明</th>
</tr>
<tr>
<td>Email类型</td>
<td>
<input type="email" name="txtEamil" id ="txtEmail" />
</td>
<td>要求用户输入Email类型数据,提交表单时,会自动验证</td>
</tr>
<tr>
<td>Search类型</td>
<td>
<input type="search" name="txtSearch" id ="txSearch" />
</td>
<td>搜索文本框,与text相似,特点是数据允许被快速删除</td>
</tr>
<tr>
<td>URL类型</td>
<td>
<input type="url" name="txtUrl" id ="txtUrl" />
</td>
<td>对用户输入的数据进行URL检测,如果不符合规范,给出提示,阻止表单提交</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交"/>
<input type="button" value="取值"/>
</td>
</tr>
</table>
</form>
</body>
HTML5是支持移动终端的
电话号码类型:主要针对电话号码的输入,能够指示浏览器根据不同的设备进行调整。
<input type="tel" />
注意:只对移动终端有效,会显示出拨号键盘,通过该键盘接收用户录入的数据。可以在笔记本上架一个服务器,然后用手机访问笔记本上的这个网页
数字类型:只能接收数字值
语法:<input type="number"/>
属性:min:当前域能够接收的最小值
max:当前域能接收的最大值
step:决定了域所接收值递增或递减的步长,默认为1
例:<input type="number" name="txtNumber" id ="txtNumber" max="10" min="3" step="2" />
范围类型:
<input type="range" min="" max="" value="">
value:设定初始值
例:<td>
2<input type="range" min="2" max="20" value="2" name="txtRange" />10
</td>
颜色类型:
预定义的颜色拾取控件:
语法:<input type="color" />
例:<input type="color" name="txtColor" />
自定义调色器:
通过三个范围选择控件表示R、G、B,并且默认为0,最大为255
练习1:通过三个滑块选取颜色值,并且显示在div的背景上
step1:由于获取处理的数值都是0~255,赋值方式rgb(255,255,255)
div.style.backgroundColoe=rgb(255,255,255)
step 2 : 让三个滑块执行同一事件 , 事件中,获取三个滑块的值,构建成 rgb(v1,v2,v3)
css颜色组成:
1、red
2、#112233
3、rgb(0-255,0-255,0-255) 通过rgb来指定颜色
4、rgba(0-255,0-255,0-255,0-1) 通过rgb以及alpha指定颜色
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> 通过滑块选取颜色 </title>
<style>
div{float:left;width:200px;height:200px;border:1px solid red;}
#showColor{background-color:#rgba(155,0,0,0)}
</style>
<script>
function $(id){
return document.getElementById(id);
}
function range_click(){
var r=$("txtRangeRed").value;
var g=$("txtRangeGreen").value;
var b=$("txtRangeBlue").value;
var color="rgb("+r+","+g+","+b+")";
console.log(color);
$("showColor").style.backgroundColor=color;
}
</script>
</head>
<body>
<div>
R:0<input type="range" id="txtRangeRed" value="0" min="0" max="255" οnchange="range_click()"/>255
G:0<input type="range" id="txtRangeGreen" value="0" min="0" max="255" οnchange="range_click()"/>255
B:0<input type="range" id="txtRangeBlue" value="0" min="0" max="255" οnchange="range_click()"/>255
</div>
<div id="showColor"></div>
</body>
</html>
日期类型:创建一个日期输入域
语法:<input type="date"/>
例:<input type="date" name="txtDate" />
周类型:与date类型相似,但是只能选择周
语法:<input type="week"/>
例:<input type="week" name="txtWeek" />
月份类型:与date类型相似,但是只能选择一个月份
语法:<input type="month" />
<input type="datetime"/>
通过箭头选取日期时间(Safari)
<input type="datetime-local" />
弹出一个日历控件,允许选择年月日,通过按钮选取时间
表单属性
Placeholder属性:常用于search输入类型,也可用在文本域,可用于提示用户输入正确的内容。<input type="search" placeholder="请输入用户名称">
value一般不做用户提示,用placeholder来提示好点
required属性:防止表单为空的提示效果
语法:<input type="text" required />
required属性只要出现在表单元素中就行,无论后面写的是false、true,想做非空,不写就行
multiple属性:可以用在一些输入类型中,从而支持在一个域中输入多个值,但是所插入的值必须用逗号隔开。
语法:<input type="email" multiple />
Autofocus属性:在网页加载时自动让域获得焦点,方便快捷的定位元素
<input type="text" autofocus />
pattern属性:作用是实现元素的验证,它支持正则,用于快速实现自定义表达式验证,pattern等号后面写正则表达式,提交表单时会自动进行验证
语法:<input type="text" pattern="13[0-9]\d{8}" />
例:
<!DOCTYPE html>
<html>
<head>
<title> HTML5表单元素 </title>
<meta charset="utf-8" />
<style>
table{border:1px solid black;border-collapse:collapse;}
th,td{border:1px solid black;padding:5px;}
</style>
</head>
<body>
<form name="frm">
<table>
<tr>
<th>名称</th>
<th>控件</th>
<th>说明</th>
</tr>
<tr>
<td>Email类型</td>
<td>
<input type="email" name="txtEmail" id="txtEmail" />
</td>
<td>要求用户输入Email类型数据,提交表单时,会自动验证</td>
</tr>
<tr>
<td>Search类型</td>
<td>
<input type="search" id="txtSearch" 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" min="18" max="80" step="1" name="txtNumber" />
</td>
<td>
只能接收数字,min表示数字范围下限值,max表示数字范围上限值,step表示步长
</td>
</tr>
<tr>
<td>范围类型</td>
<td>
<input type="range" name="txtRange" min="18" max="80" step="1" value="18" οnchange="txtRange_change()" />
</td>
<td>
提供一个滑块工具给用户去选择指定范围内的数值
</td>
</tr>
<tr>
<td>颜色类型</td>
<td>
<input type="color" name="txtColor" />
</td>
<td>
弹出一个调色板提供给用户选取颜色
</td>
</tr>
<tr>
<td>日期类型</td>
<td>
<input type="date" name="txtDate" />
</td>
<td>
弹出日历框供用户选择,用户可以精确选择到某一天
</td>
</tr>
<tr>
<td>周类型</td>
<td>
<input type="week" name="txtWeek" />
</td>
<td>
弹出一个日历控件,用户能够选取一个星期的时间
</td>
</tr>
<tr>
<td>月类型</td>
<td>
<input type="month" name="txtMonth" />
</td>
<td>
弹出一个日历控件,允许用户选择一个月
</td>
</tr>
<tr>
<td>日期与时间</td>
<td>
<input type="datetime" name="txtDatetime" />
</td>
<td>
通过箭头选取日期时间(Safari)
</td>
</tr>
<tr>
<td>本地日期与时间类型</td>
<td>
<input type="datetime-local" name="txtDatetimeLocal" />
</td>
<td>
弹出一个日历控件,允许用户选择年月日,通过按钮选取时间
</td>
</tr>
<tr>
<td>Placeholder</td>
<td>
<input type="text" name="txtUsername" placeholder="请输入用户名称" />
</td>
<td>
默认显示一段文字在表单元素上
</td>
</tr>
<tr>
<td>Required</td>
<td>
<input type="text" name="txtAddress" required />
</td>
<td>
要求当前元素必须录入值,否则表单不允许提交
</td>
</tr>
<tr>
<td>Multiple</td>
<td>
<input type="email" name="txtNewEmail" multiple />
</td>
<td>
允许用户输入多段数据,但必须使用',' 进行分割
</td>
</tr>
<tr>
<td>Autofocus</td>
<td>
<input type="text" name="txtFocus" autofocus />
</td>
<td>
网页加载时,让控件自动获取焦点
</td>
</tr>
<tr>
<td>Pattern</td>
<td>
<input type="text" name="txtPhone" pattern="13\d{9}" />
</td>
<td>
自定义正则表达式验证当前控件中的值,如果值不满足验证规则,表单则无法提交
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交" />
<input type="button" value="取值" οnclick="getValue()" />
</td>
</tr>
</table>
</form>
</body>
</html>
表单属性是可以组合使用的
Form属性,可用于在from标签之外声明表单元素
语法:
<form id="myform"></form>
<input form="myform" type="text">
例:
<body>
<form id="frmUser">
用户名称:<input type="text" name="txtUsername" />
<input type="submit" value="提交"/>
</form>
<hr/>
新用户名称:<input form="frmUser" type="text" name="txtNewName">
</body>
新表单元素:
detalist元素,progress元素,meter元素,output元素
detalist元素:可以创建一组列表项,相当于select属性,但是需要放在输入框上才能使用,用户看的是label的值,但是选的时候是value值
<form>
<datalist id="mylist">
<option value="010">北京</option>
<option value="021" label="上海" />
<option value="022">天津</option>
<option value="023" label="重庆" />
</datalist>
<input type="text" name="txtAddress" list="mylist">
</form>
detalist元素写完后自己本身是没有什么效果的,他是提交给其他控件使用的
progress元素:表示一个任务的当前完成进度,而且通常这些任务都在表单中启动和处理。
属性:value(任务执行的进度),max(声明任务完成后达到的值)
<progress max="100" value="20"></progress>
Meter元素:用于显示刻度,而非进度
属性:min、max:设置范围便捷
value:确定测量的值
low、high、optimum:将范围划分为不同的部分和设置最佳位置
<meter min="0" max="100">
output元素:通常用于显示表单元素处理的结果值,显示表单控件与表单控价的处理结果
属性:for,将output元素与参与计算的源元素相关联,目的为了提高代码可读性
例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
</style>
<script>
function $(id){
return document.getElementById(id);
}
function changeProgress(){
//从滚动条的当前进度开始滚动
setInterval(function(){
var value = parseInt($("pro").value);
value += 5;
if(value >= 100){
value = 0;
}
$("pro").value=value;
},300);
}
//window.onload = changeProgress;
window.onload = function(){
//为form表单添加事件
$("frm").oninput = function(){
var num1 = parseInt($("txtRange").value);
var num2 = parseInt($("txtNumber").value);
var result = num1 + num2;
$("outResult").value = result;
}
}
</script>
</head>
<body>
<form id="frm">
<datalist id="list">
<option value="010">北京</option>
<option value="021" label="上海" />
<option value="022">天津</option>
<option value="023" label="重庆" />
</datalist>
<input type="text" name="txtAddress" list="list" />
<hr />
滚动条:<progress id="pro" max="100" value="50"></progress>
<hr />
刻度表:<meter id="met" min="0" max="220" low="60" high="100" optimum="85" value="50"></meter>
<hr />
0<input type="range" id="txtRange" min="0" max="50" value="0" />50 +
<input type="number" id="txtNumber" value="0" />=
<output id="outResult" for="txtRange txtNumber"></output>
</form>
</body>
</html>