什么时候用button,什么时候用a标签
什么时候用button,什么时候用a标签
一、问题
能实现链接功能的标签一般就a标签,button标签,input submit标签
input submit肯定是提交表单的时候用
那什么时候用button,什么时候用a标签
能用a标签的地方尽量使用a标签么?
只有在例如type=submit的时候才使用button标签?
是否a标签比button标签更好?原因是什么?
那一个按钮 点击弹出来弹窗,或者一个按钮点击触发一个事件(例如收藏),用什么比较好?
二、解答
特意去翻了之前看过的一篇文章。
你不能创造一个按钮
个人觉得主要三个原因:
尊重一个标签被创造出来时的初衷
在PC端使用tab或者方向键切换焦点后,按下enter键,button(input[type=button])的click事件会被触发而其他标签不会。
你想实现一个disabled属性时,a标签需要一句似乎麻烦一些
语义上说,a
一般是链接,一般指向一个地址;button
是按钮,一般点击后调用本页方法。
实际上随你便,只要你写的代码没有看了想开除你,想用什么都无所谓
另外,button
貌似默认就是type=submit
吧,放在表单里的裸button
点击就提交表单了,不过我一般用input type=submit
,除非是按钮里需要放一些比较花哨的内容时才会用button
需要添加链接,或者直接从服务端get数据的用a标签。其他地方button可以的话就用button。没有哪个便签比哪个更好,只有哪个标签更适用哪些场景。你可以通过以下方法权衡一下:
1.需要与后端进行数据交互吗?不需要的话button即可
2.要与后端交互?如果是get方式的话使用a标签很方便。如果是post等方式,用button,绑定ajax事件即可
具体看情况,按钮功能上用input或者button都可以。
但是button里面可以嵌套内容,input则不行,所以具体情况具体看。
a标签一般用作超链接或者锚链接。
理论上你用一个a标签也可以做出button的样式。所以具体还是要看实际情况的。
什么时候用button,什么时候用a标签的更多相关文章
- a标签中可以加button,但是不提倡;button中不能加a标签,否则不能跳转
a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转
- 如何解决button,a,input标签自带蓝色边框
通常我们会设置该标签outline:0;但是我在使用iview自带的button组件的时候,设置无效,经过测试只要设置 :focus{ outline:0; } 即可,方便有效
- 让button居中显示的的标签
<center> <input type="button" class="buttoncls" style="width:80px& ...
- button提交表单 a标签提交表单
<form name="searchForm" id="searchForm" method="get" action="/ ...
- 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...
- [Learn AF3]第四章 App framework组件之Button
Button 组件名称:Button 是否js控件:否 使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...
- antd button
引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circ ...
- button在firefox 和 ie 下的问题
最近做了一个关于数据库管理的项目,因为不用考虑ie9以下的兼容性,所以一股脑的写完啦,到测试的时候发现了一个bug IE和火狐下有个模块关闭按钮的hover没有反应,ie不行就算了,火狐怎么也不行?我 ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...
随机推荐
- 怎么去除innerHTML获得内容中的标签?
去掉innerHTML获得内容里面的标签: <body> <div id="d1"><p id="p1">hello wor ...
- C#篇(三)——函数传参之引用类型和值类型
首先应该认清楚在C#中只有两种类型: 1.引用类型(任何称为"类"的类型) 2.值类型(结构或枚举) 先来认识一下引用类型和值类型的区别: 函数传参之引用类型: 1.先来一个简单的 ...
- css columns 与overflow结合的问题
想实现上面这样分栏,并且溢出滚动的效果.可是自己下面的代码只能得到横向滚动条.觉得出现这个情况觉得还蛮有意思的,特地记录一下. <li v-for="(item,index) in s ...
- [NOIP2009提高组]最优贸易
题目:洛谷P1073.Vijos P1754.codevs1173. 题目大意:有n点m边的图,边分有向和无向.每个点有一个价格,用这个价格可以买入或卖出一个东西.一个人从1出发,要到n,途中可以买入 ...
- 由防止表单重复提交引发的一系列问题--servletRequest的复制、body值的获取
@Time:2019年1月4日 16:19:19 @Author:QGuo 背景:最开始打算写个防止表单重复提交的拦截器:网上见到一种不错的方式,比较合适前后端分离,校验在后台实现: 我在此基础上 ...
- vsCode 快捷键、插件
插件 参考链接:https://blog.csdn.net/shunfa888/article/details/79606277 快捷键及常用插件:https://www.jianshu.com/p/ ...
- springboot实现热部署,修改代码不用重启服务
1.引入热部署依赖 <!-- 热部署模块 --> <dependency> <groupId>org.springframework.boot</groupI ...
- 【SRM 717 div2 A】 NiceTable
Problem Statement You are given a vector t that describes a rectangular table of zeroes and ones. Ea ...
- CSU 1249 竞争性酶抑制剂和同工酶
1249: 竞争性酶抑制剂和同工酶 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 109 Solved: 49 Description 人体内很多化学 ...
- C++ priority_queue的使用 & Java PriorityQueue
刚刚那道BST的题目,也用到了priority_queue,那是那个没有定义比较函数. 那么下面这个,就要定义比较函数. 它的模板声明带有三个参数,priority_queue<Type, Co ...