HTML 폼이란 무엇인가?
웹사이트 방문자로부터 데이터를 수집해야 할 때 HTML 폼(Form)이 반드시 필요합니다. 대표적인 예로 사용자 회원가입 과정을 들 수 있습니다. 회원가입 시에는 이름, 이메일 주소, 신용카드 정보 등 다양한 정보를 수집하게 됩니다.
폼은 사이트 방문자로부터 입력값을 받아 CGI, ASP 스크립트, PHP 스크립트와 같은 백엔드 애플리케이션으로 전송합니다. 그러면 백엔드 애플리케이션이 애플리케이션 내부에 정의된 비즈니스 로직에 따라 전달받은 데이터에 필요한 처리를 수행하게 됩니다.
<form> 태그의 기본 구조
HTML에서는 <form> 태그를 사용하여 폼을 생성하며, 그 안에 input, textarea 등 다양한 폼 요소들을 포함시킵니다.
<form action = "Script URL" method = "GET|POST">
input, textarea 등의 폼 요소들
</form>
폼을 만들려면 텍스트, 비밀번호, 생년월일, 전화번호, 이메일, 버튼 등의 필드를 추가해야 합니다. 이 모든 요소는 <input> 태그로 추가할 수 있습니다.
주요 Input 타입 종류
| 번호 | 타입 및 설명 |
|---|---|
| 1 | text 자유 형식의 텍스트 필드로, 기본적으로 줄바꿈을 허용하지 않습니다. |
| 2 | password 비밀번호처럼 민감한 정보를 입력하기 위한 텍스트 필드로, 입력 내용이 화면에 표시되지 않습니다. |
| 3 | checkbox 미리 정의된 목록에서 0개 이상의 값을 중복 선택할 수 있습니다. |
| 4 | radio 여러 개의 항목 중 하나만 선택할 수 있는 열거형 값입니다. |
| 5 | submit 클릭 시 폼 제출을 시작하는 버튼입니다. |
| 6 | file MIME 타입과 선택적으로 파일 이름을 가진 파일을 업로드할 때 사용합니다. |
| 7 | image 특정 이미지 크기를 기준으로 한 좌표값을 전달하며, 클릭 시 폼 제출을 시작합니다. |
| 8 | hidden 화면에는 보이지 않지만 서버로 전달되어야 하는 임의의 문자열을 담습니다. |
| 9 | select 라디오 타입과 유사하게 여러 옵션 중 하나를 선택하는 드롭다운 목록입니다. |
| 10 | textarea 줄바꿈 제한 없이 긴 텍스트를 자유롭게 입력할 수 있는 필드입니다. |
| 11 | button 버튼과 관련된 다양한 이벤트를 실행할 수 있는 일반 버튼입니다. |
HTML5에서 새롭게 추가된 Input 타입
HTML5에서는 <input> 요소에 더욱 다양한 타입 옵션이 도입되었습니다.
| 번호 | 타입 및 설명 |
|---|---|
| 1 | datetime ISO 8601 형식으로 인코딩된 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)이며, 시간대는 UTC로 설정됩니다. |
| 2 | datetime-local ISO 8601 형식의 날짜와 시간이지만, 시간대 정보는 포함되지 않습니다. |
| 3 | date ISO 8601 형식의 날짜(년, 월, 일)를 선택합니다. |
| 4 | month ISO 8601 형식으로 년과 월로 구성된 날짜를 선택합니다. |
| 5 | week ISO 8601 형식으로 년과 주차 번호로 구성된 날짜를 선택합니다. |
| 6 | time ISO 8601 형식의 시간(시, 분, 초, 밀리초)을 선택합니다. |
| 7 | number 숫자 값만 입력할 수 있습니다. step 속성으로 간격(정밀도)을 지정할 수 있으며 기본값은 1입니다. |
| 8 | range 일정 범위의 숫자 값 중 하나를 선택하는 슬라이더 형태의 입력 필드입니다. |
| 9 | email 이메일 주소만 입력할 수 있습니다. 올바르지 않은 형식의 텍스트를 입력하면 email@example.com 형식으로 입력하도록 유효성 검사가 적용됩니다. |
| 10 | url URL 주소만 입력할 수 있습니다. https://www.example.com 또는 https://example.com 형식으로 입력하도록 유효성 검사가 적용됩니다. |
실전 예제 1: 기본 회원가입 폼 만들기
이제 실제로 폼을 생성하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
실전 예제 2: 체크박스가 포함된 폼 만들기
이번에는 체크박스 필드를 하나 추가한 폼을 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 체크박스가 추가된 다음과 같은 화면이 출력됩니다.
마무리
HTML 폼은 웹에서 사용자와 상호작용하는 가장 기본적인 수단입니다. <form> 태그의 구조를 이해하고, 상황에 맞는 input 타입을 활용하면 사용자 경험이 뛰어난 데이터 수집 인터페이스를 손쉽게 구축할 수 있습니다. 특히 HTML5의 email, date, number 같은 타입은 별도의 유효성 검사 코드 없이도 브라우저 차원에서 입력값을 검증해 주므로, 적극적으로 활용해 보시기 바랍니다.