专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

html按钮代码,html按钮怎么设置

来源:小易整编  作者:小易  发布时间:2023-01-12 10:23
摘要:定义与用法标签定义一个按钮。在button元素内部,您可以放置内容,比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。控件与相比,提供了更为强大的功能和更丰富的内容。与标签之间的所有内容都是按钮的内容,其中包括任何可接...

定义与用法

  • <button> 标签定义一个按钮。

  • 在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

  • <button> 控件 与 <input type=”button”> 相比,提供了更为强大的功能和更丰富的内容。

  • <button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

  • 唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

提示:

  • Internet Explorer 的默认类型是 “button”,而其他浏览器中的默认值是 “submit”。

  • HTML 表单中创建按钮尽量使用input 标签,因为button标签不同的浏览器会提交不同的按钮值。



语法格式

<button type=””>……</button>


示例代码

<button type="button">Click Me!</button>

效果展示:

图片


浏览器支持

IEFirefoxChromeSafariOpera

图片


图片


图片


图片


图片


所有主流浏览器都支持 <button> 标签。


标签属性

图片

: HTML5新属性。

属性描述
autofocus

图片


autofocus规定当页面加载时按钮应当自动地获得焦点。
disableddisabled规定应该禁用该按钮。
form

图片


form_id规定按钮属于一个或多个表单。
formaction

图片


URL规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=”submit” 配合使用。
formenctype

图片


application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=”submit” 配合使用。
formmethod

图片


get
post
规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=”submit” 配合使用。
formnovalidate

图片


formnovalidate如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=”submit” 配合使用。
formtarget

图片


_blank
_self
_parent
_top
framename
规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=”submit” 配合使用。
namename规定按钮的名称。
typebutton
reset
submit 
规定按钮的类型。
valuetext规定按钮的初始值。可由脚本进行修改。

全局属性

<button> 标签支持 HTML 的全局属性。


事件属性

<button> 标签支持 HTML 的事件属性。



更多示例

如果您在表单中使用button,它可以用作提交按钮。您也可以将其用作重置按钮。如果在表单外部使用button,则可以调用JavaScript函数。

HTML按钮示例:调用JavaScript函数

<button name="button" type="button" onclick="hello()">点我</button>  
<script>  
    function hello(){  
    alert("你好!欢迎访问奔月教程网!");  
    }  </script>

效果展示:

图片

点击下方“阅读原文”可亲试效果


HTML按钮示例:提交表单

<form>  
    输入姓名:<input type="text" name="name"/><br/>  
    <button>提交</button>  
</form>

效果展示:

图片

点击下方“阅读原文”可亲试效果


HTML按钮示例:重置表单

<form>  
    输入姓名:<input type="text" name="name"/><br/>  
    <button type="reset">重置</button>  
</form>

效果展示:

图片



本文地址:IT问答频道 https://www.hkm168.com/itwenda/902987.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


IT问答
小编:小易整编
相关文章相关阅读
  • html中浮动是什么

    html中浮动是什么

    在html中,浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距,只需要给元素设置“float:left|right|none|inherit”样式即可。本教程操作环境:windows7系统、CSS3...

  • html如何解析%%

    html如何解析%%

    html是一种用于创建网页结构的标记语言,它提供了一种方式来标记文本、图像、链接以及其他与网站相关的内容。html可以在网页中插入各种元素,包括表格、列表、图像、表格等等。本文将讨论html的解析过程以及如何编写有效的html代码。HTML...

  • html embed标签怎么用

    html embed标签怎么用

    HTMLembed标签使用方法和属性详解一、基本语法代码如下:embedsrc=url说明:embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE都支持。url为音频或...

  • HTML5中nav是什么意思

    HTML5中nav是什么意思

    在html5中,nav全称“navigation”,中文意思为“导航”,是一个导航标签,用于表示html页面中的导航;nav标签会定义一个含有导航链接的区域,语法“链接...”。本教程操作环境:windows7系统、HTML5版、Dell...

  • html中什么是伪类

    html中什么是伪类

    在html中,伪类是一种用于已有元素处于某种状态时(滑动、点击等)为其添加对应样式的选择器,且这个状态是根据用户行为而动态变化的。常用伪类有“:active”、“:hover”、“:link”、“:root”、“:valid”等等。本教程操...

  • HTML代码如何格式化

    HTML代码如何格式化

    HTML代码可以通过sublime中的内置命令Reindent对代码格式化,还可以安装HTML-CSS-JSPrettify插件对代码格式化有时候我们将别人的代码复制过来的时候发现代码排列的非常杂乱无章,无法去阅读代码,今天就将和大家介绍...

  • doctype html 什么意思

    doctype html 什么意思

    “doctypehtml”是指html5标准网页声明,即告诉浏览器当前html是用第五版本编写的,完整语法“”。doctype声明是一条指令,必须位于html5文档中的第一行,也就是位于“”标签之前。本教程操作环境:windows7系统、...

  • html图片显示不出来怎么办

    html图片显示不出来怎么办

    在网页制作中,经常会涉及到插入图片的操作,但有时候我们会发现图片无法显示出来。这可能是因为图片链接错误、图片文件损坏或网页代码错误等原因。本文将带您了解html图片无法显示的原因和解决方法。一、图片链接错误在HTML中,图片通常通过img标...

  • 周排行
  • 月排行
  • 年排行

精彩推荐