The width and height attributes in HTML5 forms

The width and height attributes can be applied to any of the following HTML elements:

Elements:

From the HTML5 point of view it is important to mention that the <input /> element may have the height and / or eidth attributes assigned to it also. It is frequently used do type = "image" but it may be also used in other types as well, such as the type = "submit".

Syntax:

<input type="image" src="button.png" width="150" value="Submit" />

The values of the width and height attributes are expressed as numeric values in terms of the intrinsic unit of measurement of the associated resource. For instance, for a bitmap image such a .jpg or .png file, the attribute value is a number indicating a pixel value.

NOTE: that these attributes have lower precedence than any CSS styles applied.

Example

Input tag with with height attribute example:

<!DOCTYPE html>
<html>

<body>
    
<h4>Two &lt;input type="image" /&gt; with different height set:</h4>

<form action="#" method="post">
  <p>
    <label for="img1">Image 1:</label>
    <input id="img1" type="image" src="../../../img/tutorials/butimg_ex1.png" height="30px" /><br />
     <label for="img2">Image 2:</label>
     <input value="test" id="img2" type="image" src="../../../img/tutorials/butimg_ex1.png" height="40px" />
  </p>
</form>

<h5>Note that the width value is adjusted automatically.</h5>

<h5>p.s. submitting the form will not generate any action</h5>

</body>
</html>

›› go to examples ››

The width and height attributes in HTML5 forms

Elements:

Syntax:

Example

Input tag with with height attribute example:

Comments

About

Contact

Get Connected