HTML5学习笔记（三）新属性、功能

HTML5 拖放

1.元素的 draggable 属性设置为 true

2.ondragstart 属性调用函数，函数中dataTransfer.setData() 方法设置被拖数据的数据类型和值

3.ondragover 事件规定在何处放置被拖动的数据。

4.若要将数据/元素放置到其他元素中，通过调用 ondragover 事件的 event.preventDefault() 方法，设置对应元素允许放置

5.当放置被拖数据时，会发生 drop 事件

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代码解释：

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id ("drag1")
• 把被拖元素追加到放置元素（目标元素）中

HTML5 Geolocation（地理定位）

使用 getCurrentPosition() 方法来获得用户的位置。

HTML5 新的 Input 类型

• color   选取颜色　　
• date   选择一个日期
• datetime   日期和时间控制器（本地时间）
• datetime-local   选择一个日期和时间 (无时区).
• email   提交表单时，会自动验证 email 域的值是否合法有效
• month   月与年 (无时区)
• number   能够设定对所接受的数字的限定
• range   不需要非常精确的数值（显示为滑动条）
• search   搜索字段 (类似站点搜索或者Google搜索)
• tel　　输入电话号码字段
• time   可输入时间控制器（无时区）
• url　　提交表单时，会自动验证 url 域的值
• week   周和年 (无时区)

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

HTML5 新的表单属性

<form>新属性：

• autocomplete 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
• novalidate 规定在提交表单时不应该验证 form 或 input 域。boolean(布尔) 属性

<input>新属性：

• autocomplete 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
• autofocus    在页面加载时，域自动地获得焦点。boolean 属性
• form　　位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)。引用一个以上的表单，请使用空格分隔的列表。
• formaction　　用于 type="submit" 和 type="image".描述表单提交的URL地址.会覆盖<form> 元素中的action属性.
• formenctype   与 type="submit" 和 type="image" 配合使用。表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)。覆盖 form 元素的 enctype 属性。
• formmethod　　与 type="submit" 和 type="image" 配合使用。覆盖了 <form> 元素的 method 属性。表单提交的方式。
• formnovalidate　　与type="submit一起使用。描述了 <input> 元素在表单提交时无需被验证。会覆盖 <form> 元素的novalidate属性.boolean 属性.
• formtarget　　与type="submit" 和 type="image"配合使用.指定一个名称或一个关键字来指明表单提交数据接收后的展示。覆盖 <form>元素的target属性.
• height 与 width   只适用于 image 类型的<input> 标签。
• list         list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
• min 与 max          适用于以下类型的 <input> 标签：date pickers、number 以及 range。为包含数字或日期的 input 类型规定限定（约束）。
• multiple        适用于以下类型的 <input> 标签：email 和 file。规定<input> 元素中可选择多个值。 boolean 属性.
• pattern (regexp)  适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。正则表达式用于验证 <input> 元素的值。
• placeholder         适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。
• required　　适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。提交之前填写输入域（不能为空）。
• step     与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.合法的数字间隔。可以与 max 和 min 属性创建一个区域值.