Button tag in HTML
In this article, I will show you how to use the button tag in HTML, this is a very important tag in the html form structure.
The button tag creates a button, it doesn't create a form submit action like the input tag does. Therefore, we often use it in combination with Javascript to create the required actions of the problem.
In the <button></button> tag pair, the user can set the content to be a piece of text or an image. This is the difference between button tag and input tag with type = button .
1. How to use the button tag in HTML
For example , create a button to show greetings when clicked.
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <button type="button" onclick="alert('Hello web888.vn!')" > Click để in ra lời chào web888 </button> </body> </html>In the above example, I created an onclick event for the button tag so that when the button is clicked, it will alert the text ' Hello world! '.
2. Attribute of button tag in html
Here are some of the most commonly used attributes.
- autofocus – automatically focus on the tag when the page loads.
- type – will specify the style of the button, including: submit, reset, button.
- name – the name of the button.
- disabled – whether the button is disabled or not.
For example , use the type attribute to create a button that resets the entered data.
<form> <input type="text" name="username"> <input type="text" name="email"> <button type="reset">Reset</button> </form>3. Set CSS for button . tag
To add CSS to the button, you can use two ways:
- The first way is to add a style attribute and write the CSS right inside.
- The second way is to give the input tag a class or id, and then use this information to generate CSS.
<button class="color-red" id="btn" type="reset">Reset</button> <style> button{ color:red } .color-red{ color:red } #btn{ color:red } </style>Of the three methods above, you can use any of them.
