Forms & User Input

Where Do You See Forms?

Open any site you use daily: Google, Amazon, babson.com.

Find a page with input boxes (fields) to fill in. What do you see?

Then open DevTools and inspect the form. What HTML elements are inside?

Why Forms Matter

Forms let users send data to a website:

• Sign up / Login
• Search bars
• Contact forms
• Settings & checkout

Form Basics

The <form> Element

<form action="/submit" method="POST">
  <!-- form fields go here -->
  <button type="submit">Submit</button>
</form>

• action - where to send the data (a URL or server endpoint)
• method:
  • GET - data in the URL, use for search/filtering (results are bookmarkable)
  • POST - data in the request body, use for login, checkout, or sensitive data

MDN: Sending form data

Text Input

<label for="full-name">Name:</label>
<input type="text" id="full-name" name="name" placeholder="Enter your name">

Always use labels! They:

• Improve accessibility
• Make clicking the label focus the input
• Are required for screen readers

for matches id, not name. The name attribute is the key sent to the server.

Input Types

More Input Types

<input type="email" placeholder="email@example.com">
<input type="password" placeholder="Password">
<input type="number" min="0" max="100">
<input type="date">
<input type="color">
<input type="range" min="0" max="100">

Textarea

For multi-line text:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"
  placeholder="Enter your message"></textarea>

Select Dropdown

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">Choose...</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Checkboxes

<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>

<!-- Multiple checkboxes -->
<input type="checkbox" id="html" name="skills" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>

Radio Buttons

<p>Preferred contact:</p>

<input type="radio" id="email" name="contact" value="email">
<label for="email">Email</label>

<input type="radio" id="phone" name="contact" value="phone">
<label for="phone">Phone</label>

<input type="radio" id="text" name="contact" value="text">
<label for="text">Text</label>

Same name = only one can be selected

Buttons

<!-- Submit form -->
<button type="submit">Submit</button>

<!-- Reset form -->
<button type="reset">Clear</button>

<!-- Regular button (use with JavaScript) -->
<button type="button">Click Me</button>

<!-- Input as button -->
<input type="submit" value="Send">

Form Validation

HTML5 Validation Attributes

<!-- Required field -->
<input type="text" required>

<!-- Minimum/Maximum length -->
<input type="text" minlength="3" maxlength="50">

<!-- Number range -->
<input type="number" min="1" max="100">

<!-- Pattern (regex) -->
<input type="text" pattern="[A-Za-z]{3}">

<!-- Email validation (built-in) -->
<input type="email" required>

Validation Example

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required
    placeholder="your@email.com">

  <label for="password">Password:</label>
  <input type="password" id="password" required
    minlength="8"
    placeholder="At least 8 characters">

  <button type="submit">Sign Up</button>
</form>

Custom Validation Messages

The browser handles basic validation automatically:

<input type="email" required placeholder="your@email.com">

Need custom messages or complex rules? We'll do that with addEventListener when we cover JavaScript. Keep HTML and JavaScript separate.

Form Accessibility

Accessibility Best Practices

1. Always use <label> with for attribute
2. Group related fields with <fieldset>
3. Provide clear error messages
4. Make focus states visible
5. Use appropriate input types

Fieldset and Legend

<fieldset>
  <legend>Shipping Address</legend>

  <label for="street">Street:</label>
  <input type="text" id="street" name="street">

  <label for="city">City:</label>
  <input type="text" id="city" name="city">
</fieldset>

ARIA Attributes

Native HTML handles most accessibility. ARIA fills the gaps:

<!-- No visible label? Use aria-label -->
<input type="text" aria-label="Search">

<!-- Link input to its error message -->
<input type="email" id="email" aria-describedby="email-error">
<span id="email-error">Please enter a valid email</span>

<!-- Mark invalid on validation failure (set via JavaScript) -->
<input type="email" aria-invalid="true">

Use proper <label> elements and you're covered most of the time. ARIA is a deep topic - we're just scratching the surface.

Styling Forms

Basic Form Styling

input, textarea, select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

input:focus, textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

Styling Buttons

button {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

Complete Form Example

<form class="contact-form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" required>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" required>
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" rows="4" required></textarea>
  </div>

  <button type="submit">Send Message</button>
</form>

Your Turn: Build a Contact Page

Add a contact form to your personal website:

• Fields: name, email, message - use appropriate type attributes
• Add required validation on each field
• Style with CSS: spacing, focus state, hover on the submit button
• Test: does clicking a label focus the right input?

Try with Copilot: "Add a styled contact form to this HTML page."
Then explain every attribute and element it generated.

References

• MDN: Web Forms
• MDN: Sending Form Data
• MDN: Form Validation
• WebAIM: Forms