웹 폼
웹 폼(web form)은 사용자가 텍스트와 선택 값, 파일 등을 입력하고 웹 페이지 또는 서버에 전달하도록 하는 입력 인터페이스다. HTML의 form 요소와 다양한 폼 관련 컨트롤을 사용해 구성하며 로그인, 회원 가입, 검색, 주문 및 설문 조사 등에 널리 사용된다. 서버로 데이터를...
| 분류 | HTML 사용자 입력 인터페이스 |
|---|---|
| 정식 명칭 및 정의 | 웹에서 입력 데이터를 수집·전송 |
| 관련 기술 | World Wide Web, HTTP, 웹 브라우저, 웹 서버 |
| 기술 참고 | WHATWG HTML: Forms |
웹 폼(web form)은 사용자가 텍스트와 선택 값, 파일 등을 입력하고 웹 페이지 또는 서버에 전달하도록 하는 입력 인터페이스다. HTML의 form 요소와 다양한 폼 관련 컨트롤을 사용해 구성하며 로그인, 회원 가입, 검색, 주문 및 설문 조사 등에 널리 사용된다. 서버로 데이터를 전송하지 않고 JavaScript에서 상태를 처리하는 폼도 존재한다.
input, textarea, select, button 등의 요소는 서로 다른 입력 방식과 동작을 제공한다. type 속성은 문자열, 숫자, 날짜, 전자우편, 비밀번호 등 입력 데이터의 형식과 브라우저의 기본 사용자 인터페이스를 결정하는 데 영향을 준다. label과 폼 컨트롤을 연결하면 화면을 보는 사용자와 보조 기술 사용자 모두 입력 대상을 이해하기 쉬워진다.
폼은 action으로 제출 목적지를 지정하고 method로 기본 제출 방법을 선택할 수 있다. GET 요청의 데이터는 보통 URL의 질의에 인코딩되고 POST 요청은 본문에 입력 데이터를 담는다. application/x-www-form-urlencoded, multipart/form-data, text/plain 등 인코딩 형식은 입력의 종류와 전송 방식에 따라 사용된다.
브라우저는 required, min, max, pattern 같은 제약 속성에 따라 기본적인 사용자 입력 검증을 제공할 수 있다. 그러나 브라우저 검증은 사용자가 수정하거나 우회할 수 있으므로 서버는 모든 입력을 별도로 검증해야 한다. 폼에서 전달하는 데이터는 SQL 인젝션과 XSS, CSRF 등의 공격에 활용될 수 있어 적절한 검증과 출력 처리 및 토큰 정책이 필요하다.
접근 가능한 웹 폼에는 명확한 레이블과 설명, 논리적인 키보드 이동 순서 및 이해 가능한 오류 메시지가 필요하다. 폼 제출이 실패하면 사용자가 이전에 입력한 데이터를 불필요하게 잃지 않도록 설계하는 것이 중요하다. 동적 폼에서는 필드의 추가와 상태 변경, 자동 완성과 입력기 동작을 고려해 브라우저의 기본 컨트롤 의미를 최대한 활용한다.[1]