placeholder, required, min, max, pattern and more.
✍️ 3 exercises + code challenge in this lessonInput attributes add hints and built-in validation, with no JavaScript needed:
value: the initial value.placeholder: a hint shown when the field is empty.required: the field must be filled in.readonly / disabled: cannot be changed (disabled fields are not submitted).min, max, step: limits for numbers and dates.maxlength: maximum number of characters.pattern: a regular expression the value must match.autofocus: focus this field when the page loads.Mastering HTML Input Attributes helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<form onsubmit="alert('All fields are valid!'); return false;">
<input type="text" name="user" placeholder="Username (required)" required autofocus><br><br>
<input type="number" name="age" min="18" max="60" placeholder="Age 18–60"><br><br>
<input type="text" name="code" pattern="[A-Z]{3}" title="Three capital letters" placeholder="Code e.g. ABC"><br><br>
<input type="text" value="Read only" readonly>
<input type="text" value="Disabled" disabled><br><br>
<input type="submit">
</form>Check what you learned in “HTML Input Attributes”.
Make the field mandatory.
<input type="text" name="name" >
Which attribute shows a hint inside an empty field?
Add a number input named "age" with min 18 and max 60.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services