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

时间：2025-02-27 19:36:26

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 属性创建一个区域值.

相关文章