HTML Input Attributes

HTML Input Attributes

Input attributes control how an <input> behaves, what values it accepts, and how it appears to users.

The value Attribute

The value attribute sets an initial (default) value for an input field.

 <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> 

The readonly Attribute

The readonly attribute makes an input read-only. The user cannot change the value, but can still focus, select, and copy it.

Read-only values are included when the form is submitted.

 <input type="text" name="fname" value="John" readonly> 

The disabled Attribute

The disabled attribute disables an input field. Disabled inputs cannot be used and are not sent when submitting the form.

 <input type="text" name="fname" value="John" disabled> 

The size Attribute

The size attribute sets the visible width of a text-based input, measured in characters. The default value is 20.

Works with: text, search, tel, url, email, password.

 <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 maxlength Attribute

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

It prevents extra characters, but does not automatically show an error message. Use JavaScript if you want custom feedback.

 <input type="text" id="pin" name="pin" maxlength="4" size="4"> 

The min and max Attributes

The min and max attributes set the allowed range of values.

Works with: number, range, date, datetime-local, month, time, week.

 <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> 

The multiple Attribute

The multiple attribute allows the user to enter/select multiple values.

Works with: email and file.

 <form>   <label for="files">Select files:</label>   <input type="file" id="files" name="files" multiple> </form> 

The pattern Attribute

The pattern attribute checks the input value against a regular expression when the form is submitted.

Use the title attribute to explain the expected format.

 <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> 

The placeholder Attribute

The placeholder attribute shows a hint inside the input before the user types.

 <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> 

The required Attribute

The required attribute forces the user to fill in the field before submitting the form.

 <form>   <label for="username">Username:</label>   <input type="text" id="username" name="username" required> </form> 

The step Attribute

The step attribute defines the legal intervals between values. For example, step="3" allows values like 0, 3, 6, 9.

Works with: number, range, date, datetime-local, month, time, week.

 <form>   <label for="points">Points:</label>   <input type="number" id="points" name="points" step="3"> </form> 

Client-side restrictions can be bypassed, so always validate input on the server as well.

The autofocus Attribute

The autofocus attribute automatically focuses an input 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 height and width Attributes

The height and width attributes set the size of an <input type="image"> element.

Setting both helps the browser reserve space and prevents layout shifts while the image loads.

 <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 list Attribute

The list attribute connects an <input> to a <datalist> that contains predefined suggestions.

 <form>   <input list="browsers">   <datalist id="browsers">     <option value="Edge">     <option value="Firefox">     <option value="Chrome">     <option value="Opera">     <option value="Safari">   </datalist> </form> 

The autocomplete Attribute

The autocomplete attribute controls whether the browser should suggest and fill values based on previous entries.

It can be used on <form> and on many input types (such as text, email, password, and date-related inputs).

 <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> 

HTML Form and Input Elements

• <form> – defines an HTML form for user input
• <input> – defines an input control