首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

<button>与<input type ="button"/>.哪个用?

在这个问题中,我们需要比较两个按钮的用途。<button><input type="button"/>都是在HTML中创建按钮的方法,但它们之间存在一些差异。

<button>标签:

  • 更灵活,可以在<button>标签内包含文本和HTML标签,如图片、链接等。
  • 可以设置不同的类型,如buttonsubmitreset等。
  • 可以设置不同的样式,如背景颜色、字体、大小等。
  • 可以添加JavaScript事件监听器,如onclickonmouseover等。

<input type="button"/>标签:

  • 更简单,只能包含文本,无法包含其他HTML标签。
  • 不能设置不同的类型,只有一种类型,即普通按钮。
  • 可以设置样式,如背景颜色、字体、大小等。
  • 可以添加JavaScript事件监听器,如onclickonmouseover等。

总的来说,如果需要更多的灵活性和更多的控制,可以使用<button>标签。如果需要简单的按钮,并且不需要包含其他HTML标签,可以使用<input type="button"/>标签。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 表单提交中的input、button、submit的区别

    在IE中,甚至会把button开始与结束标签之间的内容作为name对应的值提交给服务器。...button和input的相似还不止于此,button也可以设置type=reset,此时点击按钮会导致表单被重置(这还挺有用的)。...button> button type="reset" value="Reset">Resetbutton> 对于button就不多说了,建议用button作为交互用的按钮...同时请注意设置type=submit来兼容IE。 3.回车键提交表单 Enter键是可以提交表单的!但是你可能已经注意到了,并非所有的表单都可以用Enter键来提交。...“单行”指的是type为text而非textarea,显然在textarea中回车提交表单是怎样的难以接受。 其实在实践中,有多个单行的input也可以用Enter提交,比如登录页面。

    4.1K100

    为什么有些前端一直用 div 当按钮,而不是用 button?

    有些前端开发者习惯使用div元素来创建按钮,而不是使用专门的button元素。本文将探讨为什么有些前端开发者一直使用div作为按钮的替代方案,并介绍使用button元素的优势。...div 和 button div和button是HTML中常用的元素,它们在语义上有一定的区别和用途。...使用button的优势 尽管使用div作为按钮具有一些优势,但使用button元素也有以下几个明显的优势: 语义化:button元素是专门用于表示按钮的语义化元素,更符合文档结构和可访问性要求。...使用button可以让屏幕阅读器和搜索引擎更好地理解按钮的含义。 键盘访问:button元素天然支持键盘操作,用户可以使用Tab键和回车键进行焦点切换和按钮触发。... 使用button元素: button class="button" onclick="handleButtonClick()">Click mebutton> 总结 在前端开发中,有些开发者喜欢使用

    44520

    【微信小程序开发】使用button标签的open-type=getUserInfo引导用户去授权

    一、 前言 小程序官方文档,上面说明 > wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 button open-type="getUserInfo...">button> > 引导用户主动进行授权操作 > 当用户未授权过,调用该接口将直接报错 当用户授权过,可以使用该接口获取用户信息 如上文,之前用户未授权过时,调用wx.getUserInfo会调出授权框...所以我们要使用上述button来请求用户授权。 ## 二、主体 ## 以index页面作为展示授权按钮的页面,并且在app.json中将index作为首页。在判断用户授权之后跳转到其他页面。...index.wxml button     wx:if="{{canIUse}}"     open-type="getUserInfo"     bindgetuserinfo="bindGetUserInfo...canIUse: wx.canIUse('button.open-type.getUserInfo')   },   onLoad: function() {     // 查看是否授权     wx.getSetting

    1.6K10

    张高兴的 UWP 开发笔记:用 Thumb 控件仿制一个可拖动 Button

    在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧。   ...下面就来仿制一个可以拖动的圆形 Button,像 IPhone 的“小圆点”一样(像下图一样),只不过功能单一,仅仅用来打开 MainPage 里的汉堡菜单。...本文仿制 Button 的时候只需要 DragDelta 事件。   实现很简单,我就不写示例了。 ?   我有一个 SplitView “RootSplitView”,作为汉堡菜单的容器。   ...Button 的 Click 事件怎么实现呢?有 PointerPressed 和 Tapped 两个备选事件。...如果你在设计器里像 WinForm 一样拖拽控件设计布局的话,xaml 会给被拖拽的控件一个 Margin,因此 Thumb 的拖拽实现也用的 Margin。

    1.3K50
    领券