HTML中<button />和<input type=“button“/>的区别

简介: HTML中<button />和<input type=“button“/>的区别

根据上篇博文提到的显示高亮的内容,在点击按钮的时候用到了<input type="button">的标签,为什么会使用使用<input>标签,而不使用<button>标签呢?


现象


1、我们在使用<input type="button"/>标签后显示的结果:


8837d9a6505199797c03da3eafaee619_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6LC36Imz54i9ZmF5ZQ==,size_20,color_FFFFFF,t_70,g_se,x_16.png


可以看到正常把搜索框中内容高亮显示出来了。


2、如果使用<button value="搜索" id ="btnsearch" />的话,在输入框输入要查找的文本之后,相应的行会闪一下,就会恢复原样了。(不好截图,这里就没有放图片)


原因


针对与这个现象,button标签是一个按钮标签,可以执行事件,那么执行完一个完整的点击事件之后会恢复到原本的样子,input标签是一个输入标签,当完成一个输入事件之后,可以理解成光标定位还是在表格高亮的那一行数据上。


相关文章
|
1月前
|
Python
DTL与普通的HTML文件的区别
DTL与普通的HTML文件的区别。
67 5
|
6月前
|
编解码
HTML 里 img 元素的 src 和 srcset 属性有何区别?
HTML 里 img 元素的 src 和 srcset 属性有何区别?
60 0
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
48 0
|
6月前
|
前端开发 JavaScript 搜索推荐
HTML Over the wire 框架和单页面应用的区别
HTML Over the wire 框架和单页面应用的区别
39 0
|
3月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
29 0
|
4月前
|
Web App开发 移动开发 HTML5
HTML中input标签的23种type类型
HTML中input标签的23种type类型
|
4月前
|
XML 存储 数据格式
SGML .HTML 、XML和XHTML的区别?
SGML .HTML 、XML和XHTML的区别?
33 0
|
4月前
|
搜索推荐
HTML h1和h2的三点区别
HTML中,h1和h2都是标题元素,二者的关系可以说是递进或递减的关系,如何理解呢?,HTML文档定义的网页一般会被设计成具有一定的结构,而且通常是具有清晰的结构,比如都具有一个主题,也就是说该网页的主要内容是什么,这不仅是告诉浏览网页的用户,也是告诉抓取网页的搜索引擎,有一个明确的主题对这二者来说都是友好的,而该主题一般可以通过h1元素来定义,而不是h2。h2通常被称为二级标题。二者的区别可以参考如下三点:
68 2
|
4月前
|
存储 移动开发 前端开发
HTML的基本知识-和常用标签-以及相对路径和绝对路径的区别
HTML的基本知识-和常用标签-以及相对路径和绝对路径的区别
|
5月前
HTML <input> 标签的 autocomplete 属性
HTML <input> 标签的 autocomplete 属性
29 0