html中<button>标签的使用详解-html教程-PHP中文网

首页

web前端

html教程

html中<button>标签的使用详解

黄舟

Jun 20, 2017 pm 01:40 PM

buttonhtml使用标签详解

关于button按钮的介绍知道：button是定义一个按钮，但是在表单中也有一个可以定义按钮，我们知道当6e63ca93929ae453ed909631d485d875的时候也是在网页上创建了一个按钮,现在要说的是个button这个标签和input里面的标签有怎样的区别。当然这个标签为我们提供了更为强大的功能，我们可以设置button，设置button上面的文字，甚至可以加载图像等等多媒体在HTML5中button标签有增加了一些属性，比如说autofocus，disabled，form，formation，formenctype，formmethod，fornovalidate，formtarget，name，type，value下面我们做一几个小小的案例来说明这个标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title></title>
</head>
<body>
   <button type="button">这是一个按钮</button>
    <hr/>
   <br/>
   <!-- 这个地方告诉我们在button之间的文本都会写到button这个按钮上面 -->
   <button type="button">
   <img src="https://www.baidu.com/img/bd_logo1.png" width="100" height="50">
   </button>
   <!-- 这一个部分告诉我们可以将按钮设置为图画，在按钮上增加图片 -->
   <hr/>
   <button type="button" autofocus="autofocus">已经获得焦点</button>


   <!--这个地方定义一个获得焦点的按钮，获得焦点就和鼠标在上面滑动一样-->
   <hr/>
   <button type="button" disabled="disabled">失效</button>
   <!-- 在这个地方定义一个失效的按钮，已经禁用，其实就是在button中增加一个属性
   并且将值设置为disabled -->
    <form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <button name="subject" type="submit" value="HTML">HTML</button>
    <button name="subject" type="subject" value="CSS">CSS</button>
     </form>
        <!--在这个地方用到form和button进行结合使用，其实form提供的是
        一个来链接，button的属性是提交submit，而且method方法是得到
        应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的
        内容是不同的，有的 是value的值，有的 是button之间的内容  -->


</body>
</html>

一、普通按钮button

普通按钮一般情况下要配合JavaScript脚本来进行表单的实现。

语法：

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>

说明：

value的取值就是显示在按钮上的文字，onclick是普通按钮的事件，这个我们在JavaScript入门教程中会详细讲解，在此大家了解一下就OK了。

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    单击按钮弹出对话框：<br/>
    <input type="button" value="按钮" onclick="alert(&#39;你点击了按钮！&#39;)">
</body>
</html>

在浏览器预览效果如下：

然后你点击按钮会弹出提示框：

二、提交按钮submit

提交按钮可以看成一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给服务器处理。

语法：

<input type="submit" value="提交按钮的取值"/>

说明：

value的取值就是显示在按钮上的文字。例子请看重置按钮中的例子。

提交按钮submit真正的用处还得我们学了后端技术才能真正理解。

三、重置按钮reset

重置按钮也可以看成一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。

语法：

<input type="reset" value="重置按钮的取值"/>

说明：

value的取值就是显示在按钮上的文字。

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号：<input type="text"/><br/>
        密码：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

在浏览器预览效果如下：

你在文本框输入字符之后，按下重置按钮，你会发现文本框的内容清除了！这就是重置按钮的功能。

以上是html中<button>标签的使用详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。