Height and Width Attribute
The height and width attributes specify the height and width of an <input> element.
height="pixels"
Specifies the height of the button image when the input type is set to "image".
width="pixels"
Specifies the width of the button image when the input type is set to "image".
Note: These attributes are used with input="image" only.
It is always necessary to specify both the height and width attributes for images. If the height and width are set then the space required for the image is reserved when the page is loaded.
Syntax
<input type="image" src="someimage.jpg" width="pixels" height="pixels" />
Browser Support
It is supported in all major browsers such as Chrome, Internet Explorer, Firefox, Opera and Safari.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Height and Width Attribute</title>
</head>
<body>
<h3>HTML5 Height and Width Attribute</h3>
<form action="form.asp">
First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
Email:
<input type="email" name="email"><br>
<input type="image" src="D:\Ashwani\images.jpg" alt="Submit" width="90" height="50">
</form>
</body>
</html>
Output
![widhei.jpg]()
List Attribute
The list attribute refers to a <datalist> tag that contains pre-defined options for an <input> element. The list attribute enables the user to associate a list of options with a particular field.
The <datalist> tag is a list of options that will display a simple text field that drops down a list of suggested answers when focused. The <datalist> is new in HTML5.
Syntax
<input type="text" list="characters">
Browser Support
It is supported in all major browsers such as Chrome, Internet Explorer, Firefox and Opera except Safari.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>List Attribute</title>
</head>
<body>
<h3>HTML5 List Attribute</h3>
<form action="form.asp" method="get">
Websites:
<input type="url" list="urls" id="website" name="website">
<datalist id="urls">
<option value="http://www.google.com">
<option value="http://www.gmail.com">
<option value="http://www.facebook.com">
</datalist>
<input type="submit">
</form>
</body>
</html>
Output
![list.jpg]()
Min and Max Attribute
These are applicable to input controls whose type attribute has been set to number or range. The min and max attributes define the minimum and maximum values that will be accepted. The step attribute defines the allowed interval between values.
specifies the maximum value allowed for the input field.
specifies the minimum value allowed for the input field.
specifies the number intervals for the input field
For example, if min is set to "0" and step is set to "1", then only the values 0, 1, 2, 3, and so on are allowed.
Note: The "min", "max", and "step" attributes works with the following <input> types: date-pickers, number and range.
Syntax
<input type="number" name="num" min="1" max="10" step="3" />
Browser Support
It is supported in all major browsers such as Chrome, Internet Explorer, Safari and Opera except Firefox
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Min and Max Attributes</title>
</head>
<body>
<h3>HTML5 Min and Max Attributes</h3>
<form action="form.asp">
Quantity:
<input type="number" name="quantity" min="1" max="20" step="2"><br>
Tickets:
<input type="number" name="tickets" id="tickets" min="1" max="10"><br>
<input type="submit">
</form>
</body>
</html>
Output
![minmax.jpg]()