본문 바로가기
카테고리 없음

HTML 폼(Form) 태그 기초: 회원가입 폼 만들기 실습

by info521 2025. 10. 7.

웹사이트를 이용하다 보면 자주 마주치는 기능 중 하나가 회원가입 폼입니다.
이처럼 사용자로부터 정보를 입력받는 인터페이스는 모두 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 일반 텍스트 입력
email 이메일 형식 입력
password 비밀번호 입력 (숨김 처리)
radio 하나만 선택하는 옵션
checkbox 다중 선택 옵션
submit 제출 버튼
reset 초기화 버튼

마무리: 폼 태그는 사용자 인터페이스의 핵심

HTML의 <form> 태그는 단순히 입력값을 받는 기능을 넘어,
사용자와 웹사이트가 소통하는 창구입니다.

특히 회원가입, 로그인, 검색창, 설문조사 등 다양한 기능의 기반이 되기 때문에,
웹 개발을 시작하는 분이라면 반드시 익혀야 할 필수 기술입니다.

오늘 실습한 회원가입 폼은 기본적인 구조만 다룬 예제지만,
이후에 CSS를 활용한 디자인 개선, 자바스크립트를 활용한 입력 검증 등으로 확장할 수 있습니다.