button标签与input标签的区别

时间:2025-01-14 18:07:03

button标签与input标签都有作为按钮的功能,那么它们之间到底有什么区别呢,实际项目中我们应该如何选择呢?,下面我们就来具体了解一下:

input标签

作为按钮,有3种 type 效果:

1. 提交按钮 点击提交数据

<input type="submit" style="color:red;font-size: 50px;">

2. 刷新按钮 点击恢复默认数据

<input type="reset">

3. 普通按钮 点击啥用没有

<input type="button" value="普通标签">

button标签

在 form标签中,也有3种type效果:

1. button标签,默认或者定义也是submit,提交标签效果

<button>提交</button>
<button type="submit">提交</button>

2. button标签,type,reset,重置标签效果

<button type="reset">重置</button>

3. button标签,type,button,普通标签效果

<button type="button">普通标签</button>

区别

  1. 样式设定方便

     button按钮中的内容,是标签的文字内容,可以直接按照css样式来设定
     input标签,字体样式等可以设定,但是其他的样式设定,盒子模型,弹性盒模型等,无法支持
    
  2. H5中,对button标签做了专门的强化,给button标签新增很多的功能

    实际项目中,推荐使用button标签,代替input按钮标签

总结:

input 能实现的 button都能实现
button 能实现的 input不一定能实现
推荐使用button