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月前
|
前端开发
CSS和HTML的区别
CSS和HTML的区别。
15 2
|
1月前
|
Python
DTL与普通的HTML文件的区别
DTL与普通的HTML文件的区别。
74 5
|
1月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
58 0
|
2天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
8天前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
14 5
|
19天前
|
XML 存储 移动开发
htl和html5的区别是什么?我来告诉你
htl和html5的区别是什么?我来告诉你
|
13小时前
|
缓存
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
7 0
|
1天前
|
安全
shtml与html的区别
shtml与html的区别
|
1月前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
29 1
|
1月前
|
XML 存储 前端开发
【Web 前端】HTML、XHTML、XML 有什么区别?
【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别?