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>
Try it Yourself »
The input readonly
attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
A read-only input field:
<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>
Try it Yourself »
The input disabled
attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
A disabled input field:
<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>
Try it Yourself »
The input size
attribute specifies the visible width, in characters, of an input field.
The default value for size
is 20.
Note: 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>
Try it Yourself »
The input maxlength
attribute specifies the maximum number of characters allowed in an input field.
Note: 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>
Try it Yourself »
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.
Tip: 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 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Try it Yourself »
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>
Try it Yourself »
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.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: 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"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Try it Yourself »
The input placeholder
attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder
attribute works with the following input types: text, search, url, tel, email, and password.
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Try it Yourself »
The input required
attribute specifies that an input field must be filled out before submitting the form.
The required
attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
Try it Yourself »
The input step
attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to create a range of legal values.
The step
attribute works with the following input types: number, range, date, datetime-local, month, time and week.
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
Try it Yourself »
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!
The input autofocus
attribute specifies that an input field should automatically get focus when the page loads.
Let the "First name" input field automatically get focus when the page loads:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Try it Yourself »
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).
Define an image as the submit button, with height and width attributes:
<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>
Try it Yourself »
The input list
attribute refers to a <datalist>
element that contains pre-defined options for an <input> element.
An <input> element with pre-defined values in a <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself »
The input autocomplete
attribute specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete
attribute works with <form>
and the following <input>
types: text, search, url, tel, email, password, datepickers, range, and color.
An HTML form with autocomplete on, and off for one input field:
<form action="/action_page.html" autocomplete="on">
<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>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
For a complete list of all available HTML tags, visit our HTML Tag Reference.