Pattern
Copy-ready form examples with five practical snippets, clear explanations, common mistakes and related HTML examples.
This page focuses on small examples that are easy to paste into a test file, understand, and adjust.
5 practical examples
Basic contact form
Use labels, inputs and a submit button.
<form action="/contact" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Send</button>
</form>Use this as a starting point, then rename classes, variables and labels to match your project.
Newsletter signup form
Keep the form short when you only need an email address.
<form class="signup">
<label for="signup-email">Email address</label>
<input id="signup-email" type="email" placeholder="you@example.com">
<button>Subscribe</button>
</form>Use this as a starting point, then rename classes, variables and labels to match your project.
Search form
Use search input type for site search boxes.
<form role="search">
<label for="site-search">Search examples</label>
<input id="site-search" name="q" type="search">
<button type="submit">Search</button>
</form>Use this as a starting point, then rename classes, variables and labels to match your project.
Form with fieldset
Group related controls using fieldset and legend.
<fieldset>
<legend>Notification preference</legend>
<label><input type="radio" name="notify" value="email"> Email</label>
<label><input type="radio" name="notify" value="sms"> SMS</label>
</fieldset>Use this as a starting point, then rename classes, variables and labels to match your project.
Form with helper text
Use small helper text for instructions.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="password-help">
<p id="password-help">Use at least 12 characters.</p>Use this as a starting point, then rename classes, variables and labels to match your project.
Common mistakes to avoid
- Copying a snippet without changing class names, selectors, or labels for your page.
- Testing only on a desktop screen and missing mobile behavior.
- Forgetting accessibility details such as labels, focus states, and meaningful text.
FAQ
Can I copy these examples?
Yes. They are written as practical starting points you can copy, study and adapt.
Are these examples beginner-friendly?
Yes. Each page keeps the examples small and explains when the pattern is useful.