SOYOYU
폼

<form>

사용자 입력을 묶는 컨테이너. 데이터 전송·검증의 시맨틱 단위.

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

SEO

●●●○○중간

사용자 인터랙션의 시맨틱 단위. 폼 페이지의 task success rate 신호.

GEO

●●●●○높음

AI 에이전트가 폼 자동 입력 시 form 단위로 인식. 입력 그룹의 명확한 경계.

AEO

●●○○○낮음

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

A11y

●●●●○높음

스크린리더가 form 진입 시 폼 모드 전환. 필드 단위 탐색 활성화.

올바른 사용

  • 사용자 입력을 묶는 시맨틱 컨테이너
  • action·method 속성으로 전송 동작
  • novalidate로 native 검증 끄고 라이브러리 검증
  • role=search는 검색 form에
기본 form
<form action="/api/contact" method="post">
  <label for="email">이메일</label>
  <input id="email" type="email" name="email" required />
  <button type="submit">전송</button>
</form>

action으로 전송 endpoint, method로 HTTP 동사.

검색 form
<form role="search" action="/search">
  <label for="q" class="sr-only">검색</label>
  <input id="q" type="search" name="q" />
  <button type="submit">검색</button>
</form>

검색 폼은 role=search를 form에. 스크린리더가 search landmark로 인지.

자주 보는 안티패턴

  • div로 form 대체
  • form 안 form 중첩 (HTML 명세 위반)
  • submit button이 type=button — Enter 키 안 먹음
  • 검색 form에 role=search 누락
div로 form 대체
<div className="form">
  <input ... />
  <button onClick={submit}>전송</button>
</div>

Enter 키로 제출 안 됨. autofill·검증 모두 손해.

form 중첩
<form>
  <form>...</form>
</form>

HTML 명세 위반. 브라우저가 두 번째 form 자동 제거.

해설

사용자 입력을 시맨틱하게 묶는 컨테이너. div로 비슷한 시각 효과를 낼 수 있지만 — form 태그가 주는 Enter 키 제출, 브라우저 autofill, 검증 자동화, 스크린리더 폼 모드 같은 무료 동작들이 모두 빠진다.

SEO 관점에서 form 자체가 ranking factor는 아니다. 다만 폼이 완료되는 비율(전환율, task success)이 페이지의 사용자 만족 신호로 작용. form 시맨틱이 갖춰진 페이지는 완료율이 더 높다는 통계적 패턴.

GEO 관점에서 AI 에이전트가 "이 사이트에서 회원가입 해줘" 같은 작업을 받았을 때 — form 태그가 입력 그룹의 명확한 경계. div 폼은 에이전트가 어디까지가 한 폼인지 추측. form이 명시되면 그 안의 input들이 한 묶음임을 즉시 인지.

A11y 관점에서 스크린리더가 form 진입 시 폼 모드로 전환. F 키 같은 단축키로 다음 폼 컨트롤로 점프, 필드 정보 모드로 라벨 + 입력값 발화. 시각 사용자가 Tab으로 필드 이동하는 것과 동등한 청각 경험.

자주 보는 안티패턴: div로 form 대체(가장 흔함 — Enter 제출 안 됨), form 중첩(HTML 명세 명시적 위반), submit 버튼이 type="button"(Enter 키로 제출 안 됨 — 시리즈 #1 button vs a 글의 type 명시 패턴), 검색 form에 role="search" 누락(검색 landmark 손실).

form의 action/method 속성 — 어디로, 어떻게 전송할지 명시. 같은 페이지 안에서 JavaScript로 처리하더라도 — action="/api/contact"와 method="post"를 박아두면 JS 비활성화 환경에서도 fallback. 점진적 향상(progressive enhancement)의 표준.

novalidate 속성 — 브라우저 native validation을 끄고 라이브러리 검증으로 일원화. 시리즈 #9 form-error에서 본 패턴 — react-hook-form 등 라이브러리 검증을 쓸 때 native 메시지가 언어·디자인 통제 불가라 noValidate가 표준.

검색 form의 role="search" — 일반 form이 아닌 검색 전용임을 명시. 스크린리더의 D 키 landmark 점프에서 search 영역으로 노출. 사이트 내 검색을 자주 쓰는 시각장애 사용자에게 결정적 단축.

UI 라이브러리 — Radix Form, Headless UI Field 등이 form + label + input + 검증 메시지의 자동 연결을 제공. 시맨틱 + a11y의 정답을 기본값으로 가져오는 가장 안전한 선택.