HTML Button Tag Tutorial: Syntax, Types, and Practical Examples

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

ஃ structure diagram examples

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

ஃ structure diagram examples

How to Create Buttons in HTML Using Button Tag


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.

HTML textarea Tag Tutorial: Syntax & Examples

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>

how to use the html button tag
Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
        <title> HTML Button tag </title>
</head>


  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab.

Step 4]

<body>
    <h1>HTML Button Tag   </h1>

    <button type="button">Click Me</button>
  </body>


  • HTML  <body> tag contains all appear on webpage.
  • HTML <h1> tag heading tag.
  • HTML <button>     :-  create button on  webpage.
  • <type=" button">    :-   browser  this clickable button 
  • </button>                :-  ends the button. 
Step 6]

   Closing tag


  </body>
</html>

how to use the html button tag
Output


html button tag




html button tag



Related Post :-

how to set image height

html link tag explain

how to use pre tag

 

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  ஃ   What Is CSS Text Color  ஃ   Syntax   ஃ   Purpose of Text Color  ஃ    Real world Use Cases  ஃ    What Is CSS Text Color  Example    ஃ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more