Home 〉 HTML Tutorials 〉 HTML '<button>' Tag - Syntax, Attributes, Examples & Styling
HTML '<button>' Tag - Syntax, Attributes, Examples & Styling !
HTML '<button>' Tag - Syntax, Attributes, Examples & Styling !
What is the purpose of the HTML '<button>' tag, and how do you use it effectively in web design?
This blog post explained the '<button>' tag, its syntax, whether it's a block-level element, and detailed attributes with examples. We also showed how to apply inline CSS for a visually pleasing button and discussed interlinking strategies and external references to improve SEO. From simple form buttons to dynamic interface elements, the HTML '<button>' tag plays a key role in web interaction. The details blog post on HTML button tag is as follows.
Introduction
The HTML '<button>' tag is used to create interactive buttons in a web page. These buttons can submit forms, reset form data, or trigger JavaScript functions. The '<button>' tag is a flexible element and is widely used in forms, UI designs, and navigation actions.
Syntax of HTML '<button>' Tag
Syntax ✍
<button type="submit">Click Me</button>
- '<button>': This is the opening tag.
- 'type="submit"': This attribute specifies the behavior of the button. It can be 'submit', 'reset', or 'button'.
- 'Click Me': This is the visible label inside the button.
- '</button>': This is the closing tag.
Element Type:
The '<button>' tag is a block-level element, but its behavior can be styled using CSS to act inline as well.
Attributes of HTML '<button>' Tag (with Examples)
Here are common attributes supported by the '<button>' tag:
1. 'type'
Specifies the button type.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<button type="reset">Reset</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This button resets all form inputs to their default values.
2. 'name'
Defines the name for the button, used when submitting form data.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<button type="submit" name="submitBtn">Submit</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The form will send "submitBtn" as the key in form data.
3. 'value'
Sets the value sent to the server when the form is submitted.
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<button type="submit" name="submitBtn" value="Send">Send</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Sends the value "Send" to the server.
4. 'disabled'
Disables the button, making it non-clickable.
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<button disabled>Disabled</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This button cannot be clicked or submitted.
5. 'autofocus'
Automatically focuses the button when the page loads.
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<button autofocus>Focus Here</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The button gets focus when the page loads.
6. 'form'
Associates the button with a specific form using the form's 'id'.
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<form id="myForm"></form>
<button form="myForm" type="submit">Submit</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The button is linked to '#myForm' and submits it.
CSS Inline Styling Example
Code : 7 📝
<!DOCTYPE html>
<html>
<body>
<button style="font-size:16px; padding:10px 20px; background-color:#28a745; color:white; border:none; border-radius:5px;">
Styled Button
</button>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This button looks clean and professional using CSS properties like 'font-size', 'padding', 'background-color', and 'border-radius'.
Conclusion
The '<button>' tag in HTML is a versatile element used to create clickable actions. With attributes like 'type', 'name', 'value', and 'disabled', it plays a crucial role in forms and UI interactions. Styling buttons with inline CSS makes them visually appealing. Whether you're creating a simple form or an interactive webpage, understanding the '<button>' tag is essential for modern web development.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Padding Explained with Examples | CSS Box Model Guide
Related Topics:
- HTML '<form>' Tag - Learn Syntax, Attributes & Examples for Forms
- HTML input Tag - Types, Attributes, Syntax, and Examples
- JavaScript Tutorial for Beginners - Learn JavaScript with Examples !
Frequently Asked Questions (FAQs)
What are the default types of buttons?
The default is 'submit'. Others include 'reset' and 'button'.
Can a '<button>' have images or icons inside?
Yes, you can place images or even icons (like from Font Awesome) inside a '<button>'.
What's the difference between '<button>' and '<input type="button">'?
'<button>' can contain HTML (text, images), while '<input>' is self-closing and cannot.
Can I disable a button using CSS?
No, you must use the 'disabled' attribute.
Is it safe to use multiple buttons in a form?
Yes, but ensure each has the correct 'type' to avoid unintended form submissions.