Module 12: Forms & Inputs — Design & Code Foundations

01

Input Types

HTML5 provides many input types. Using the right type improves usability, triggers appropriate keyboards on mobile, and enables browser validation.

type="text"

General text input

type="email"

[email protected] - validates format

type="url"

https://example.com - validates URL

Text Input Types

Email and URL types provide free validation and show appropriate keyboards on mobile. Always use the most specific type available.

Key point: Right input type = free validation + better mobile UX

type="number"

42▲▼

type="tel"

+1 (555) 123-4567

type="range"

Numeric Input Types

Number shows numeric keyboard and spinner controls. Tel shows phone keypad. Range for sliders. Use inputmode for more control over keyboard.

Key point: Use tel for phone numbers - number type doesn't allow formatting

type="date"

2024-01-15📅

type="time"

14:30🕐

type="datetime-local"

2024-01-15T14:30

Date & Time Inputs

Native date/time pickers vary by browser but work everywhere. They handle localization automatically. Consider custom pickers for consistent styling.

Key point: Native pickers are accessible but look different across browsers

type="checkbox"

✓

Agree to terms

type="radio"

Option A

Option B

Choose option...▼

Selection Inputs

Checkbox for multiple selections, radio for single selection from a group, select for dropdowns. Each has specific accessibility requirements.

Key point: Radio buttons need same 'name' attribute to work as a group

02

Labels & Instructions

Every input needs a label. Instructions should be clear and positioned where users expect them.

BAD: No label

Enter email...

GOOD: Visible label

Email address

Proper Labeling

Placeholder text is not a label. It disappears when typing and isn't accessible. Always use a visible element.

Key point: Placeholders disappear - labels don't

// Method 1: for/id
<label for="email">Email</label>
<input id="email" type="email">
// Method 2: Wrapping
<label>
  Email
  <input type="email">
</label>

Label Association

Labels must be associated with inputs via for/id or by wrapping. This enables clicking the label to focus the input and announces the label to screen readers.

Key point: Associated labels increase click target and accessibility

TOP (Recommended)

Email

LEFT (Dense forms)

Email

Label Positioning

Top-aligned labels are easiest to scan and work best on mobile. Left-aligned can work for dense data-entry forms. Never use right-aligned labels.

Key point: Top labels: best for scanning. Left labels: compact but harder to scan.

Password

Must be at least 8 characters with one number

Instructions & Help

Help text belongs below the input. Keep it brief. Use aria-describedby to associate with the input for screen readers.

Key point: Help text: below input, brief, associated via aria-describedby

03

Validation & Errors

Good validation helps users succeed. Show errors clearly, explain how to fix them, and validate at the right time.

On every keystroke

Too aggressive - frustrating while typing

On submit only

Too late - many errors at once

On blur (after leaving field)

Just right - validates completed input

When to Validate

Validate on blur (when user leaves the field). This respects the user's flow while providing timely feedback. Re-validate on submit.

Key point: Blur validation: immediate enough to help, not so aggressive it annoys

BAD

Invalid input

Error

Field required

GOOD

Enter a valid email ([email protected])

Password needs at least 8 characters

Please enter your name

Writing Error Messages

Good error messages: explain what's wrong, tell how to fix it, are specific not generic, use plain language, don't blame the user.

Key point: Tell users HOW to fix it, not just that it's wrong

Email address

not-an-email

⚠️ Enter a valid email address

Error Visual Design

Error states need: red border (not just color change), icon for recognition, message below input, associated via aria-describedby.

Key point: Don't rely on color alone - use icons and text too

Email address

[email protected]✓

Success States

Success states confirm valid input. Use green checkmark. Helpful for fields with specific format requirements. Don't overuse - not every field needs it.

Key point: Success states most useful for email, password, username validation

04

Form Layout

How you arrange form elements affects usability. Group related fields, show progress, and reduce cognitive load.

Shipping Address

Street

City

ZIP

Grouping Related Fields

Use

and to group related fields. This creates visual grouping and helps screen readers understand the form structure.

Key point: fieldset/legend is semantic grouping - use it

SINGLE COLUMN

Clear path, fewer errors

MULTI-COLUMN

Zigzag eye movement

Single vs Multi-Column

Single column forms have better completion rates. Multi-column creates zigzag scanning pattern. Exception: short related fields like city/state/zip.

Key point: Single column = 40% faster completion in studies

