CSS 폼 생성기

기본 폼

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

흔한 네 가지 스타일

플로팅 레이블이 가장 예쁘지만 빈 상태 감지를 위해 추가 마크업이나 JavaScript가 필요합니다. 외곽선이 가장 범용적입니다.

접근성 체크리스트

• 모든 입력에 보이는 레이블. placeholder를 유일한 레이블로 쓰지 마세요, focus 시 사라지고 대비에 실패합니다.
• <label for> 또는 감싸는 <label>. 둘 다 유효하며, 감싸는 쪽이 약간 더 쉽습니다.
• 포커스 표시. 대체 없이 outline: none을 절대 쓰지 마세요. 키보드 사용자에게 필요합니다.
• 오류 메시지: 입력에 aria-describedby로 연결하세요. 오류를 색으로만 표시하지 마세요, 텍스트 메시지나 아이콘을 포함하세요.
• 필수 필드: required 속성을 쓰세요. 시각 사용자를 위해 레이블에 시각 표시(별표)를 추가하세요.
• 입력 타입: type="email", type="tel", type="url", type="number"를 쓰세요. 모바일 키보드가 적응합니다.
• autocomplete 속성: autocomplete="email", autocomplete="current-password" 등. 사용자의 입력을 많이 줄여줍니다.

네이티브 검증 상태

CSS에는 폼 유효성을 위한 의사 클래스가 있습니다:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (min/max가 있는 숫자 입력용)
• :placeholder-shown (비어 있음, placeholder 보임)
• :user-invalid (유효하지 않고 그리고 사용자가 상호작용함, 오류 스타일에 맞는 것)

:user-invalid 의사 클래스는 사용자가 무언가 한 뒤에만 오류를 보여주는 가장 깔끔한 방법으로, 상호작용 전 빨간 테두리를 피합니다. 2023년 무렵 모든 주요 브라우저에 지원이 들어왔습니다.

비활성화 상태

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

비활성화된 입력은 포커스도 제출도 되지 않습니다. 스크린 리더용으로 포커스 가능하게 하려면 readonly를 쓰세요, 폼이 값을 제출하지만 사용자는 편집할 수 없습니다.