H5新标签元素学习笔记

原创 2015年11月11日 21:09:38

1、新表单元素

      全部都是由input标签组成
      1.1 email
      1.2 url
            注意:输入的内容必须以http://
      1.3 search
      1.4 range
            范围
   属性:
        min : 最小值
max : 最大值
step : 步长
value : 值
      1.5 number
            属性:
        min : 最小值
max : 最大值
step : 步长
value : 值
      1.6 color
            通过windows的调色板选取颜色


      1.7 date
            弹出日历控件,选择年月日
   值:2015-06-01
      1.8 month
            2015-06
      1.9 week
            2015-W13
      1.10 datetime
            2015-06-01T01:15Z
      1.11 datetime-local


2、新表单属性

     2.1 required
           必须的,非空验证
  <input type="text" required="false" />
     2.2 multiple
           在一个表单元素中,允许录入多段类型相同的数据,但必须由","作为分隔符
     2.3 pattern 
           根据用户指定的正则表达式,对数据进行验证
     2.4 autofocus
           自动获取焦点
     2.5 form 
           在表单之外,提交表单元素
  <form id="frm"></form>
  <input type="text" form="frm" />
     2.6 placeholder
           网页加载时,表单元素上会默认显示一段文字
  注意:只有在用户录入数据时,placeholder的值才会消失

3、新表单元素(显示数据)

     3.1 datalist
           构建一个数据列表,可以提供给文本框类型的控件使用
  <option value="">Display</option>
  <option value="" label="Display" />


  与datalist相关联:
  <input type="text" list="datalistId" />
     3.2 progress
           进度条控件
  max : 进度完成后的值
  value : 当前的进度值
  注意:多数情况下要与 setInterval 或 setTimeout联用
     3.3 meter
           刻度表
  min :设置整个刻度的下限值
  max
  value
  low : 设定合理范围下限值,大于等于min
  high : 设定合理范围上限值,小于等于 max
  optimum : 设置最佳位置值
     3.4 output
           用于显示表单元素间所计算得到的值
  for:关联相互计算的控件id值
  value : 显示的值


  Application Programming Interface


======================================

1、setCustomValidity()

     1.1 作用
           自定义错误信息
  一旦设置好了setCustomValidity(),当前表单是不允许被提交的,一旦提交,显示自定义错误信息
     1.2 注意
           setCustomValidity("")
  一旦数据被修改正确后,需要通过  setCustomValidity("") 清空错误验证消息,使得表单允许被提交

2、checkValidity()

      2.1 作用
            在不提交表单的情况下对表单或者表单元素进行验证
   如果有问题的话 , 返回值为  false
   如果没有问题  , 返回值为 true

3、invalid 事件

      表单在提交过程中,检测到有无效域时,所激发的事件,该事件的本质是获取产生错误的那一组元素


      2.1 如何使用
            document.forms[0].addEventListener("invalid",form_invalid,true);


   function form_invalid(e){
var elem = e.target; // 产生错误的元素
//调整elem
   }

4、ValidateState

      表示指定的表单元素能够出现所有的错误状态
      2.1 如何获取ValidateState
            formElement.validity;
      2.2 错误状态值
            1、判断是否通过所有的验证规则
         formElement.validity.valid
 通过所有的验证后,返回值为true,否则为false
 与checkValidity( ) 类似
   2、判断是否为空 
         formElement.validity.valueMissing
 注意:验证有required属性的控件,值是否为空
 值为空,返回 true。否则为false
   3、判断数据是否违反类型
         formElement.validity.typeMismatch
 看输入的数据,与 type属性是否相符,如果不符返回为true,否则返回false
   4、判断数据是否违反pattern属性的约束
         formElement.validity.patternMismatch
 违反 为 true, 否则为false
   5、判断数据是否违反了定义的step
        多数使用在<input type=number />类型上
formElement.validity.stepMismatch
违反 为 true, 否则为false
  6、输入的数据长度超出了maxlength所定义的长度
       formElement.validity.tooLong

           7、输入的值小于定义的min值
        formElement.validity.rangeUnderflow
  8、输入的值大于定义的max值
        formElement.validity.rangeOverflow
  9、判断表单元素是否已经设置了自定义错误消息
        formElement.validity.customError


formElement.setCustomValidity("格式不正确")
formElement.validity.customError ; 返回值为true


formElement.setCustomValidity("")
formElement.validity.customError ; 返回值为false




======================================

1、h5之前播放视频

     <embed src=""> 标签
     <object> 标签
      <object>
          <param />
 <param />
      </object>

 2、video

      2.1 
           <video src="abc.mp4"></video>
      2.2 
           <video>
       <source src="abc.swf" />
<source src="abc.mp4" />
  </video>

