Button Control

They interact with users usually to submit a form for processing or data transfer. They are displayed as rectangles with squared-off edges by default. These clickable buttons are made by using <input> tag. Both the <input> or <button> tag can be used to create any of the different types of buttons but the <input> tag is supported by many browsers. HTML has three types of buttons which are specified using the type attribute as shown

Submit – It creates a button that submits the form for processing or data transfer as shown

HTML code <form action=“/process.php” method=“get”> <input type=”submit” value=”Submit” /> or <button type=”submit”>Submit </button> </form>

Browser output

Reset – It creates a button which when pressed, resets form controls back to their initial values.

HTML code <form action=“/process.php” method=“get”> <input type=”reset” value=”Reset” /> or <button type=”reset”>Reset</button> </form>

Browser output

Button – It creates a button which when pressed, an action or event is triggered, based on a predefined script or function.

HTML code <form action=“/process.php” method=“get”> <input type=”button” value=”Click Me” /> or <button type=”button”>Click Me</button> </form>

Browser output

Graphical Buttons

An image can also be used as a button with both the <input> and <button> tag even though <input> tag has no closing tag. And both are discussed as

<button> Tag – In it <img> tag is included between the opening and closing <button> tags and the image is displayed in the center of the button when viewed in the browser as shown

HTML code <button type=”submit” name=”Submit” value=”Submit”><img src=”Vskills_logo.jpg” width=”100″ height=”68″ alt=”Vskills”></button>

Browser output

Buttons have a grey background colors by default hence, for seamless image on the button then the background of image is either grey or transparent.

<input> Tag – It is used by assigning the value of type attribute to ‘image’ and using the ‘src’ attribute to specify path to image file. The ‘alt’ attribute is also used to show text description as substitute if the image is not found as shown by using the ‘alt’ attribute as shown

HTML code <input type=”image” src=”Vskills_logo.jpg” name=”Submit” alt=”Vskills” />

Browser output

Apply for HTML Certification

https://www.vskills.in/certification/certified-html-designer

Back to Tutorials