HTML5 New Form Attributes-Part 4

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

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

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

<inputtype="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

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.

max="number"

specifies the maximum value allowed for the input field.

min="number"

specifies the minimum value allowed for the input field.

step="any number"

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

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

HTML5 New Form Attributes-Part 4

Reactions

Comments

Height and Width Attribute

List Attribute

Min and Max Attribute