HTML Button Type

by Online Tutorials Library July 14, 2022

Html <Button> Type

The type is an attribute of <button> element, which sets the type of the button as described in the following syntax:

Following are the three values of type attribute:

Button: The button value is used for the clickable button.
Submit: The submit value is used for submitting the form-data.
Reset: The reset value is used to reset the values of a form to its initial values.

Example:

  <!DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <title>  Example of Button Type  </title>  <style>  /* The following tag selector body use the font-family and background-color properties for body of a page*/    body {  font-family: Calibri, Helvetica, sans-serif;  background-color: pink;  }   /* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */      .container {  padding: 50px;  background-color: lightblue;  }  /* The following tag selector input use the different properties for the text filed. */  input[type=text] {    width: 100%;    padding: 15px;  margin: 5px 0 22px 0;  display: inline-block;   border: none;   background: #f1f1f1;  }    input[type=text]:focus {  background-color: orange;  outline: none;  }   div {              padding: 10px 0;  }      hr {    border: 1px solid #f1f1f1;    margin-bottom: 25px;  }  /* The following tag selector button use the different properties for the Button. */  button {    background-color: #4CAF50;    padding: 16px 20px;    margin: 8px 0;    border: none;    cursor: pointer;    color: white;    width: 100%;    opacity: 0.9;  }  /* The following tag selector hover use the opacity property for the Button which select button when you mouse over it. */  button:hover {  opacity: 1;  }  </style>  </head>  <body>  <form>  <div class=”container”>  <center>  <h1> Registration Form</h1> </center>      <hr>  <label > Firstname </label>   <input type=”text” name=”firstname” placeholder= “Firstname” size=”15″ required />   <label> Middlename: </label>   <input type=”text” name=”middlename” placeholder=”Middlename” size=”15″ required />   <label> Lastname: </label>    <input type=”text” name=”lastname” placeholder=”Lastname” size=”15″required />     <div>  <label>   Gender :  </label><br>  <input type=”radio” value=”Male” name=”gender” checked > Male   <input type=”radio” value=”Female” name=”gender”> Female   <input type=”radio” value=”Other” name=”gender”> Other    </div>  <label>   Phone :  </label>  <input type=”text” name=”country code” placeholder=”Country Code”  value=”+91″ size=”2″/>   <input type=”text” name=”phone” placeholder=”phone no.” size=”10″/ required>       <label for=”email”><b>Email</b></label>  <input type=”text” placeholder=”Enter Email” id=”email” name=”email” required>    The below button displays as the submit button, which is used to submit the form.     <button type=”submit” value=”submit”>Submit</button>    The below button displays the reset button, which is used to reset the form to its initial values.     <button type=”reset” value=”reset”>Reset</button>    The below button displays a message on a web page when you click on it. After clicking on a button, a function is called from the script tag.     <button type=”button” onclick=”sfun()”> Print a Simple Message </button>  <script>  function sfun()  {  document.write(“Hello tutoraspire”);  }  </script>  </form>  </body>  </html>  

Test it Now

Output:

HTML Button Type