What is difference between <button> vs. <input type="button" />?

HTMLWeb DevelopmentFront End Technology

In HTML, <input type="button" /> is used to create buttons in an HTML form. Inside the <button> tag, you can place content like text or images. But, this is not the case with the buttons created with <input> tag.

Let’s see an example of button and <input type=”button” />,

HTML <button> tag

It is used for creating a button within an HTML form and inside the <button> tag, you can place content like text or images.

The following will add an image to a button −

Example

You can try to run the following code to add an image to a button using the <button> tag −

<!DOCTYPE html>
<html>
   <body>
      <button onclick="alert('Learn HTML')">
         <img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
            alt="Learn HTML" height="80" width="100">
      </button>
   </body>
</html>

HTML <input type=”button” />

Submit button automatically submits a form on click. Using HTML forms, you can easily take user input. The <form> tag is used to get user input, by adding the form elements. The type attribute is used to add a button inside the <input> tag.

Example

You can try to run the following code to learn about the usage of <input type=”button”>

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Button</title>
   </head>

   <body>
      <form action="/new.php">
         Student Name:<br>
         <input type="text" name="sname">
         <br>
         Student Subject:<br>
         <input type="text" name="ssubject">
         <br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>
raja
Published on 23-Jan-2018 06:49:56
Advertisements