SOYOYU
폼

<input>

사용자 입력의 표준 단일 줄 컨트롤. type 속성이 의미를 결정.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●●○○중간

폼 시맨틱 일부. 모바일 SEO 신호에 type=email 등 작용.

GEO

●●●●○높음

AI 자동 폼 입력의 핵심. type+name+autocomplete가 신호 삼각형.

AEO

●●○○○낮음

답변 인용에 직접 영향 적음.

A11y

●●●●○높음

스크린리더의 발화 정확도가 type에 따라 결정. label과 함께 입력 안내.

올바른 사용

  • type을 데이터에 맞게 명시 (text, email, tel, number, ...)
  • label과 짝, autocomplete와 짝
  • inputmode로 모바일 키보드 조정
  • required, pattern, min/max로 native 검증
이메일 입력
<label for="email">이메일</label>
<input
  id="email"
  type="email"
  name="email"
  autocomplete="email"
  inputmode="email"
  required
/>

type+autocomplete+inputmode 삼위일체.

카드 번호 (식별 코드)
<input
  id="cc-number"
  type="text"
  autocomplete="cc-number"
  inputmode="numeric"
  pattern="[0-9 ]{13,19}"
  maxLength={19}
/>

type=text + inputmode=numeric (type=number 안 됨).

자주 보는 안티패턴

  • type=text 그대로 — 이메일·전화·검색 등 모두
  • autocomplete 누락
  • type=number를 카드 번호·전화번호에 (text + inputmode가 정답)
  • label 누락
모든 게 type=text
<input type="text" placeholder="이메일" />
<input type="text" placeholder="전화번호" />

모바일 키보드 비효율, autocomplete 무효, 시맨틱 손실.

type=number를 카드 번호에
<input type="number" maxLength={16} placeholder="카드 번호" />

maxLength 안 먹음, 휠 스크롤 값 변경, 하이픈 입력 불가.

해설

사용자 입력의 기본 단위. 한 줄 텍스트, 숫자, 이메일, 비밀번호, 체크박스, 라디오, 파일 — 거의 모든 단일 줄 입력이 input. 22가지 type이 각각 다른 의미와 동작.

SEO 관점에서 input 자체가 ranking factor는 아니다. 다만 모바일 친화 폼이 모바일 SEO 신호. type=email이면 @ 키 자동 노출, type=tel이면 숫자 키패드 — 이런 적절한 type이 모바일 사용성을 만든다.

GEO 관점에서 AI 자동 폼 입력의 핵심. 어느 칸이 이메일, 어느 칸이 카드 번호인지 — type + name + autocomplete의 삼각형이 결정. 세 신호가 모두 명시되면 거의 100% 정확. type=text만 박힌 폼은 OCR로 placeholder를 추측 → 정확도 떨어짐.

A11y 관점에서 스크린리더의 발화 정확도가 type에 따라 결정. type=email이면 "이메일 입력", type=tel이면 "전화번호 입력". 일관된 한국어 발화가 사용자에게 어떤 형식으로 입력해야 하는지 단서.

자주 보는 안티패턴: type=text 그대로(모바일 키보드 비효율, autocomplete 무효), type=number를 카드 번호·전화번호에(maxLength 안 먹음, 휠 스크롤로 값 변경, 하이픈 입력 불가 — 카드 번호는 text + inputmode=numeric이 정답 — 시리즈 #11), autocomplete 누락(AI 자동 입력 정확도 떨어짐), label 누락(시리즈 #2 — 폼 a11y의 critical 결함).

22가지 type 결정 — 시리즈 #11에서 다룬 결정 트리. 이메일 → email, 전화번호 → tel, URL → url, 숫자(계산용) → number, 식별 코드(카드·우편번호) → text + inputmode=numeric, 검색 → search, 비밀번호 → password.

required·pattern·min·max — native 검증 속성. JS 검증 라이브러리(react-hook-form, Zod)와 함께 쓸 때는 noValidate로 native 끄고 라이브러리 검증에 일원화. 다만 native 속성 자체는 autofill·접근성에 영향이 있어 그대로 두는 경우도 흔하다.

name 속성 — 폼 제출 시 키. 서버가 email=...&password=... 같은 query string의 키로 받음. React에서 controlled form일 때는 onChange handler로 처리하지만 — name은 form 제출 fallback과 브라우저 autofill의 매칭 키로 여전히 중요.

체크박스·라디오의 input — type=checkbox, type=radio. 시리즈 #2 fieldset/legend 카드와 결합. 여러 라디오를 같은 그룹으로 묶을 때 같은 name과 fieldset/legend가 필수.