HTML Input Attributes

This chapter describes the different attributes for the HTML <input> element.

The input value attribute specifies an initial value for an input field:

Input fields with initial (default) values: <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>

The input disabled attribute specifies that an input field should be disabled.

The value of a disabled input field will not be sent when submitting the form!

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>

The input size attribute specifies the visible width, in characters, of an input field. The default value for size is 20.

The size attribute works with the following input types: text, search, tel, url, email, and password.

Set a width for an input field: <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form>

The input maxlength attribute specifies the maximum number of characters allowed in an input field.

When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

Set a maximum length for an input field: <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form>

The input min and max attributes specify the minimum and maximum values for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

Use the max and min attributes together to create a range of legal values.

Set a max date, a min date, and a range of legal values: <form> <label for="datemax">Enter a date before

<input type="date" id="datemax" name="datemax"

<input type="date" id="datemin" name="datemin"

<label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field. The multiple attribute works with the following input types: email, and file.

A file upload field that accepts multiple values: <form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>

The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Learn more about regular expressions in our JavaScript tutorial.

An input field that can contain only three letters (no numbers or special characters): <form> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code"

</form>