FORMS &
INPUTS
Forms are the bridge between user intent and server data. They require a delicate balance of usability, accessibility, and strict data validation to function correctly.
The Golden Rule
Every input must have a label. Placeholders are not labels; they disappear when the user types. Labels provide context, click targets, and critical info for screen readers.
<!-- Explicit Link -->
<label for="email">Email</label>
<input id="email" type="email" />
<label for="email">Email</label>
<input id="email" type="email" />
Semantic Types
type="email"
Triggers @ keyboard on mobile.
type="tel"
Triggers number pad.
type="date"
Native OS date picker.
type="password"
Masks characters securely.
Click Targets
wrapping an input inside a <label> makes the text clickable too, increasing the hit area by 300%.
Validation Studio
Min Length
minlength="8"
Uppercase
pattern="(?=.*[A-Z]).*"
Number
pattern="(?=.*\d).*"
Special Char
pattern="(?=.*[!@#]).*"
<input
type="password"
required
minlength="8"
pattern="(?=.*\d)(?=.*[A-Z])..."
/>
type="password"
required
minlength="8"
pattern="(?=.*\d)(?=.*[A-Z])..."
/>
Focus Management
Tab
Moves focus to next interactive elementSpace
Toggles checkboxes / Activates buttonsEnter
Submits the form (implicitly)