vue 类型字段除了用select框_10个好用的 HTML5 特性
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。
detais 标签
标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容,简单的做法就是使用此标签。默认情况下,它是收起来的,打开后,它将展开并显示被隐藏的内容。
事例:
Click Here to get the user details
# Name Location Job 1 Adam Huston UI/UX
运行结果:
技巧
在 GitHub Readme 中使用它来显示按需的详细信息。这是一个示例https://github.com/atapas/notifyme#properties
内容可编辑
contenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV,P,UL等元素。
注意,当在元素上没有设置contenteditable属性时,它将从其父元素继承该属性。
Shoppping List(Content Editable)
1. Milk 2. Bread 3. Honey
运行结果:
技巧
可以让span或div标签可编辑,并且可以使用css样式向其添加任何丰富的内容。这将比使用输入字段处理它更好。试试看!
Map
HTML 属性 与 属性一起使用来定义一个图像映射(一个可点击的链接区域)。可点击的区域可以是这些形状中的任何一个,矩形,圆形或多边形区域。如果不指定任何形状,则会考虑整个图像。
事例:
运行结果:
技巧
map有其自身的缺点,但是你可以将其用于视觉演示。
mark 标签
Did you know, you can "Highlight something interesting" just with an HTML tag?
运行结果:
技巧
可以使用css更改高亮颜色:
mark { background-color: green; color: #FFFFFF;}
data-* 属性
data-*属性用于存储页面或应用程序专用的自定义数据。可以在 JavaScript 代码中使用存储的数据来创建更多的用户体验。
data-*属性由两部分组成
- 属性名不能包含任何大写字母,并且必须在前缀“data-”之后至少有一个字符
- 属性值可以是任何字符串
事例:
Know data attribute
I have a hidden secret!
Reveal
在 JS 中:
function reveal() { let dataDiv = document.getElementById('data-attr'); let value = dataDiv.dataset['customAttr']; document.getElementById('msg').innerHTML = `${value}`;}
**注意:**要在 JS 中读取这些属性的值,可以通过getAttribute('data-custom-attr')g来获取,但是标准方式是用dataset来获取。
技巧
你可以使用它在页面中存储一些数据,然后使用REST调用将其传递给服务器。
output 标签
标签表示计算或用户操作的结果。
* =
技巧
如果要在客户端 JS 中执行任何计算,并且希望结果反映在页面上,可以使用,这样就无需使用getElementById()获取元素的额外步骤。
datalist
元素包含了一组元素,这些元素表示其它表单控件可选值.
事例:
Choose your fruit from the list:
技巧
dataList的表现很像是一个select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么
select标签创建了一个菜单。菜单里的选项通option标签指定。一个select元素内部,必须包含一个option元素,
总的来说就是,它们都可以显示出一个下拉表单框,但是select标签只能在它提供的选项中选择,而datalist不仅可以让你选择,还可以让你自己输入其它的选项。
Range(Slider)
range是一种 input 类型,给定一个滑块类型的范围选择器。
meter
元素用来显示已知范围的标量值或者分数值。
/home/atapas2 out of 10/root60%
技巧
不要将用作进度条来使用,进度条对应的 标签。
Downloading progress: 32%
Inputs
对于input标签类型,最常见的有 text,password 等等,下面列举一些比较少见的语法。
required
要求输入字段必填。
autofocus
文本输入字段被设置为当页面加载时获得焦点:
用正则表达式验证
可以使用regex指定一个模式来验证输入。
Color picker
一个简单的颜色选择器。
Color Me!
作者:Ahmad shaded 译者:前端小智 来源:sitepoint
原文:https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0
vue 类型字段除了用select框_10个好用的 HTML5 特性相关推荐
- vue 类型字段除了用select框_pumelo-select
pumelo-select A Vue Select Component By Pumelo English document see => README.md 演示 特性: 纯数据驱动 支持v ...
- 一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介 因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
- oracle执行计划走索引类型,SQL执行计划问题:where条件是主键(NUMBER类型字段)LIKE :VAR,为什么执行计划不走索引?...
SQL执行计划问题:where条件是主键(NUMBER类型字段)LIKE :VAR,为什么执行计划不走索引? 中文社区 (MOSC) 数据库 (MOSC) 6 Replies Last update ...
- hive 指定字段插入数据_Hive 表之间数据处理,Int 类型字段部分字段出现 NULL情况...
背景 hive 中有一张待处理的分区表,存储的方式是parquet,处理之后的目标表是一张非分区的外部表,并且分隔方式为 ",". 问题 部分记录的 int 类型字段 出现 nul ...
- clob类型用java怎么存,Java 储存和读取 oracle CLOB 类型字段的实用方法
当前位置:我的异常网» 编程 » Java 储存和读取 oracle CLOB 类型字段的实用方法 Java 储存和读取 oracle CLOB 类型字段的实用方法 www.myexceptions. ...
- mysql语句中把string类型字段转datetime类型
mysql语句中把string类型字段转datetime类型 在mysql里面利用str_to_date()把字符串转换为日期 此处以表h_hotelcontext的Start_time和End_ti ...
- php mysql int 日期格式化 string,MYSQL int类型字段的时间存放和显示 和 php的时间存放函数...
mysql: ====================== int类型字段的时间存放 UPDATE tablename SET add_time = UNIX_TIMESTAMP(NOW()) int ...
- 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...
- ORACLE中date类型字段的处理
ORACLE中date类型字段的处理 (1)在英文版本的ORACLE中默认日期格式为'DD-MON-YY',例如'01-JAN-98' 在汉化的中文版本中ORACLE默认日期格式为'日-月-年',例如 ...
最新文章
- hdoj-2039-三角形
- centos7 xampp启动mysql数据库_mysql主从配置,用win xampp和centos7环境下测试
- 网友半夜差点被沐浴露吓死,众人:原来不止我胆小....
- 推荐16款最棒的Visual Studio插件
- 四元数组旋转_四元数应用——顺序无关的旋转混合
- 快速从入门到精通!mysql字符串截取前两位
- 海思3519A上运行yolov3(一)——板卡配置(包括烧写内核、文件系统等)
- Linux服务器---配置apache支持用户认证
- 一款优秀的中文识别库——ocr
- electron开发客户端注意事项(兼开源个人知识管理工具“想学吗”)
- hive分组排序 取top N
- macOS安装brew和使用brew
- [ 网络 ] 应用层协议 —— HTTP协议
- 程序员的悲哀--动车追尾
- Android之更换头像
- Oracle存储过程中的for循环
- 基于HTML节日主题网页项目的设计与实现——圣诞节日介绍(HTML+CSS)
- 〖Python 数据库开发实战 - Python与Redis交互篇⑫〗- 综合案例 - 新闻管理系统 - 删除新闻(含redis缓存)
- 【杂谈】给瑞典的曾先生:出门在外,低调行事
- 【若依(ruoyi)】summernote富文本编辑器的使用
热门文章
- mysql常用命令整理
- Sharepoint COMException 0x81020037
- Gentoo Linux 学习笔记1
- LocalDB 和Compact
- 我们应学的11项技术[转载]
- 重磅!TensorFlow 2.0 来了!
- C语言编程笔记丨一种很酷的 C 语言技巧
- mysql数据库应用的权限层级_涂抹MySQL--第5章 MySQL数据库中的权限体系 - 5.3权限级别(1)...
- 【OpenCV】OpenCV函数精讲之 -- 格式化输出方法
- 超棒!纯Rust编写的机器学习框架,速度堪比PyTorch