✓

Account

2

Shipping

3

Payment

Multi-Step Forms

Long forms should be broken into steps. Show progress clearly. Allow going back. Save progress automatically. Don't make users repeat information.

Key point: Show where users are and how many steps remain

LEFT-ALIGNED (Best)

RIGHT-ALIGNED (Inconsistent)

Button Placement

Primary button left-aligned below last input follows natural flow. Primary action should be most prominent. Destructive actions need confirmation.

Key point: Primary button: left, prominent. Secondary: right, less prominent.

05

Form Accessibility

Forms are one of the most common accessibility barriers. Proper implementation ensures everyone can complete your forms.

Tab→ Next field

Shift+Tab→ Previous field

Enter→ Submit form

Space→ Toggle checkbox

Keyboard Navigation

Forms must work with keyboard only. Tab order should follow visual order. Never use tabindex > 0. Focus indicators must be visible.

Key point: Test your form using only keyboard - no mouse

JAWS reads:
"Email address, edit text, required"
"Must be a valid email format"
Requirements:
✓ Label associated
✓ Required indicated
✓ Help text described

Screen Reader Support

Screen readers announce: label, input type, required state, current value, and any help/error text. All this requires proper HTML structure.

Key point: Test with NVDA (free) or VoiceOver (macOS/iOS)

<input
  type="email"
  aria-required="true"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" role="alert">
  Enter a valid email
</span>

ARIA Attributes

aria-required marks required fields. aria-invalid indicates error state. aria-describedby links to help/error text. role='alert' announces errors.

Key point: ARIA enhances native HTML - doesn't replace it

Default focus

Focused field (visible ring)

Error + focus

Focus Management

Focus indicators must be visible. Never use outline: none without a replacement. After submit errors, focus the first error field.

Key point: Focus visibility is WCAG Level AA requirement

09

Paper Forms vs Web Forms

Web forms have capabilities paper forms never had - and constraints paper forms never faced.

Validation

Print

✗ ✗ ✗

User sees errors later

Errors found after submission, requires resubmission

Web

✓ Real-time

Instant feedback

Validate as user types, prevent errors before submit

Adaptation

Print

Fixed fields

Same form for everyone

Can't hide irrelevant fields or show conditional sections

Web

Dynamic

Show/hide based on answers

Conditional fields, progressive disclosure

Input Method

Print

✎

Handwriting only

Prone to legibility issues, scanning errors

Web

⌨️ 📱 🎤

Multiple input methods

Keyboard, touch, voice, autocomplete

10

The Psychology of Forms

Understanding cognitive load and user behavior helps design forms that feel effortless.

HIGH LOAD

LOW LOAD

Reducing Cognitive Load

Every field adds cognitive load. Remove optional fields, use smart defaults, and break long forms into steps. Fewer fields = higher completion.

Key point: Each field removed can increase conversions 10%+

75% complete - users speed up as they approach the goal

Goal Gradient Effect

Users accelerate as they get closer to completion. Show progress. Put easy fields first to build momentum. Save hardest questions for when commitment is high.

Key point: Progress bars increase completion rates

Country

United States▼

Pre-selected based on IP location

Smart Defaults

Default to the most common answer. Use geolocation for country/timezone. Remember previous entries. Reduce decisions users need to make.

Key point: Smart defaults reduce friction significantly

🔒 Your data is encrypted

📧 We won't spam you

⏱️ Takes about 2 minutes

Reducing Form Anxiety

Users worry about spam, security, and time commitment. Address concerns proactively. Show security badges. Explain why you need sensitive info.

Key point: Trust indicators reduce abandonment

11

Real-World Forms

How successful products design their forms for maximum completion.

Card information

1234 5678 9012 3456

Principles Identified:

Minimal Fields Only asks for what's absolutely necessary

Smart Formatting Auto-formats card number, adds spaces

Instant Validation Shows card type icon, validates as you type

Key insight: Stripe Checkout has one of the highest completion rates because it removes all unnecessary friction.

What's your name?

Type your answer...

Principles Identified:

One Question Shows one question at a time

Conversational Feels like a conversation, not a form

Full Focus No distractions, full-screen experience

Key insight: Typeform proves that perceived simplicity matters as much as actual simplicity.

Create your Google Account

First name

Last name

Principles Identified:

Multi-Step Breaks registration into digestible steps

Clear Progress Shows which step you're on

