Forms

<!-- Form with no error handling — fails silently -->
<form>
  <input type="email" required name="email">
  <button type="submit">Subscribe</button>
</form>
<!-- After invalid submit: page unchanged, no message shown -->

<!-- Generic summary error -->
<div role="alert" id="form-errors">
  Please correct the following errors before continuing.
</div>

<!-- Per-field inline error -->
<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-error">
<span id="email-error" role="alert">Please enter a valid email address</span>

/* Instead of toggling display:none */
.error-message {
  display: block; /* Show on error */
}

/* Or use visibility */
.field-error {
  visibility: visible;
  height: auto;
}

// React example
{errors.email && <span role="alert">{errors.email.message}</span>}

<!-- Missing visual required indicator -->
<label for="phone">Phone</label>
<input type="tel" id="phone" required>

<!-- Correct: asterisk indicator -->
<label for="phone">Phone <span aria-hidden="true">*</span></label>
<input type="tel" id="phone" required aria-required="true">

<!-- Include legend explaining the indicator -->
<p>Fields marked with <span aria-hidden="true">*</span> are required.</p>

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Please enter a valid email address
</span>

<!-- Placeholder-only — label disappears on typing -->
<input type="email" placeholder="Email address">

<!-- Correct: visible label + placeholder for hint -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

<form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

<!-- Unlabeled select -->
<select name="country">
  <option>United States</option>
</select>

<!-- Correct: associated label -->
<label for="country">Country</label>
<select id="country" name="country">
  <option>United States</option>
</select>

<select aria-label="Select your country" name="country">

// Remove this
input.addEventListener('paste', (e) => e.preventDefault())

// Allow paste — it's the default behavior, no code needed

<!-- Missing type — defaults to text -->
<input name="email">
<input name="age">

<!-- Correct: explicit types -->
<input type="email" name="email">
<input type="number" name="age" min="0" max="150">

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="address" autocomplete="street-address">

<div class="password-field">
  <input type="password" id="password" name="password">
  <button type="button" aria-label="Show password" onclick="togglePassword()">
    Show
  </button>
</div>

function togglePassword() {
  const input = document.getElementById('password')
  input.type = input.type === 'password' ? 'text' : 'password'
}

<textarea id="bio" maxlength="280"></textarea>
<span id="bio-count" aria-live="polite">280 characters remaining</span>

document.getElementById('bio').addEventListener('input', function () {
  const remaining = 280 - this.value.length
  document.getElementById('bio-count').textContent = `${remaining} characters remaining`
})

Ambiguous: 01/02/2024
Clear:     Jan 2, 2024  |  2 January 2024  |  2024-01-02 (ISO 8601)

<label for="dob">Date of birth (DD/MM/YYYY)</label>
<input type="text" id="dob" placeholder="15/06/1990">

{comments.length === 0 ? (
  <p>No comments yet. Be the first to leave one!</p>
) : (
  <ul>{comments.map(c => <CommentItem key={c.id} {...c} />)}</ul>
)}