Forms & Interactive Elements

Forms & Interactive Elements

Forms are how users interact with applications — every signup, checkout, and settings page is a form.

Basic Form

<form action="/api/contact" method="POST">
  <div>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required placeholder="Jordan Morris">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="msg">Message</label>
    <textarea id="msg" name="msg" rows="4" required></textarea>
  </div>
  <button type="submit">Send</button>
</form>

The for= on label must match the id= on input — this is what screen readers use and makes clicking the label focus the input.

Input Types

<input type="email">                          <!-- validates @ syntax -->
<input type="tel">                            <!-- numeric keyboard on mobile -->
<input type="number" min="0" max="100">
<input type="date">                           <!-- native date picker -->
<input type="password">                       <!-- hides characters -->
<input type="file" accept=".pdf,.jpg,.png">
<input type="checkbox" id="terms">

Radio Buttons and Fieldset

<fieldset>
  <legend>Preferred Contact</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

HTML Validation

<input type="text" required minlength="2" maxlength="50">
<input type="number" min="18" max="120">
<input type="text" pattern="[A-Z]{3}-[0-9]{4}" title="Format: ABC-1234">