3、编程实现视频播放器

     step 1 :  
                实现视图界面
     step 2 :
                完成播放/暂停的功能
play()
pause()
按钮文字切换
     step 3:
                3.1 完成滚动条的自然滚动
     currentTime : 播放的时长
     duration : 视频总时长


     maxim : 600
     size : 待求


     currentTime / duration = size / maxim

    
     size = currentTime / duration * maxim;
3.2 手动更改滚动条,并且更新视频播放位置
     currentTimie = size / maxim * duration;
     e.pageX - div.offsetLeft  ==>


     e.offsetX;


4、检查音频格式

     $("audio").canPlayType("audio/mp3");

5、
   <ul> 
    <li>
<a >小苹果</a>
   </li>
   <li>
<a >小苹果</a>
   </li>
   <li>
<a href="javascript:loadMusic(歌曲名称,歌曲路径)">小苹果</a>
   </li>
  </ul>


绘制canvas:

1、
    添加 <canvas>标签
    在js中  获取 canvas的上下文 getContext()
    绘制图形


2、
    var gra = ctx.createLineraGradient(0,150,400,150);
    gra.addColorStop(0,"red");
    gra.addColorStop(0.2,"yellow");
    gra.addColorStop(1,"blue");
3、canvas的默认原点为(0,0)
     ctx.translate(25,25)  : 原点则为 (25,25)
     ctx.fillRect(0,0,100,100);实际显示效果 从 (25,25)开始显示

     ctx.translate(25,25)  : 原点则为 (50,50)



1、文本

     1.1 属性 
           font ="font-weight font-style font-size font-family"
  font="Verdana"
  font="bold italic 24px Verdana"

2、dataTransfer

      2.1 作用
            保存拖拽过程中所涉及到的数据
   常用场合:
       源元素 ,保存数据到dataTransfer中
目标元素 ,从dataTransfer中获取数据
     2.2 如何获取dataTransfer
           在事件中通过事件参数  event.dataTransfer属性来获取
  拖拽过程中所涉及的7个事件,都能够获取dataTransfer
  常用事件:
  dragstart、drop
    2.3 如何使用dataTransfer
          setData(type,data)
 getData(type)
 clearData(type)
 type:所涉及到的文本的类型,固定值:text

3、传递数据

     源元素:拼 file:///xxxxxx.gif;e.pageX;e.pageY 字符串
             
版权声明:本文为博主原创文章,未经博主允许不得转载。

checkValidity()——表单验证

novalidate="true"取消表单默认验证,自己来处理结果,email.checkValidity()验证方法 邮箱: ...
  • qq_21119773
  • qq_21119773
  • 2016年06月06日 11:36
  • 3944

关于H5中自定义属性的设置和获取

自定义数据属性是在HTML5中新加入的一个特性。简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值。自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进D...
  • IT_Surfer
  • IT_Surfer
  • 2015年05月19日 16:24
  • 10827

HTML5的自定义属性的使用总结

以前我们需要自定义属性的时候一般是这样做的,在标签里面加上我们自己设置的一些属性: 在标签里设置自定义属性 然后获取里面的值是使用getAttribute来获取自定义属性里面的值: var myDiv...
  • qq_31851435
  • qq_31851435
  • 2016年11月09日 15:44
  • 7239

H5中新增的表单元素

邮箱: 网址: 日期: 时间: 数值: 音量: 搜索: 颜色:...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年05月24日 18:24
  • 1351

0326 H5新增表单元素

【HTML5 智能表单】         H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交。              ...
  • xuezhezhiying
  • xuezhezhiying
  • 2017年03月27日 19:52
  • 302

HTML5中新增的表单元素[智能表单]

HTML5中新增的表单元素[智能表单] form表单中 type新增属性: email、URL、date、time、month、week、number、range、color...
  • qq_37768482
  • qq_37768482
  • 2017年04月01日 17:25
  • 1589

h5中的表单

表单 注意: require:必填项 placeholder  。 代码显示:
  • Onlyjr123
  • Onlyjr123
  • 2017年05月04日 13:54
  • 383

H5新表单属性

1. autocomplete 表单自动完成: 书写格式autocomplete=“on/off”  不加此属性则默认是on,出于某些方面考虑需要关闭的话就要加上,然后值设置为off; 2. aut...
  • byc233518
  • byc233518
  • 2015年07月15日 08:37
  • 3582

H5常用标签汇总

  • 2017年08月26日 16:38
  • 68KB
  • 下载

H5常用的标签元素

常用HTML标签元素结合及简介 创建一个HTML文档 设置文档标题和其它在网页中不显示的信息 设置文档的标题         最大的标题 预先格式化文本           ...
  • mazegong
  • mazegong
  • 2016年12月08日 08:38
  • 1190
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5新标签元素学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)