Inline Validation Checks username availability in real-time

Key insight: Google breaks a complex registration into simple steps, never overwhelming users.

12

Form Failures

Common mistakes that frustrate users and kill conversion rates.

Failure: Placeholder Labels

Email address

Fix: Use visible labels above inputs

Email address

Rule: Placeholders disappear when typing. Users forget what field they're filling. Always use visible labels.

Failure: Generic Errors

Invalid input. Please try again.

Fix: Be specific about what's wrong

Email must include @ and domain (e.g., [email protected])

Rule: Tell users exactly what's wrong and how to fix it. Generic errors waste time and frustrate users.

Failure: Clear on Error

Email cleared after error

Fix: Preserve user input on validation failure

user@examplecom ← cursor here to fix

Rule: Never clear form fields on error. Users lose their work and have to re-enter everything.

Failure: No Focus Management

3 errors found

User has to find them manually

Fix: Focus first error field after submit

Focus moves to first error

Rule: After validation fails, focus the first error field. Screen reader users need this to find errors.

13

Form Tests

Quick checks to ensure your forms are usable and accessible.

01

Keyboard Test

Tests: Accessibility

Complete the entire form using only keyboard. Tab through all fields. Can you reach everything? Is tab order logical?

Tab → Tab → Enter

No mouse allowed

02

Error Test

Tests: Validation

Submit empty form. Submit with invalid data in each field. Are errors clear? Does focus move to errors? Is data preserved?

Submit → Check errors

Fix one → Check again

03

Mobile Test

Tests: Responsive

Fill out form on real phone. Does correct keyboard appear? Are touch targets big enough? Can you see what you're typing?

📱

Test on real device

04

Screen Reader Test

Tests: Accessibility

Navigate form with VoiceOver or NVDA. Are labels announced? Are errors read? Is required state clear?

"Email address, edit text, required"

What screen reader should announce

14

Form Implementation

CSS and HTML patterns for building accessible, usable forms.


  
    Contact Information
    
    
      Email *
      
      
        We'll never share your email

Form Structure via CSS

novalidate - Disable browser validation, use custom
fieldset/legend - Semantic grouping for screen readers
for/id - Associate label with input
aria-describedby - Link help text to input

Tip: novalidate lets you control validation UX while keeping HTML5 attributes.

.form-field input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-field input:focus {
  outline: none;
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.2);
}

.form-field input[aria-invalid="true"] {
  border-color: #cc0000;
}

.form-field input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

Input Styling via CSS

width: 100% - Full width on mobile
padding: 0.75rem - Comfortable touch target
:focus styles - Clear focus indicator
[aria-invalid] - Style based on validation state

Tip: Never use outline: none without providing an alternative focus style.

.error-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #cc0000;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.error-message::before {
  content: '⚠️';
}

/* Hide but keep accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Error Messages via CSS

Color + icon - Don't rely on color alone
::before pseudo - Add icon without extra HTML
.sr-only - Hide visually but keep for screen readers
flex alignment - Icon and text aligned

Tip: Use role='alert' on error messages to announce them to screen readers.

.btn-primary {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #333;
}

.btn-primary:focus {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

.btn-primary:disabled {
  background: #999;
  cursor: not-allowed;
}

Button Styles via CSS

padding - 44px minimum height for touch
font-weight: 600 - Clear primary action
outline-offset - Focus ring doesn't touch button
:disabled - Clear disabled state

Tip: Primary button should have highest visual weight. Secondary buttons should be less prominent.

15

Self-Assessment

Test your understanding of form design principles.

Q1

Why shouldn't you use placeholder text as a label?

Click to reveal

Q2

When is the best time to validate form fields?

Click to reveal

Q3

Why use single-column form layouts?

Click to reveal

Q4

What makes a good error message?

Click to reveal

Q5

What should happen to focus after form validation fails?

Click to reveal

Forms & Inputs

Core Concepts

Input Types

Labels & Instructions

Validation & Errors

Form Layout

Form Accessibility

Print vs Web

Paper Forms vs Web Forms

Science & Psychology

The Psychology of Forms

Real-World Examples

Real-World Forms

Common Failures

Form Failures

Visual Tests

Form Tests

Keyboard Test

Error Test

Mobile Test

Screen Reader Test

CSS Implementation

Form Implementation

Self-Assessment

Self-Assessment

Key Takeaways