表单有哪些html5新控件?

html-css07

表单有哪些html5新控件?,第1张

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件（UTC时间）

datetime-local: 年-月-日 时:分 格式的控件（本地时间）

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

<input type="number" name="" id="" value="60" max="100" min="0" />

range: 选择区域

<input type="range" name="" id="" value="60" max="100" min="0" />

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性：

placeholder: 占位符，输入框提示信息

<input type="text" autofocus placeholder=''/>

required: 该input为必填项

autofocus: 在页面加载时，域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==>关闭 on==>打开

<input type="tel" name="user" id="" value="" autocomplete="on"/>

pattern: 正则验证

<input type="tel" pattern="[0-9]{7,12}"/>

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型，每次递增step的值

list: 指定一个datalist，作为下拉提示单

两种方法如下：

1、用css隐藏video视频播放控件：

<style type="text/css">

video::-webkit-media-controls{

display:none !important

}

</style>

css隐藏原生html5 video controls，这么设置后即使没有设置controls为false，native controls也不会再出现。其他的按钮，包括播放按钮、播放进度条、静音按钮、音量条等，都可以像全屏按钮一样自定义样式。不止是隐藏。

2、用js隐藏video视频播放控件：

<script type="text/javascript">

var video=document.getElementById("video")

video.controls=false

</script>

HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，所以很多时候需要使用Dom来进行自定义的一些操作和控制。

扩展资料：

HTML5 video标签中的新属性：

1、autoplay：如果出现该属性，则视频在就绪后马上播放。

2、controls：如果出现该属性，则向用户显示控件，比如播放按钮。

3、height：设置视频播放器的高度。

4、loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。

5、muted：规定视频的音频输出应该被静音。

6、poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

7、preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。

8、src：要播放的视频的 URL。

9、width：设置视频播放器的宽度。

参考资料来源：百度百科-html5 video

一、 HTML5新增的标签

（1）header nav main  footer  section article hgroup  figure figcaption  aside 

    video  audio canvas

                （2）如何让新标签兼容低版本浏览器：  html5shiv.js

二、 HTML5新增的表单控件

    一、表单控件的新属性

            <input type="text"  placeholder=""  required  autofocus  pattern="abc" >

    二、新增的表单控件

    （1）<input type="email">

    （2）<input type="url">

      （3）数字控件：  type="number"

      (4)  滑动组件：  type="range"

      (5)  拾色器：      type="color"

      (6)  日期控件：    type="date"

三、本地存储

    1、 三种本地存储 ：  cookie webStorage(localStorage  sessionStorage)

    2、localStorage的API

      (1)写入：  localStorage.setItem(键，值)  //值只能是字符串

        localStorage.user = "123" localStorage["user"] = "123"

      （2）读取  var user = localStorage.getItem("user")

                  var user = localStorage.user

        (3)删除：  localStorage.removeItem("user")    localStorage.clear()

        （4）修改：  localStorage.setItem("user","890")

    3、sessionStorage的API

sessionStorage.setItem(键，值)

        sessionStorage.getItem(键)

        sessionStorage.removeItem(键)

sessionStorage.clear()

    **********重点**********

      4、cookie webStorage(localStorage  sessionStorage)三者的区别

四、离线存储

    （1） *.manifest  (*.appcache) 

          index.html  <html manifest="*.manifest">

    (2) 理解离线存储的更新方式

五、移动端的布局思路：

1、设备像素比（倍率）  逻辑像素尺寸 （360px  320px  375px  414px）

            window.devicePixelRatio

        2、 <meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no"">

3、使用rem单位

六、地理定位

if (navigator.geolocation){ 

            navigator.geolocation.getCurrentPosition(success,error,{

                timeout: 5000

            })

            function success(pos){

                纬度:  pos.coords.latitute

                经度：  pos.coords.longtitude

            }

        }

        navigator.geolocation.watchPosition(success)

七、地理定位和百度地图API的结合

八、视频，音频  <video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload">  <audio>

九、移动端事件： 

(1) ontouchstart  ontouchmove  ontouchend

(2) 如何判断是否为移动端：  if ("ontouchstart" in document){}

        (3) 移动端事件的事件对象及常用属性

          e.touches[0].clientX  e.touches[0].clientY  e.touches[0].target

        (4) 移动端常见问题及解决方案：

a、 click事件 300ms的延迟：  <1>zepto的tap事件  （2） fastclick.js

b、 zepto的tap事件有点透问题 ：  （1） fastclick.js

        (5) zepto的touch模块：  tap  singleTap  doubleTap  longTap 

                swipeLeft  swipeRight  swipeUp  swipeDown

十、swiper.js的使用  （参考官网）

十一、 canvas

(1)  <canvas width="600" id="can"></canvas>    300*150

        (2)  var can = document.getElementById("can")

      var cxt = can.getContext("2d")

  cxt.beginPath()

  cxt.moveTo(100,200)

  cxt.lineTo(200,400)

              cxt.strokeStyle = '#f00'

  cxt.stroke()

                  cxt.clearRect(0,0,200,300)

                  context.globalCompositeOperation="destination-out"  (了解)