datalist标签 规定输入域的选项列表特点：
1.datalist元素规定输入域的选项列表。
2.datalist标签和input标签结合在一起使用，<input>元素使用<datalist>预定义值。
3.注意：
input身上的属性： <input list="cityList" name="cityList">
datalist身上的属性：<datalist id="cityList">
4.datalist标签里的列表项option带尾标签 或不带尾标签 即可。例如：
<!-- datalist标签 规定 输入域 的 选项列表
（1）要结合input一起用
（2）input输入域 要有属性 list="cityList"
（3）datalist选项列表 要有属性id="cityList"
-->
<div>
<input type="text" name="" id="" list="cityList">
<datalist id="cityList">
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="合肥">合肥</option>
</datalist>
</div>预览：
kengen标签 存储私钥，发送公钥<keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）
output输出显示数据 标签
特点：
1.<output> 元素用于不同类型的输出，比如计算或脚本输出。
2.name="result"定义对象的唯一名称（表单提交时使用）。
当前output标签的属性name="result"，代表数据输出 显示 的位置。
3.<form method="post" oninput="reult.value=num1.value+num2.value">
当前 数据计算输出 num1.value+num2.value ，这样的输出，是一个字符串，连上 另一个字符串，变成一个大字符串。
我们应该调整，把字符串转数字。parseInt()
<!-- output输出显示数据 标签 -->
<!-- oninput 事件在用户输入时触发。 -->
<form method="post" oninput="result.value = parseFloat(num1.value)+parseFloat(num2.value)" >
<div>
<input type="text" name="" id="num1">+
<input type="text" name="" id="num2">
=
<output id="result" name="result" for="num1 num2"></output>
</div>
</form>4.for="num1 num2" output的for属性，用来指明参与计算的元素的id,元素与元素之间 用 空格分隔。
预览：
优化
<form>
<div>
<input type="text" name="" id="num1">+
<input type="text" name="" id="num2">
<input type="submit" value="=" id="btn">
<output id="result" for="num1 num2"></output>
</div>
</form>
<script>
//抓取元素
var num1=document.getElementById('num1')
var num2=document.getElementById('num2')
var result=document.getElementById('result')
var btn=document.querySelector('#btn')
btn.onclick=function(){
console.log(num1);
console.log(num1.value);
var n1=parseFloat(num1.value);
var n2=parseFloat(num2.value);
if(num1.value.length == 0){
alert('请输入数字1')
num1.focus();
return false;
}
if(num2.value.length == 0){
alert('请输入数字2')
num2.focus();
return false;
}
console.log(n1,n2);
result.value=n1+n2;
return false;
}
</script>预览：
1.1 html5表单控件新增属性
1.placeholder属性
特点：
1).placeholder属性提供一种提示（hint），描述输入域所期待的值。（为我们提供输入框所期待的提示性文本）
2).在placeholder属性里的值，默认是灰色。获取焦点时候，在placeholder属性里的值 还在。当你输入文本的时候，这里的值会消失掉。
2.required属性
特点：
1.required属性是一个 boolean属性.
2.required属性规定必须在提交之前填写输入域（不能为空）。
3.当你给文本框添加required这个属性。你在点击“提交按钮”时，文本框内没有填写内容。该文本框会出现 友情提示“请填写此字段”。
4.required="required" 这个属性，如果给值，里面还是写"required"。所以，一般我们只写属性。
<!--placeholder属性 作用： 描述输入域所期待的值。 -->
<div>
<form action="">
<div>
<label for="">用户名</label>
<input type="text" name="" id="" placeholder="请输入用户名" required="required">
</div>
<br>
<div>
<input type="submit" value="提交">
</div>
</form>预览：
3.step属性
特点：
1.间隔、步长
step 属性为输入域规定合法的数字间隔。
如果 step="3"，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值
4.min和max属性
特点：
1.在很多html5标签上都可以使用，主要是设置 值的 取值范围。最小临界点和最大临界点。
1.2 html5表单控件type属性新增的值
( ----14个)
type="email" 电子邮件地址(控件)
type="color" 颜色面板(控件)
type="url" 网址(控件) ,用户输入网址的时候，不带协议头，点击提交按钮，会有提示消息“请输入网址”。
type="number" 数字(控件)
type="range" 滑动条、滑竿(控件)
type="search" 搜索(控件)
type="tel" 电话号码(控件)
type="date" 日期(控件) 包括年、月、日，不包括时间(有显示的时间面板可供选择)
type="datetime" 日期(控件) (没有显示日期的面板可供选择)
type="datetime-local" 日期(控件) (有显示的时间面板可供选择，精确到小时分钟)
type="week" 日期(控件) ---表示 一年里的 第几周
type="year" 日期(控件)
type="month" 日期(控件) ---表示 一年里的 第几个月
type="time" 时间(控件) ---表示 时：分 时的取值范围：00-23 分的取值范围：00-59
<div>
<form method="post" onsubmit="return false">
<div>
<label for="">邮件：</label>
<input type="email" name="" id="">
</div>
<div>
<label for="">颜色面板：</label>
<input type="color" name="" id="mycolor" >
</div>
<div>
<label for="">网址：</label>
<input type="url" name="" id="">
</div>
<div>
<label for="">数字：</label>
<input type="number" name="" id="" min="0" max="5">
</div>
<div>
<label for="">搜索：</label>
<input type="search" name="" id="">
</div>
<div>
<label for="">电话：</label>
<input type="tel" name="" id="">
</div>
<div>
<label for="">日期：</label>
<input type="date" name="" id="">
</div>
<div>
<label for="">日期：</label>
<input type="datetime" name="" id="">
</div>
<div>
<label for="">日期：</label>
<input type="datetime-local" name="" id="">
</div>
<div>
<label for="">周：</label>
<input type="week" name="" id="">
</div>
<div>
<label for="">年：</label>
<input type="year" name="" id="">
</div>
<div>
<label for="">月：</label>
<input type="month" name="" id="">
</div>
<div>
<label for="">时间：</label>
<input type="time" name="" id="">
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</div><script>
//抓取元素
var mycolor=document.getElementById('mycolor')
mycolor.onchange=function(){
console.log(this.value);
}
</script>预览：
