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标签是一个输入标签,当完成一个输入事件之后,可以理解成光标定位还是在表格高亮的那一行数据上。


相关文章
|
15小时前
|
前端开发
CSS和HTML的区别
CSS和HTML的区别。
10 2
|
15小时前
|
Python
DTL与普通的HTML文件的区别
DTL与普通的HTML文件的区别。
68 5
|
15小时前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
51 0
|
15小时前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
19 1
|
15小时前
|
XML 存储 前端开发
【Web 前端】HTML、XHTML、XML 有什么区别?
【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别?
|
15小时前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
15小时前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
11 0
|
15小时前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
32 0
|
15小时前
|
Web App开发 移动开发 HTML5
HTML中input标签的23种type类型
HTML中input标签的23种type类型
|
15小时前
|
XML 存储 数据格式
SGML .HTML 、XML和XHTML的区别?
SGML .HTML 、XML和XHTML的区别?
35 0