Once you have selected an input type, you need a way to fine-tune exactly how the browser treats the data entering that field. Input attributes act as the rules of engagement—they allow you to set default values, block users from typing, generate helpful hints, or enforce strict formatting guidelines.
The value attribute hardcodes text into the input field when the page first loads. When the user submits the form, this exact string is sent to the server. Users can delete it and type their own text, but it serves as a solid starting point.
Unlike value, a placeholder is a ghost logic. It displays light grey text inside the box to give the user a hint about what they should type (like "John Doe" or "(555) 123-4567"). As soon as the user starts typing, the placeholder vanishes completely. It is never submitted to the server.
<!-- Pre-filling data vs giving a hint -->
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" value="Alice">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" placeholder="e.g. Smith">Sometimes you need to show users information inside an input box, but you absolutely do not want them to change it. You have two options, and they behave very differently when the form is submitted.
If an input is marked readonly, the user can see the text, highlight it, and copy it to their clipboard, but they cannot delete or alter it. When the form is submitted, the value is successfully sent to the server.
If an input is marked disabled, the browser "grays out" the box entirely. The user cannot click it, copy from it, or interact with it in any way. Furthermore, when the form is submitted, the value of this field is completely ignored and will not be sent to the server.
<!-- The user ID is sent to the server, but cannot be changed -->
<label for="userid">User ID Number:</label>
<input type="text" id="userid" name="userid" value="99245" readonly>
<!-- This field is locked and will NOT be processed by the server -->
<label for="promo">Expired Promo Code:</label>
<input type="text" id="promo" name="promo" value="SUMMER2020" disabled>HTML5 introduced built-in ways to force users to adhere to your strict rules without writing complex JavaScript code.
Used specifically on text fields, these attributes physically prevent the user from typing more characters than the limit, or prevent the form from submitting if the user hasn't typed enough.
Used on numerical or date inputs. It establishes the mathematical boundaries. For example, ensuring someone doesn't try to select a date in the year 1800 for a hotel booking.
<!-- Forcing a strict 4-digit PIN limit -->
<label for="pin">Security PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4" minlength="4">
<!-- Restricting a calendar to dates after Jan 1st, 2024 -->
<label for="booking">Select Arrival:</label>
<input type="date" id="booking" name="booking" min="2024-01-01">readonly, disabled, required, and checked are called Boolean attributes. They do not need to equal a value (like disabled="true"). Their mere presence inside the HTML tag turns them on natively!