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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
