HTML Input Attributes
HTML input elements can have various attributes that define their behavior, appearance, and interaction with users. Here are some common HTML input attributes that can be used with the <input> element:
The value Attribute
The input value attribute specifies an initial value for an input field:
Example
<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>You can click on above box to edit the code and run again.
Output
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
Example
<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>You can click on above box to edit the code and run again.
Output
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
Example
<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>You can click on above box to edit the code and run again.
Output
The size Attribute
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Example
<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>You can click on above box to edit the code and run again.
Output
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input field
Example
<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>You can click on above box to edit the code and run again.
Output
The min and max Attributes
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.
Example
<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>You can click on above box to edit the code and run again.
Output
The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.
Example
<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>You can click on above box to edit the code and run again.
Output
The pattern Attribute
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.
Example
<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>
You can click on above box to edit the code and run again.Output
The placeholder Attribute
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).
Example
<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>
You can click on above box to edit the code and run again.Output
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form.
Example
<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>You can click on above box to edit the code and run again.
Output
The step Attribute
The input step attribute specifies the legal number intervals for an input field.
Example
<form> <label for="points">Points: <input type="number" id="points" name="points" step="3"> </form>You can click on above box to edit the code and run again.
Output
The autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
Example
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus>You can click on above box to edit the code and run again.
<label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
Output
The height and width Attributes
The input height and width attributes specify the height and width of an <input type="image"> element.
Example
<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>You can click on above box to edit the code and run again.
Output
The list Attribute
The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
Example
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
You can click on above box to edit the code and run again.Output
The autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
Example
<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>You can click on above box to edit the code and run again.