How to use the html button tag

This Blog You Will Learn
ஃ What is the <button> tag in HTML?
ஃ Syntax of HTML <dialog> tag
ஃ Why USe the <button> tag ?
ஃ Important Attributes <button>
ஃ Type of <button> tag in HTML
ஃ how to use the html button tag Example
ஃ Explain Program
ஃ how to use the html button tag Output
What is the <button> tag in HTML?
✅The <buttons> tag are one of the most important elements on website.
✅HTML <button> tag used create clickable buttons than perform actions such as submitting forms.
✅ HTML <button> tag is use to create a clickable button that can submit forms, reset data or trigger actions.
Syntax of HTML <dialog> tag
<button type="button"> Button text </button>
Why USe the <button> tag ?
✔ Creates interactive elements.
✔ Is accessible by keyboard and screen readers.
✔ Works with forms and Javascript.
✔ Can contain text, icons and HTML.
Type of <button> tag in HTML
1) Submit Button (type= "submit ")
- submit form data to server.
- button acts submit button by default.
<form>
<button type="submit">Submit</button>
</form>
2) Reset Button (type= "reset")
- Resets all form fields to default values .
- reset buttons carefully as they can erase user input.
<form>
<input type="text" value="hi everyone">
<button type="reset">Reset</button>
</form>
3) Normal Button (type="button")
- perform custom actions usually with javascript
<form>
<button type="button"
onclick="alert(button clicked")>Click ME
</button>
</form>
Important Attributes <button>
1) type
<form>
<button type="submit"></button>
</form>
2) disabled
<form>
<button disabled>Disabled</button>
</form>
3) name and value
- use to send button data during form submission
<form>
<button name="action" value ="login">
login</button>
</form>
4) autofocus
- automatically focuses the button when page loads.
<form>
<button autofocus>Click</button>
</form>