HTML5之标签与属性

1. 属性`list`与标签`datalist` 以及标签`option`可实现文本框的下拉提示，其中`datalist`的`id`值必须与属性`list`的值一致，`option`标签写在标签`datalist`中，如下所示:

<input type="text" list="mylist">
<datalist id="mylist">
      <option>20141102@qq.com</option>
      <option>20141102@qq.com</option>
      <option>20141102@qq.com</option>       
</datalist>

2. 属性`contextmenu`与标签`menu`以及`menuitem`可实现点击右键出现自己设置的选项，其中`menu`的`id`值必须与属性`contextmenu`的值一致，标签`menuitem`写在`menu`里面，如下，右键点击`div`框，可出现"链接"属性，`icon`用于设置属性前面的图标，点击链接，执行`fx()`函数：

<div id="d" contextmenu="mymenu" width="100px" height="100px" border="1">
<menu id="mymenu" type="context">
    <menuitem label="链接" icon="../img/HBuilder.png" onclick="fx()">   <menuitem>                  
</menu>
</div>

3. 拖拽事件.

属性draggable有三个值：true表示元素可拖拽，false表示元素不可拖拽，auto表示浏览器默认的特性。
ondragstart:元素开始拖动时；ondrag:元素拖动时；ondragend:元素拖拽结束时。
ondragenter:元素进入指定区域时；ondragover:元素在指定区域内移动时；ondrop:元素投放在指定区域时。
拖拽事件必定少不了dataTransfer，它跟数据处理有关，dataTransfer.setData("text","拖拽begin")表示设置自定义数据格式。preventDefault()方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

var liArray=document.getElementsByTagName("li");
for(var i=0;i<liArray.length;i++){
    liArray[i].draggable=true;//li可移动
    liArray[i].flag=false;//设置状态
    liArray[i].ondragstart=function(){
        this.flag=true;
                }
    liArray[i].ondragend=function(){
                    this.flag=false;
                }
}

拖拽事件
event.ondragstart=function(e){
       e.dataTransfer.setData("text","拖拽begin");
       twoEle.innerHTML="begin...";
}

 //投放区事件
event.ondragenter=function(e){
    e.preventDefault()
}

4. HTML5之form表单：

HTML5的form表单与HTML4的form表单有所不同，写法和功能都有很大改进，也新增了一些type属性，但在浏览器支持方面有差异，谷歌和opera支持大部分属性，如email,url,data,time,color,range,search,number等。
email：自带邮箱验证功能，格式为xxx@xx.com，如：
<input type="email" name="eml" form="fo" required="required">
url：自带网址验证功能，格式为http://xxx.com,如：
<input type="url" name="urls" form="fo">
data：设置日期，点击后有日期可选择，如：
<input type="date" name="dates" form="fo">
time：设置时间，如：
<input type="time" name="names" form="fo">
color：设置颜色，自带RGB颜色可供选择，如：
<input type="color" id="colors" form="fo" onchange="change()">
range：实现滚动条，可设置最大值max，最小值min，以及步长step,初始值value，如：
<input type="range" name="range" max="10" min="0" step="1" value="2">
search：实现搜索功能，可实现站内搜索，自带搜索条，如：
<input type="search" name="search" results="s">
number：实现自动选择数值功能，可设置max值，min值，如：
<input type="number" name="score" form="fo" max="100" min="0">

HTML5中的表单写法简化了更灵活了：

HTML4中要提交的必须写在<form></form>中，HTML5中元素可提交到指定表单，其中属性form的值必须与标签form的id值一致，属性required表示其值不能为空，如下：

<form action="" method="post" id="fo"></form>
请输入帐号:<input type="text" name="te" form="fo" required="required"><br>
 请选择颜色:<input type="color" id="colors" form="fo" onchange="change()"><br>

HTML5之标签与属性