html 表单自定义属性,HTML5基础知识汇总_(2)自定义属性及表单新特性
自定义属性data-*
说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!!
比如Jquery mobile,里面非常频繁的使用了这个属性;
这个属性是哪里来的….当然是跟随最新的H5一起出来的…..
兼容性在PC端只能呢说一般般(目前.比较老式浏览器居多),,手机端支持还是比较OK的;
虽说是自定义属性,但是还是有一定的规格的,,比如前缀必须是data-[自定义属性];
比如
这货有什么用呢?用来操作数据的居多,比如给一款游戏弄一些额外的信息!!(data-level,data-score);
而操作数据一般有两种方式(原生JS和JQ):
1. 利用 getAttribute、setAttribute 存取 data[原生JS操作]
2. 利用 dataset API 存取 dataset [这种可以直接忽略data-,类似对象直接访问属性,也是JS操作的]
3. jQuery使用attr 和 data 依次等同于上面两种
表单的进化!
input增加的特性!
邮箱:
若是用submit提交会验证Email,检查是否缺少@,@后面是否为空….挺齐全的
url
首页:
同上,会检查内容格式,目前只支持绝对路径!!!!
number
页数:
有四个属性:
min : 最小值 , 小于会报错提醒
max : 最大值, 大于会报错提醒
step : 默认为1, 可以看需求设置
value : 设置默认值,这个跟传统的一样
range
范围:
这个和上面那个非常相似,连属性值都一致了..就是表现形式不同,,显示为滚动条
值得一提的是,宽高度的不一致决定了滚动条的方向是水平还是垂直;h>w.垂直!!
Date pickers
[attribute]换成下面的属性就能看到各种效果了,,就是兼容性不怎么样,chrome下正常;
等到各大浏览器都支持良好了,就能取代JS日期选择器了…. 一条代码搞定一个日期选择;
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
search
跟text相比,多了一个可关闭的X;还有一些样式上的区别;其他基本一致
tel
联系方式:
和text大同小异,支持任何字符输入
color
最喜欢的颜色:
这个属性兼容性不是很好,但是可以支持的浏览器体验很好,就是一个color picker!!!
required
邮箱:
防止域为空时提交表单,返回值是boolean, 设置了必须通过验证才能提交
placeholder
邮箱:
这个属性见怪不怪了,,有点类似占位符,显示一行浅灰色的字体,但是又是可以编辑的,也可以通过JS获取当输入为空的时候,用placeholder的值替换
pattern
电话号码:
目前很少看到, 但是正则却很常见,,待慢慢普及吧
novalidate
邮箱:
H5特性之一,验证表单值;
novalidate的作用就是取消验证,可作用于表单和input元素;
默认不设置则为验证!
multiple
邮箱:
支持上传(file)和邮箱控件(email)输入多个值,值之间用逗号隔开(半角)
autofocus
自动获取焦点
autocomplete
h5下该属性增加了开关功能(on/off),来决定是否自动完成
表单新元素
datalist
搜索引擎:
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id
下拉默认值设置在option的value中
keygen
用户名:
加密方式:
很多浏览器对这属性支持还不大完善,,,,
加密方式两种,原理还是通过公钥和密钥的方式(类似SSH)
progress
进度条制作利器!!,用来判断file这些的加载挺不错的….
必须设置max值才能显示对应的进度条,,不支持百分比!!!
meter
用的不多,,目前;也是进度条效果
min/max是最小值和最大值;
value是当前值
low和high是低于和高于最优值(optimum)
总结
表单来了一次大跃进,但是吧,,目前还是没法顺心的用,,一些浏览器没跟上,还有一些用户使用老版本浏览器; 所以这些新特性的使用,,哪怕再人性化,也只能慢慢来;过渡总需要时间的~~~
html 表单自定义属性,HTML5基础知识汇总_(2)自定义属性及表单新特性相关推荐
- HTML5基础知识汇总
HTML是Hypertext Markup Language的缩写,中文翻译为:超文本标记语言 HTML文档结构和基本语法 HTML5基本语法 扩展名.html/.htm 内容类型(ContentTy ...
- HTML5 基础知识
HTML5 基础知识 什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...
- 计算机公共基础知识论文,计算机等级考试二级公共基础知识汇总.doc
计算机等级考试二级公共基础知识汇总.doc 计算机等级考试二级公共基础知识 第1章 数据结构与算法 1.1 算法 1.1.1 算法的基本概念 算法是指对解题方案的准确而完整的描述.简单地说,就是解决问 ...
- 网络基础知识汇总学习
一.网线(双绞线)连接线的制作 双绞线制作有 568A 和 568B 两个标准,日常以 568B 标准较常用. 568B 标准按颜色排序为: 1- 橙白. 2- 橙.3- 绿白.4- 蓝. 5- 蓝白 ...
- Serdes基础知识汇总
Serdes基础知识汇总 从知乎https://zhuanlan.zhihu.com/p/423321485转载 在开始了解高速接口的时候,必然会涉及到SerDes.serdes的知识点实际上非常多, ...
- 高二上计算机知识点,高二会考计算机基础知识汇总.doc
高二会考计算机基础知识汇总.doc 计算机应用基础试卷结构与题型试题分为知识题和操作题两大类,其中知识题约占40,操作题约占60.试卷内容比例为计算机基础知识和操作系统及其应用约占30.文字编辑.电子 ...
- c++语言基础知识,c++语言基础知识汇总.ppt
<c++语言基础知识汇总.ppt>由会员分享,可在线阅读,更多相关<c++语言基础知识汇总.ppt(68页珍藏版)>请在人人文库网上搜索. 1.1,第二章 C+语言初步,本章主 ...
- html5基础知识文档,HTML5基础知识(1)
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
- 脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们 更多技术干货第一时间送达 脑科学与脑电基础知识汇总 该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...
最新文章
- 微服务海量日志怎么处理,推荐你试试这款工具....
- 基于android的lbs技术,基于Android的LBS应用研究
- CSS 如何让 height:100%; 起作用
- Aspose.Word 的常见使用(不用模板创建)
- dmc matlab程序,matlab编的DMC程序.doc
- Flask-1-05-CookieSession
- 年薪15W的程序员因为掌握这个技能,薪资翻倍!
- 鸿蒙系统替代iOS,华为横空出世!鸿蒙系统,能否替代安卓IOS?
- 书店POS机--细化迭代2--测试
- 解决vue中axios同步的问题
- python对原数组遍历_Python数组遍历的简单实现方法小结
- 南极沉船_世界上一些神秘的沉船,都成了仿佛被世界遗弃的盛景
- CS5211|EDP转LVDS方案介绍|CS5211电路设计
- c语言other用法,other的用法总结
- Android 5.1.1 源码目录结构
- AVL树简单实现及原理
- GitHub 上受欢迎的 Android UI Library(part_one)
- 弘辽科技:提升销量没流量要继续提升吗?如何提高店铺流量?
- 所有游戏类型简称的意思
- mysql两个时间比较,Java架构师成长路线
热门文章
- 嵌入式蓝牙耳机音频软件开发领域词汇
- 输入一串字符以‘#’结束,如果它是大写字母,则转换为小写字母输出,如果是小写字母,则转换为大写字母输出,如果不是字母,则正常输出
- java用factory_这是否使用Factory设计模式? (java)
- 黑龙江省计算机科学与技术大学排名,2016黑龙江省大学一级学科排行榜
- 微信开发者工具——快捷键汇总
- 汉字与英文的互相转换
- 每日简报 5月20日简报新鲜事 每天一分钟 了解新鲜事
- Java实现喝酒掷骰子Swing小程序
- Java中Stream流的中间操作步骤
- 王者荣耀是怎样炼成的(二)《王者荣耀》unity安装及使用的小白零基础入门...