button标签与input标签的区别

我就是我 2023-07-20 10:39 31阅读 0赞

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

input标签

作为按钮，有3种 type 效果：

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

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

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

  1. <input type="reset">

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

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

button标签

在 form标签中，也有3种type效果：

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

  1. <button>提交</button>
  2. <button type="submit">提交</button>

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

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

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

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

区别

  1. 样式设定方便

    1. button按钮中的内容，是标签的文字内容，可以直接按照css样式来设定
    2.  input标签，字体样式等可以设定，但是其他的样式设定，盒子模型，弹性盒模型等，无法支持

  2. H5中，对button标签做了专门的强化，给button标签新增很多的功能

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

总结：

  1. input 能实现的 button都能实现
  2. button 能实现的 input不一定能实现
  3. 推荐使用button

发表评论

表情：
评论列表 （有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

    相关 input标签name与value区别

    id是唯一标识符，不允许有重复值(类似数据表的主键)可以通过它的值来获得对应的html标签对象。(如果在同一页面代码中，出现重复的id，会导致不可预料的错误) name：单独

    桃扇骨桃扇骨/ 0 赞/ 399 阅读