HTML5基础知识汇总_(2)自己定义属性及表单新特性
自己定义属性data-*
说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!!
比方Jquery mobile,里面非常频繁的使用了这个属性;
这个属性是哪里来的….当然是尾随最新的H5一起出来的…..
兼容性在PC端仅仅能呢说一般般(眼下.比較老式浏览器居多),,手机端支持还是比較OK的;
虽说是自己定义属性,可是还是有一定的规格的,,比方前缀必须是data-[自己定义属性];
比方
<div data-id="id"></div>
这货有什么用呢?用来操作数据的居多,比方给一款游戏弄一些额外的信息!!(data-level,data-score);
而操作数据一般有两种方式(原生JS和JQ):
1. 利用 getAttribute、setAttribute 存取 data[原生JS操作]
2. 利用 dataset API 存取 dataset [这样的能够直接忽略data-,相似对象直接訪问属性,也是JS操作的]
3. jQuery使用attr 和 data 依次等同于上面两种
在网上发现了一篇解说比較具体的操作数据,能够瞄瞄
传送门: http://blog.netsh.org/posts/html-data-jquery_1812.netsh.html
表单的进化!
input添加的特性!
邮箱: <input type="email" name="user_email" >
- 若是用submit提交会验证Email,检查是否缺少@,@后面是否为空….挺齐全的
url
首页: <input type="url" name="user_url" >
- 同上,会检查内容格式,眼下仅仅支持绝对路径!!!!
number
页数: <input type="number" name="pagin" min="1" max="30" />
- 有四个属性:
- min : 最小值 , 小于会报错提醒
- max : 最大值, 大于会报错提醒
- step : 默觉得1, 能够看需求设置
- value : 设置默认值,这个跟传统的一样
range
范围:<input type="range" name="range" min="5" max="25" />
- 这个和上面那个非常相似,连属性值都一致了..就是表现形式不同,,显示为滚动栏
- 值得一提的是,宽高度的不一致决定了滚动栏的方向是水平还是垂直;h>w.垂直!!
Date pickers
<input type="[attribute]" name="user_week" />
[attribute]换成以下的属性就能看到各种效果了,,就是兼容性不怎么样,chrome下正常;
等到各大浏览器都支持良好了,就能代替JS日期选择器了…. 一条代码搞定一个日期选择;
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
search
<input type="search" name="user_search" >
- 跟text相比,多了一个可关闭的X;另一些样式上的差别;其它基本一致
tel
联系方式: <input type="tel" name="user_tel" >
- 和text大同小异,支持不论什么字符输入
color
最喜欢的颜色: <input type="color" name="color" >
- 这个属性兼容性不是非常好,可是能够支持的浏览器体验非常好,就是一个color picker!!!
required
邮箱: <input type="email" name="user_email" required="required">
- 防止域为空时提交表单,返回值是boolean, 设置了必须通过验证才干提交
placeholder
邮箱: <input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!">
- 这个属性见怪不怪了,,有点相似占位符,显示一行浅灰色的字体,可是又是能够编辑的,也能够通过JS获取当输入为空的时候,用placeholder的值替换
pattern
电话号码: <input type="text" name="phone"
pattern="[1-9]{11}" title="联系人号码" />
- 眼下非常少看到, 可是正则却非经常见,,待慢慢普及吧
novalidate
<form action="#" method="post" novalidate="true">
邮箱: <input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!" novalidate="true">
<input type="submit" />
</form>
- H5特性之中的一个,验证表单值;
- novalidate的作用就是取消验证,可作用于表单和input元素;
- 默认不设置则为验证!
multiple
<form action="#" method="post" novalidate="true">
邮箱: <input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!" novalidate="true" multiple="multiple">
<input type="submit" />
</form>
- 支持上传(file)和邮箱控件(email)输入多个值,值之间用逗号隔开(半角)
autofocus
<input autofocus="autofocus" type="text">
- 自己主动获取焦点
autocomplete
<input autofocus="autofocus" type="text" autocomplete="no">
- h5下该属性添加了开关功能(on/off),来决定是否自己主动完毕
表单新元素
datalist
搜索引擎: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Bing" value="http://www.bing.com" />
<option label="Baidu" value="http://www.baidu.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
- 如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id
- 下拉默认值设置在option的value中
keygen
<form action="#" method="post">
username: <input type="text" name="usr_name" >
加密方式: <keygen name="security" >
<input type="submit" >
</form>
- 非常多浏览器对这属性支持还不大完好,,,,
- 加密方式两种,原理还是通过公钥和密钥的方式(相似SSH)
progress
<progress value="5" max="70">
</progress>
- 进度条制作利器!!,用来推断file这些的载入挺不错的….
- 必须设置max值才干显示相应的进度条,,不支持百分比!!!
meter
<div>您的额度:<meter value="50001" min="0" max="10000" low="1000" high="9000" optimum="6000">尽情耍!!</meter> </div>
- 用的不多,,眼下;也是进度条效果
- min/max是最小值和最大值;
- value是当前值
- low和high是低于和高于最优值(optimum)
总结
表单来了一次大跃进,可是吧,,眼下还是没法顺心的用,,一些浏览器没跟上,另一些用户使用老版本号浏览器;
所以这些新特性的使用,,哪怕再人性化,也仅仅能慢慢来;过渡总须要时间的~~~
HTML5基础知识汇总_(2)自己定义属性及表单新特性的更多相关文章
- HTML5基础知识汇总(一)
一.HTML的开发工具和使用的浏览器 开发工具:记事本等文本编辑器,Atom.VisualStudioCode( VSCode).Brackets.Sublime text和Hbuider. 浏览器: ...
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- html5表单新特性
type=range 值区域范围 默认值(0-100) type=data 选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=im ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 沉淀,再出发:Java基础知识汇总
沉淀,再出发:Java基础知识汇总 一.前言 不管走得多远,基础知识是最重要的,这些知识就是建造一座座高楼大厦的基石和钢筋水泥.对于Java这门包含了编程方方面面的语言,有着太多的基础知识了,从最初的 ...
- HTML基础知识汇总
前言 一直想总结一下,苦于没有时间,正好看到了一个总结了不错的博客,我就在他的基础上进行一下测试并总结,原博地址:http://www.cnblogs.com/wanghzh/p/5805587.ht ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 完善:HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
随机推荐
- Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---工厂模式之简单工厂
简单工厂:工厂依据传进的参数创建相应的产品. http://www.cnblogs.com/DelphiDesignPatterns/archive/2009/07/24/1530536.html { ...
- JDK Windows安装
进入至JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 点击下载后,会进入下载列表 点击下载后,就等 ...
- 7/31 CSU-ACM2018暑期训练7-贪心
比赛链接 A-CSU - 1588 现在有n堆果子,第i堆有ai个果子.现在要把这些果子合并成一堆,每次合并的代价是两堆果子的总果子数.求合并所有果子的最小代价. Input 第一行包含一个整数T(T ...
- BZOJ 4403 序列统计(Lucas)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4403 [题目大意] 给定三个正整数N.L和R,统计长度在1到N之间, 元素大小都在L到 ...
- [CF843D]Dynamic Shortest Path
[CF843D]Dynamic Shortest Path 题目大意: 给定一个带权有向图,包含\(n(n\le10^5)\)个点和\(m(m\le10^5)\)条边.共\(q(q\le2000)\) ...
- 对学生排序 Exercise07_17
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:对学生排序 * */ public class Exercise07_17 ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- while an existing transition or presentation is occurring; the navigation stack will not be updated
使用UIAlertController提示信息,在之后使用navigation进行逻辑跳转时,出现popToViewController:transition: called on <UINav ...
- 在代码中加载storyBoard中的ViewController
首先, 要在storyBoard中画出想要的VC, 然后建一个VC类和他关联.如图 : 调用时找如下写: DetailViewController *detailVC = [[UIStoryboard ...
- 深入浅出RxJava就这一篇就够了
前言: 第一次接触RxJava是在前不久,一个新Android项目的启动,在评估时选择了RxJava.RxJava是一个基于事件订阅的异步执行的一个类库.听起来有点复杂,其实是要你使用过一次,就会大概 ...