30. Input Validation Attributes (required, readonly, disabled)

Explanation

The main attributes that control an input field:

• required: The form will not submit without it.
• placeholder: Light hint text shown inside the box.
• readonly: The user can only read it and cannot change it (but the data will go to the server).
• disabled: The box becomes completely inactive (grey) (the data does not go to the server).
• min and max: The minimum and maximum limits for a number or date.

Golden rules

• Remember the difference between readonly and disabled: the data of readonly is submitted, that of disabled is not.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <form style="max-width: 260px;">
    <label style="font-size: 12px; font-weight: bold;">Name (required *):</label>
    <input type="text" placeholder="Enter name..." required 
           style="width: 100%; padding: 6px; margin: 3px 0 8px 0; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">

    <label style="font-size: 12px; font-weight: bold;">Roll number (Readonly):</label>
    <input type="text" value="10582" readonly 
           style="width: 100%; padding: 6px; margin: 3px 0 10px 0; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">

    <button type="submit" style="background: #0284c7; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">Submit</button>
  </form>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which attribute makes an input box inactive (grey) on screen so that its data is not submitted?

1. readonly
2. disabled
3. hidden
4. locked