how to use the html button tag

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

Disables the button.

<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>

how to use the html button tag

Example

  
  
   <!DOCTYPE html> 
  <html>
  <head>
      <title> HTML Button tag  </title>
 </head>
  <body>
    <h1>HTML Button Tag   </h1>
    <button type="button">Click Me</button>
  </body>
     </html>