This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
This chapter describes the different attributes for the HTML element.
The input 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>
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>
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>
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>
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>
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>
A file upload field that accepts multiple values:
<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>
Tip: Use the global title attribute to describe the pattern to help the user.
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>
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>
A required input field:
<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>
The input 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>
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 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>
The input and attributes specify the height and width of an 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>
The input attribute refers to a 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="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
An HTML form with autocomplete on, and off for one input field:
<form action="/action_page.php" 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>
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 the HTML Tag Reference.