Problem Statement
What happens to a disabled input when the form is submitted?
Explanation
A disabled input's value is not sent to the server when the form is submitted. The disabled attribute completely removes the field from form submission. Disabled fields appear grayed out and users cannot focus, edit, or interact with them. They are effectively not part of the form. This is the key difference from readonly, which prevents editing but still submits the value. Disabled is useful for temporarily preventing access to fields based on conditions, like disabling a submit button until all required fields are filled, or disabling fields that do not apply based on other selections. When you disable a field, it is excluded from form data, validation is not applied, and the field cannot receive focus. Disabled works with all input types, buttons, select, and textarea elements.
Code Solution
SolutionRead Only
<!-- Disabled input (value NOT submitted) -->
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text"
id="name"
name="name"
value="John Doe">
<label for="inactive">Inactive Field:</label>
<input type="text"
id="inactive"
name="inactive_field"
value="This will NOT be submitted"
disabled>
<button type="submit">Submit</button>
</form>
<!-- Only "name" will be submitted, "inactive_field" is ignored -->
<!-- Conditional disabling -->
<form>
<label>
<input type="checkbox"
id="shipping"
name="same_address"
onchange="toggleShipping()">
Shipping same as billing
</label>
<input type="text"
id="ship-address"
name="shipping_address"
placeholder="Shipping Address"
disabled>
</form>
<!-- Disabled submit button -->
<form>
<input type="email"
name="email"
required>
<button type="submit" disabled id="submit-btn">
Submit (Fill all fields first)
</button>
</form>