Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
6 patterns
These examples provide interface structure only. Connect and validate submissions in your own trusted backend before production use.
Contact form
A labelled contact form with clear instructions and field context.
contactlabels
Accessibility
Every control has a persistent label and appropriate autocomplete value.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Sign-in form
A compact authentication UI pattern with password recovery link.
sign-inauthentication
Accessibility
Password and email fields expose the correct autocomplete purpose.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Email signup form
An explicit email subscription pattern without preselected consent.
emailinline
Accessibility
The subscription commitment is explained before submission.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Profile settings form
Grouped profile fields with an explicit save action.
settingsprofile
Accessibility
Related preferences are grouped with fieldset and legend.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Search form
A compact landmark search with a persistent label and submit action.
searchlandmark
Accessibility
The search landmark and visible label communicate the form purpose.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Feedback form
A concise feedback pattern with grouped rating choices and comments.
feedbackradio
Accessibility
Radio choices are grouped with a legend and the textarea references its safety hint.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.