HTML 按钮标签
HTML 按钮标签允许使用 HTML 文档在网页上创建活动按钮控件。这个<按钮>元素在 body 标记内声明。为什么我们需要一个按钮元素？通常，当用户访问网页时，他最常见的行为是单击网站上的某个位置，从而转到下一个 URL 页面。为此，Button 元素无法单独完成；它是由表单操作创建的，其中 Web 表单有一个默认的提交按钮单击。
按钮是使用
语法：
与其他 HTML 标签一样，即使按钮标签也有开始和结束标签，并且按钮类型是使用属性定义的。
<button> // some stuff like content / image </button>
HTML 按钮标签的属性
没有使用特殊属性，因为它们没有任何必需的属性；相反，它们被用作具有 type=” 属性的普通按钮。 “甚至这个元素也是使用 CSS 设计的，其属性可以改变按钮标签中的变化。这些属性是 CSS 字体系列、字体粗细、文本装饰和字体样式。背景颜色等着色属性和文本溢出和文本缩进等布局属性。
| S.no | Attribute Name | Description | Example |
| 1 | autofocus | It is considered a Boolean attribute. | |
| 2 | disabled | Making a button non-clickable. | |
| 3 | Form | It Creates a form | |
| 4 | formaction | It specifies the current location for submitting the form data. | |
| 5 | formnovalidate | It appears in gray and gives non-validation features. | |
| 6 | Formmethod | It specifies the methods while referring to the next web page(get the post of HTTP methods) | |
| 7 | formtarget | It specifies the target path for the server response when a form action is done. | |
| 8 | formenctype | It has been used when a form is submitted to the webserver for the response; it activates the type of content used. | |
| 8 | name | It specifies the button name used in the form element, which is used by form inputs. | |
| 9 | type | It specifies the type of button being used. It has three default values submit, reset, and text. | < button type “……” > |
| 10 | value | It gives an initial value when a button is used along with the form data | |
| 11 | tabindex | It specifies the tab key and the order does the preference. | |
| 12 | onclick | When a button is pressed, it runs a small javascript code behind it. |
Examples to Implement in HTML Button Tag
Below are examples of implementing an HTML Button Tag:
Example #1
Code:
<!DOCTYPE html> <html lang="en"> <head> <title> HTML button tag Example</title> </head> <body> <h2>HTML button tag Example </h2> <form action="/examples/html/action.php" method="post"> <p> Employee Name: <input type="text" name="Employee-Name"> <button type="submit" value="Submit">Click</button> <button type="reset" value="Reset">Reset</button> </p> </form> </body> </html>
Output:
Example #2
Code:
<!DOCTYPE html> <html> <head> <h3> <center> Example using CSS </center><h3> </head> <body> Normal Class <button type="button">Add to the First class</button> <hr /> Economic Class <button type="button" style="color: pink;"><b> Book Economic Class </b></button> <hr /> Bussiness class <button type="button" style="color: orange;"><b> Book Bussiness Class </b></button> <hr /> Departure <button type="button" style="font: bold 12px Open Sans;">Norway </button><br /> </body> </html>
Output:
Example #3
With CSS: Here, we have used padding and margin property. Here are some ways to look at the page better. To create a button with rounded corners, use border-radius.
Code:
<html>
<style>
body {
color: #000;
height: 90vh;
background: linear-gradient(-90deg, #a1c3d1 0%, #c48b9e 100%) no-repeat;
text-align: center;
}
input {
width: 280px;
display: block;
margin: 2rem auto;
border: 3px solid #fbc7ff;
padding: 7px;
background: transparent;
border-radius: 25px;
outline: none;
}
::placeholder {
color: #00ced1;
}
.btn {
background:#96f905;
border: none;
height: 3rem;
border-radius: 20px;
width: 220px;
display: block;
color: #96f905;
outline: none;
margin: 2rem auto;
}
</style>
<body>
<h1>HTML Form action Using Button</h1>
<form action="/action_page.php" method="get">
<input type="text" name=" Full Name" placeholder="Enter Full Name" class="btn">
<input type="text" name=" Address" placeholder="Enter Address" class="btn">
<button type="press" value="Press"> Click </button>
</form>
</body>
</htmlOutput:
Example #4
The below example shows how to use the attribute autofocus with button element; in an example, when a page Loads, it focuses on the first HTML control.
Code:
<!DOCTYPE html> <html> <head> <title> Button Demo <button>autofocus Attribute </title> </head> <body style="text-align:center"> <h1 style="color: blue;"> EDUCBA Web Tutorial </h1> <h2> Button Tag <button>autofocus Attribute </h2> <h2> Button Tag <button>autofocus Attribute </h2> <button id="GFG" autofocus> Press </button> <br> </body> </html>
Output:
Example #5
onclick attribute demo. In the below example, I have used JavaScript to take action in the button; meanwhile, it alerts a dialog box with a text message. We use a JavaScript function to make the critical decision by activating the button with onclick().
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML On Click Button Demo</title>
</head>
<body>
<h3> HTML On Click Button Demo</h3>
<button onclick="alert('Hi Welcome to EDUCBA!')"> Press me... </button>
</body>
</html>Output: Before the button press
Alert Message – After the Button click
Example #6
Code:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="scripts.js"> </script> <link rel="stylesheet" href="styles.css"> <script type="text/javascript" src="scripts.js"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <p>The button loads to the next web page!</p> <a href="https://www.educba.com" target="_blank"> <button>Submit!</button> </a> </body> </html>
Output:
Conclusion
In summary, we have learned about the HTML Button tag. This tag initiates an action and submits content within an HTML document. Important aspects of the website create an easy button, CSS, and JavaScript to look colorful. You can also learn many options related to buttons.
以上是HTML 按钮标签的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
