HTML Input Attributes Tutorial for Beginners – Simple Explanation

HTML input elements can have many attributes that control how they behave. These attributes can set default values, restrict input, add validation, and improve user experience.

The value Attribute

The value attribute sets an initial (default) value for an input field. This value appears when the page loads and can be changed by the user.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="valueFname">First name:</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" id="valueFname" name="fname" value="John">

<p style="margin-top: 10px; font-size: 14px; color: #666;">The fields are pre-filled with “John” and “Doe”.</p>
</div>

</body>
</html>

The readonly Attribute

The readonly attribute makes an input field read-only. Users can see and copy the value, but cannot change it. The value is still submitted with the form.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="readonlyFname">First name (read-only):</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; background-color: #f0f0f0; box-sizing: border-box;" type="text" id="readonlyFname" name="fname" value="John" readonly>

<p style="margin-top: 10px; font-size: 14px; color: #666;">The first name field is read-only. You cannot change it.</p>
</div>

</body>
</html>

The disabled Attribute

The disabled attribute makes an input field disabled. Users cannot click on it or change it. The value is NOT submitted with the form.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="disabledFname">First name (disabled):</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; background-color: #f0f0f0; box-sizing: border-box;" type="text" id="disabledFname" name="fname" value="John" disabled>

<p style="margin-top: 10px; font-size: 14px; color: #666;">The first name field is disabled. You cannot click on it or change it. Its value will NOT be sent to the server.</p>
</div>

</body>
</html>

Note: readonly vs disabled: The value of a readonly field is submitted. The value of a disabled field is NOT submitted.

The size Attribute

The size attribute specifies the visible width of an input field in characters. It works with text, search, tel, url, email, and password fields.

<!DOCTYPE html>
<html>
<body>

</body>
</html>

The maxlength Attribute

The maxlength attribute limits the maximum number of characters a user can enter. The field will not accept more than the specified number.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="maxFname">First name:</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" id="maxFname" name="fname" size="50">

<label style="display: block; font-weight: bold; margin-bottom: 5px;" for="maxPin">PIN (max 4 characters):</label>
    <input style="width: 100%; max-width: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" id="maxPin" name="pin" maxlength="4" size="4">

<p style="margin-top: 10px; font-size: 14px; color: #666;">Try typing more than 4 characters in the PIN field. It will stop accepting after 4.</p>
</div>

</body>
</html>

The min and max Attributes

The min and max attributes set the minimum and maximum values for number, range, date, and time inputs.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 8px;" for="minMaxDate">Enter a date before 1980-01-01:</label>
    <input style="width: 100%; max-width: 200px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="date" id="minMaxDate" name="datemax" max="1979-12-31">

<label style="display: block; font-weight: bold; margin-bottom: 8px;" for="minMaxDate2">Enter a date after 2000-01-01:</label>
    <input style="width: 100%; max-width: 200px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="date" id="minMaxDate2" name="datemin" min="2000-01-02">

<label style="display: block; font-weight: bold; margin-bottom: 8px;" for="minMaxQty">Quantity (between 1 and 5):</label>
    <input style="width: 100%; max-width: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="number" id="minMaxQty" name="quantity" min="1" max="5" value="1">

</body>
</html>

The placeholder Attribute

The placeholder attribute shows a hint inside the input field that disappears when the user starts typing.

The required Attribute

The required attribute makes an input field mandatory. The form cannot be submitted until the field is filled out.

The pattern Attribute

The pattern attribute uses a regular expression to validate the input. The form will not submit if the input does not match the pattern.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="patternCode">Country code (3 letters only):</label>
    <input style="width: 100%; max-width: 200px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" id="patternCode" name="country_code" pattern="[A-Za-z]{3}" title="Please enter exactly 3 letters (e.g., USA, CAN, GBR)" placeholder="USA">

<p style="margin-top: 10px; font-size: 14px; color: #666;">Try entering numbers or less than 3 letters. The pattern requires exactly 3 letters.</p>
</div>

</body>
</html>

The step Attribute

