How to add height and width Attributes in HTML Input - HTML Input Attributes

The input height and width attributes specify the height and width of an <input type="image"> element.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Example of adding height and width Attributes in HTML Input

Define an image as the submit button, with height and width attributes:

index.html

Example: HTML

 <form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Output should be:

Full Completed Code example of adding height and width Attributes in HTML Input

The height and width attributes specify the height and width of an input type="image" element.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The input height and width attributes</h1>

<p>The height and width attributes specify the height and width of an input type="image" element.</p>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>

</body>
</html>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Input Attributes
Uploaded by:	Admin