웹사이트를 이용하다 보면 자주 마주치는 기능 중 하나가 회원가입 폼입니다.
이처럼 사용자로부터 정보를 입력받는 인터페이스는 모두 HTML의 <form> 태그로 구현됩니다.
이번 글에서는 비전공자도 따라할 수 있도록 HTML 폼 태그의 기본 구조와 주요 입력 요소들을 익히고, 실제로 간단한 회원가입 폼을 만들어보는 실습까지 안내드립니다.
1. HTML에서 <form> 태그란?
<form>은 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 하는 HTML 태그입니다.
회원가입, 로그인, 검색, 문의하기 등 모든 입력 기반 기능에서 사용됩니다.
<form action="서버주소" method="POST"> <!-- 입력 요소들 --> </form>
- action: 데이터를 전송할 서버 주소 (초보자 실습에선 생략 가능)
- method: 전송 방식 (GET, POST 중 선택)
2. 기본 입력 요소 태그 소개
태그설명예시
<input> | 단일 입력 필드 | 텍스트, 이메일, 비밀번호 등 |
<label> | 입력 필드에 대한 설명 | <label for="email">이메일</label> |
<textarea> | 여러 줄 입력 | 자기소개 등 |
<select> | 드롭다운 메뉴 | 성별, 지역 선택 등 |
<button> | 제출 버튼 | 제출 또는 초기화 |
3. 실습: 회원가입 폼 만들기
아래는 이름, 이메일, 비밀번호, 성별, 자기소개 등을 입력받는 기초 회원가입 폼 코드 예제입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>회원가입 폼</title> <style> body { font-family: Arial, sans-serif; background-color: #f9f9f9; padding: 40px; } form { background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,0.1); } label { display: block; margin-bottom: 5px; font-weight: bold; } input, textarea, select { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #007BFF; color: white; padding: 10px; width: 100%; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body> <h2 style="text-align:center;">회원가입</h2> <form action="#" method="POST"> <label for="name">이름</label> <input type="text" id="name" name="name" required> <label for="email">이메일</label> <input type="email" id="email" name="email" required> <label for="password">비밀번호</label> <input type="password" id="password" name="password" required> <label for="gender">성별</label> <select id="gender" name="gender"> <option value="male">남성</option> <option value="female">여성</option> <option value="none">선택 안 함</option> </select> <label for="bio">자기소개</label> <textarea id="bio" name="bio" rows="4" placeholder="간단한 소개를 입력하세요."></textarea> <button type="submit">가입하기</button> </form> </body> </html>
4. 코드 설명
- required: 입력 필수 항목으로 설정
- type="email": 이메일 형식 자동 검증
- type="password": 입력값을 ●●● 표시로 숨김
- select + option: 드롭다운 형태의 선택 목록
- textarea: 여러 줄 입력 (자기소개, 설명 등)
- button type="submit": 폼 제출
⚠ 실습에서는 action="#" 으로 서버 전송을 막고, 기본 구조 연습에 집중합니다.
5. 폼 작성 시 자주 쓰이는 입력 타입 요약
타입설명
text | 일반 텍스트 입력 |
이메일 형식 입력 | |
password | 비밀번호 입력 (숨김 처리) |
radio | 하나만 선택하는 옵션 |
checkbox | 다중 선택 옵션 |
submit | 제출 버튼 |
reset | 초기화 버튼 |
마무리: 폼 태그는 사용자 인터페이스의 핵심
HTML의 <form> 태그는 단순히 입력값을 받는 기능을 넘어,
사용자와 웹사이트가 소통하는 창구입니다.
특히 회원가입, 로그인, 검색창, 설문조사 등 다양한 기능의 기반이 되기 때문에,
웹 개발을 시작하는 분이라면 반드시 익혀야 할 필수 기술입니다.
오늘 실습한 회원가입 폼은 기본적인 구조만 다룬 예제지만,
이후에 CSS를 활용한 디자인 개선, 자바스크립트를 활용한 입력 검증 등으로 확장할 수 있습니다.