Lesson 5 of 55 · HTML
Basic Form Controls – Textual Inputs
Duration: 10 min
Text‑based input types
<label for='name'>Name:</label>
<input type='text' id='name' name='name' required minlength='2' autocomplete='name' placeholder='John Doe' />
<label for='email'>Email:</label>
<input type='email' id='email' name='email' required autocomplete='email' />
Input types
type='text'– Generic text.type='email'– Validates email format; brings up an email‑optimized keyboard on mobile.type='url',type='tel',type='search'– Specialized keyboards and validation.type='password'– Hides characters; browsers may offer password‑manager integration.
Validation attributes
required– Field must be filled before submission.pattern– Custom regular expression.minlength,maxlength– Character count limits.autocomplete– Hints for browsers to pre‑fill fields.placeholder– Short hint visible inside the field; never replace a real<label>.
Label association
- Always pair
<label>with the control usingfor/id. This expands the clickable target and improves screen‑reader navigation.
Quick checklist for text inputs
<label>correctly linked viafor/id? ✅typematches expected data (email, url, tel, etc.)? ✅requiredadded where needed? ✅autocompleteattribute present and appropriate? ✅placeholderused only as a hint, not a replacement for<label>? ✅
Tip: Match the
typeto the expected data (e.g.,