HTML5学习笔记五:html5表单

  表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮。

一、新增的元素和属性

  1.新增属性:

    1.1 form属性:页面中的任何元素指定form属性,属性值为相应表单的id,该元素就属于指定表单了;只有Opera 10支持。

    1.2 placeholder属性:文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字;Safari 4,chrome3,firefox4

    1.3 autofocus属性:打开页面时,有该属性的控件自动获得光标焦点;Safari 4,chrome3,firefox4

  2. 改良input元素种类:

    2.1 url类型:<input name="url1" type="url" value="http://www.micosoft.com">

    2.2 email类型: 只验证格式,并不检查email地址是否存在,提交时可以为空,除非加上了required属性;

    2.3 data类型:data类型的input元素以日历的形式方便用户输入;只有Opera 10支持

    还有很多类型不一一列举,大多数浏览器还不支持

 二、 表单验证

    2.1 自动验证:通过对元素使用属性的方法,可完成自动验证。例如:

    1)required属性:可应用在大多数输入元素上(除了隐藏元素、图片元素按钮上)

    2)pattern属性:对input元素使用pattern属性,属性值为正则表达式,

      <input pattern="[0-9][A-Z]{3}" name="part" palceholder="输入内容:一个数字和三个大写字母。">

    3) min属性和max属性:为数值类型或日期类型的input元素专属,现在范围

    4)step属性:控制input元素中的值增加或者减少的步幅

   2.2 显示验证:form元素和input元素(包括select和textare)都具有一个checkValidity方法,可以显示的对表单内元素进行验证;以boolean形式返回验证效果,利用js可操作

  2.3 取消验证:有时候需要将表单临时提交下,但不想让表单中所有元素内容进行有效性验证(因为没有填完)。有两种方法取消表单验证

    1)利用input或submit元素的novalidate属性,可以关闭整个表单验证,该属性值为Boolean值

    2)利用input或submit元素的formnovalidate属性,利用input元素的该属性,=可以让表单验证对整个input元素失效;对submit按钮使用该属性,整个表单验证失效

三、 增强的页面元素

    3.1 figure元素和figcaption元素:figure一种元素的组合,带有可选标题,表示网页上一块独立内容,内容可以是图片、统计图、代码示例;figcaption表示figure的标题,可以在figure内其他从属元素的前面或者后面,仅允许一个figcaption。

    3.2 details元素:提供了一种替代JS的,将画面上局部区域进行展开或收缩的方法;目前无浏览器支持;

    3.3 meter元素:规定范围内的数量值。如:磁盘使用量,投票数占总投票人数的比例等。它有六个属性:

     value:元素中特地表示出来的实际值,默认值为0;min,max,low下限,high上限,optimum最佳值

四、文件API

  通过这个API,对于从Web页面上访问本地文件系统的相关处理变得十分简单;

  4.1 filelist对象与file对象:html5中file控件通过添加mulitiple属性,file控件内允许一次放置多个文件,filelist对象表示用户选择的文件列表;

  4.2 Blob对象:表示二进制原始数据,提供一个slice方法,通过该方法访问到字节内部的原始数据块。blod对象有两个属性,size属性表示一个Blob对象的字节长度,type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串。

  4.3 FileReader接口:主要用来把文件读入内存,并且读取文件中的数据。提供一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中数据

    1)该接口有四个方法,其中3个用以读取文件(readAsBinaryString,readAsText,readAsDataUrl),另一个用来将读取过程中断(abort)

    2)FileReader接口的事件:用于捕获读取文件时的状态。onabort:中断时触发,onerror:出错时触发,onloadstart:开始时,onprogress:读取中,onload:读取完成时;onloadend:完成时,无论成功或失败

五、拖放API  

  H5中支持浏览器与其他应用程序之间的数据互相拖动,简化拖放方面的代码

  1. 实现拖放的步骤:(1)将想要拖放的对象元素的draggable属性设置为true;另外,img和a 元素默认允许拖放;(2)编写与拖放有关的事件处理代码

  现在支持拖放的MIME的类型有:text/plain:文本文字;text/html:HTML文字;text/xml:XML文字;text/uri-list:URL列表,每个URL为一列。

  2. DataTransfer对象:该对象的属性和方法使用的好,可以实现定制拖放图标,只支持特定拖放(copy/移动)

                      

  3. 设定拖放时的视觉效果:effectAllowed属性表示被拖动时允许的视觉效果,值none /copy /copyMove /link /linkmove /move /all /unintialize,一般在ondragstart事件中

              dropEffect属性表示实际拖放时的视觉效果,值none /copy /link /move,一般在ondragover事件中。后者必须在前者所表示的允许的视觉效果范围内

  4. 自定义拖放图标:DataTransfer对象有一个setDragImage方法,它有三个参数(img,拖放图标离鼠标指针的x轴方向的偏移量,y)

时间: 2024-08-25 02:35:32

HTML5学习笔记五:html5表单的相关文章

[Spring MVC]学习笔记--表单标签的使用

github例子地址: https://github.com/lemonbar/spring-mvc-jsp 效果图 关于spring mvc的标签的讲解, 有一篇blog已经讲的很细了. http://haohaoxuexi.iteye.com/blog/1807330 官方文档地址: http://docs.spring.io/spring/docs/4.0.6.RELEASE/spring-framework-reference/htmlsingle/#view-jsp 而且我在上面的例子

HTML5学习(12)表单元素

HTML5 <datalist> 元素 <datalist> 元素规定输入域的选项列表. <datalist> 属性规定 form 或 input 域应该拥有自动完成功能.当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项: 使用 <input> 元素的列表属性与 <datalist> 元素绑定 <input list="browsers"> <datalist id="browser

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5学习笔记1 HTML5 新元素

自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能.比如,图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等. <canvas>新元素 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 在silverlight中也有这个元素,这个元素在SL中作容

knockoutJS学习笔记08:表单域绑定

前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type="text" data-bind="value:name" /><span data-bind="text:name"></span></p> <p>密码:<input type="text

Yii学习笔记之四(表单验证 api 翻译)

1.表单验证 对于用户输入的所有数据,你不能信任,必须加以验证. 所有框架如此,对于yii 可以使用函数 yii\base\Model::validate()  进行验证 他会返回boolean值的 true /false 如果验证未通过,可以使用 yii\base\Model::$errors 属性进行处理,如下代码: <?php //加载表单模型(绝对地址方式) /*如果上面引入 use app\models\ContactForm; 则可以直接使用 $model = new Contact

2016年5月29日晚上(传智Bootstrap笔记五(表单2))

一.总表单实例 <body style="padding:50px;background-color:#ccc;"> <form class="form-horizontal"> <div class="form-group"> <label for="username" class="col-md-2 control-label">用户名:</labe

HTML学习笔记8:表单

什么是表单? 一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms可以用来进入航运或信用卡资料订购产品,或可用于检索数据(例如,搜索引擎上搜索).    <!-- from wiki - > 简单来说就是收集用户的信息 这就是一个表单 表单的工作流程:用户打开页面->填写表单后提交->根据相应的方式打包后发送个服务器->服务器接收后转给相应的程序处理 基础

Python+Selenium学习笔记8 - 多表单&amp;多窗口切换

1.多表单切换 下图为待测页面:内嵌百度首页 切换到百度首页进行操作 1 # coding = utf-8 2 3 from selenium import webdriver 4 import os 5 import time 6 7 dr = webdriver.Firefox() 8 file_path = 'file:///' + os.path.abspath('frame.html') 9 dr.get(file_path) 10 11 # 切换到iframe(id="if"