Form Design Best Practices: A Complete Guide

<form class="form">
  <div class="form-group">
    <label for="email" class="form-label">Email Address</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      class="form-input" 
      placeholder="[email protected]"
      required
    >
  </div>
  
  <div class="form-group">
    <label for="password" class="form-label">Password</label>
    <input 
      type="password" 
      id="password" 
      name="password" 
      class="form-input"
      required
    >
  </div>
  
  <button type="submit" class="btn btn-primary">Sign In</button>
</form>

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

/* Required indicator */
.form-label .required {
  color: #dc2626;
  margin-left: 0.25rem;
}

<label for="email" class="form-label">
  Email Address <span class="required">*</span>
</label>

/* DON'T: Use placeholder as only label */
<input placeholder="[email protected]">

/* DO: Use both label and placeholder */
<label for="email">Email Address</label>
<input id="email" placeholder="[email protected]">

.form-helper {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.375rem;
}

.form-helper-example {
  font-style: italic;
}

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" id="username" class="form-input">
  <p class="form-helper">Must be 3-20 characters, lowercase letters only</p>
</div>

.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Disabled state */
.form-input:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Readonly */
.form-input[readonly] {
  background: #f9fafb;
}

/* Large input */
.form-input-lg {
  padding: 0.875rem 1rem;
  font-size: 1.125rem;
}

/* Small input */
.form-input-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
}

/* With icon */
.form-input-with-icon {
  padding-left: 2.5rem;
}

.form-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: #9ca3af;
}

.form-input.error {
  border-color: #dc2626;
}

.form-input.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #dc2626;
  margin-top: 0.375rem;
}

.form-error svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

<div class="form-group">
  <label for="email">Email Address</label>
  <input 
    type="email" 
    id="email" 
    class="form-input error"
    value="invalid-email"
    aria-invalid="true"
    aria-describedby="email-error"
  >
  <p class="form-error" id="email-error">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
    </svg>
    Please enter a valid email address
  </p>
</div>

.form-input.success {
  border-color: #10b981;
}

.form-input.success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-success {
  font-size: 0.8125rem;
  color: #059669;
  margin-top: 0.375rem;
}

<input type="text" class="form-input" name="name" autocomplete="name">

<input type="email" class="form-input" name="email" autocomplete="email">

<div class="form-group">
  <label for="password">Password</label>
  <div class="password-input-wrapper">
    <input type="password" class="form-input" id="password" autocomplete="current-password">
    <button type="button" class="password-toggle" aria-label="Show password">
      <!-- Icon -->
    </button>
  </div>
</div>

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

<select class="form-input form-select" name="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

.form-checkbox,
.form-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.form-checkbox input,
.form-radio input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
}

.form-checkbox-label,
.form-radio-label {
  font-size: 0.9375rem;
  color: #374151;
  user-select: none;
}

<label class="form-checkbox">
  <input type="checkbox" name="terms" required>
  <span class="form-checkbox-label">
    I agree to the <a href="/terms">Terms of Service</a>
  </span>
</label>

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

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

<label for="message" class="form-label">Message</label>
<textarea 
  id="message" 
  name="message" 
  class="form-input form-textarea"
  placeholder="Tell us more about your project..."
></textarea>

.form-single-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 400px;
  margin: 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-inline {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.form-inline .form-group {
  flex: 1;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .form-inline {
    flex-direction: column;
  }
  
  .form-inline .btn {
    width: 100%;
  }
}

.form-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.form-progress-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
}

.form-progress-step.active {
  color: #2563eb;
}

.form-progress-step.completed {
  color: #10b981;
}

.form-progress-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.form-progress-step.completed .form-progress-number {
  background: currentColor;
  border-color: currentColor;
  color: white;
}

<!-- Explicit association -->
<label for="email">
  Email Address <span class="required" aria-hidden="true">*</span>
</label>
<input id="email" aria-required="true">

function showError(input, message) {
  input.classList.add('error');
  input.setAttribute('aria-invalid', 'true');
  
  const errorId = input.id + '-error';
  const errorElement = document.getElementById(errorId);
  
  if (errorElement) {
    input.setAttribute('aria-describedby', errorId);
    errorElement.style.display = 'block';
  }
}

// Focus first error on form submission failure
form.addEventListener('submit', (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    const firstError = form.querySelector(':invalid');
    firstError.focus();
  }
});

<form class="form form-single-column" novalidate>
  <h2>Create Account</h2>
  
  <div class="form-group">
    <label for="name">Full Name <span class="required">*</span></label>
    <input type="text" id="name" name="name" class="form-input" required autocomplete="name">
  </div>
  
  <div class="form-group">
    <label for="email">Email Address <span class="required">*</span></label>
    <input type="email" id="email" name="email" class="form-input" required autocomplete="email">
    <p class="form-helper">We'll never share your email</p>
  </div>
  
  <div class="form-group">
    <label for="password">Password <span class="required">*</span></label>
    <input type="password" id="password" name="password" class="form-input" required minlength="8" autocomplete="new-password">
    <p class="form-helper">Minimum 8 characters</p>
  </div>
  
  <div class="form-group">
    <label class="form-checkbox">
      <input type="checkbox" name="terms" required>
      <span>I agree to the <a href="/terms">Terms</a> and <a href="/privacy">Privacy Policy</a></span>
    </label>
  </div>
  
  <button type="submit" class="btn btn-primary btn-lg">Create Account</button>
  
  <p class="form-footer">
    Already have an account? <a href="/login">Sign in</a>
  </p>
</form>