The step attribute specifies the legal number intervals. For example, step=”3″ means the value must be multiples of 3.

The autofocus Attribute

The autofocus attribute automatically puts the cursor in the specified field when the page loads.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="autofocusFname">First name (autofocus):</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" id="autofocusFname" name="fname" autofocus>

<p style="margin-top: 10px; font-size: 14px; color: #666;">The cursor is automatically in the first name field when the page loads.</p>
</div>

</body>
</html>

The multiple Attribute

The multiple attribute allows users to select multiple files when uploading or enter multiple email addresses.

The list and datalist Attributes

The list attribute connects an input field to a <datalist> element, providing auto-complete suggestions as the user types.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 8px;" for="datalistBrowser">Choose your browser:</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" list="browsersList" id="datalistBrowser" name="browser" placeholder="Start typing...">
    <datalist id="browsersList">
      <option value="Google Chrome">
      <option value="Mozilla Firefox">
      <option value="Safari">
      <option value="Microsoft Edge">
      <option value="Opera">
      <option value="Brave">
    </datalist>
    <input style="background-color: #2196f3; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;" type="submit" value="Submit">
  </form>

<p style="margin-top: 10px; font-size: 14px; color: #666;">Start typing. Suggestions will appear. You can select one or type your own.</p>
</div>

</body>
</html>

The autocomplete Attribute

The autocomplete attribute lets the browser predict and suggest previously entered values.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post" autocomplete="on">
    <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="autoFname">First name:</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="text" id="autoFname" name="fname">

<label style="display: block; font-weight: bold; margin-bottom: 5px;" for="autoEmail">Email (autocomplete off):</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; box-sizing: border-box;" type="email" id="autoEmail" name="email" autocomplete="off">

<p style="margin-top: 10px; font-size: 14px; color: #666;">The form has autocomplete on, but the email field has it turned off.</p>
</div>

</body>
</html>

Quick Summary

value – Sets an initial/default value for the field
readonly – Field cannot be changed but value is submitted
disabled – Field is inactive and value is NOT submitted
size – Visible width in characters
maxlength – Maximum number of characters allowed
min and max – Minimum and maximum values for numbers/dates
placeholder – Hint text inside the field
required – Field must be filled out before submitting
pattern – Regular expression that the input must match
step – Legal number intervals (e.g., step=”3″)
autofocus – Automatically focus on this field when page loads
multiple – Allow multiple file selections or multiple emails
list – Connects to a datalist for suggestions
autocomplete – Browser prediction on/off

What Just Happened? Let Me Explain

readonly vs disabled: Readonly fields are like printed text. You can see it but not change it. Disabled fields are like grayed out options. The big difference is that readonly values get sent to the server, disabled values do not.
size vs maxlength: Size controls how wide the field looks. Maxlength controls how many characters the user can actually type.
placeholder vs value: Placeholder is hint text that disappears when typing. Value is actual data that stays until changed.
pattern: Regular expressions can seem complicated, but they are very powerful. [A-Za-z]{3} means “exactly three letters, uppercase or lowercase”.
autofocus: Use this carefully. Only one field per page should have autofocus. Having multiple can confuse users.

Tip: Always validate data on the server too. These attributes make the user experience better, but they can be bypassed. Never trust client-side validation alone.

HTML Input Attributes Reference

Attribute	Description
`value`	Specifies an initial value for an input field
`readonly`	Makes the input field read-only (value is submitted)
`disabled`	Disables the input field (value is NOT submitted)
`size`	Specifies the width of an input field (in characters)
`maxlength`	Sets the maximum number of characters allowed
`min` and `max`	Sets the minimum and maximum values for numbers/dates
`placeholder`	Shows a hint text inside the input field
`required`	Makes the field mandatory before form submission
`pattern`	Specifies a regular expression that the input must match
`step`	Specifies the legal number intervals
`autofocus`	Automatically focuses on the field when the page loads
`multiple`	Allows multiple file selections or multiple emails
`list`	Connects to a datalist for auto-complete suggestions
`autocomplete`	Specifies whether the browser should predict input