HTML 회원가입 폼 — input email · password · minlength 완전 정리

 

 

Web Development · HTML Sign-up Form

HTML 회원가입 폼 —
email · password · minlength 완전 정리

아이디·이메일·비밀번호 + 4~15자리 입력 검증

시작 오늘 분석할 코드

전형적인 회원가입 폼. 아이디(4~15자리), 이메일, 비밀번호, 비밀번호 확인 — 4단계로 구성된다. 각 input의 type과 길이 제한을 어떻게 지정하는지가 핵심.

<form> <ul> <li><label>아이디: <input type="text" id="user_id" size="10" minlength="4" maxlength="15"></label> <small style="color:red;"> 4~15자리 이내의 영문과 숫자</small></li> <li><label>이메일: <input type="email" id="user_email"></label></li> <li><label>비밀번호: <input type="password" id="user_pwd"></label></li> <li><label>비밀번호 확인: <input type="password" id="check_pwd"></label></li> <li><input type="submit" value="회원가입"></li> </ul> </form>

실제 출력 결과

회원 가입을 환영합니다

• 아이디: 4~15자리 영문/숫자
• 이메일:
• 비밀번호:
• 비밀번호 확인:

용어 용어 정리

type=email이메일 형식 자동 검증

minlength최소 글자 수 — 못 채우면 차단

maxlength최대 글자 수 제한

small부가 설명·작은 텍스트

list-style: noneul 불릿 제거

type=submit폼 제출 버튼

---

1 <input type="email"> — 자동 형식 검증

type을 email로 지정하면 브라우저가 "@"가 있는지, 도메인 형식이 맞는지를 자동으로 검사한다. 형식이 틀리면 제출 시 안내 풍선이 뜬다.

※ 자바스크립트 없이 HTML만으로 기본 이메일 검증이 가능. 단 진짜 존재하는 이메일인지는 검증 못함 (그건 서버에서 인증 메일 발송으로).

※ 모바일에서 추가 효과: 이메일 입력 키보드가 자동으로 표시 (@와 .com 키 강조).

---

2 minlength + maxlength — 길이 범위 제한

아이디 입력에 minlength="4" maxlength="15"를 함께 지정해 "4자 이상 15자 이하" 범위를 정했다.

속성	역할	위반 시
minlength="4"	최소 4글자	제출 시 차단 + 안내
maxlength="15"	최대 15글자	16번째 입력 자체가 안 됨

※ 동작 방식이 다르다. maxlength는 입력 차단이고, minlength는 제출 차단. min은 적게라도 입력은 가능, 제출 시 검사.

---

3 <small> — 부가 설명 텍스트

<small>은 단순히 글씨를 작게만 하는 게 아니라 "부가 설명·면책 문구·저작권" 같은 의미적 역할을 가진다.

예: <p>가격 99,000원 <small>(부가세 별도)</small></p> <p>© 2026 회사명 <small>All rights reserved.</small></p>

※ 단순히 작게 표시하고 싶으면 CSS의 font-size 사용. small 태그는 "덜 중요한 부가 정보"의 의미가 있을 때.

---

4 CSS — list-style: none

이번 코드의 ul { list-style: none; }은 리스트 앞 점(•)을 제거한다. 회원가입 폼에서는 점이 보이면 어색해서 거의 항상 제거한다.

※ ul/li 구조는 시맨틱 의미를 위해 유지하되, 시각적 표현만 일반 박스처럼 처리하는 패턴. 메뉴·내비게이션·폼 그룹에서 매우 흔하다.

---

반응형

5 비밀번호 확인 — 일치 검증의 한계

회원가입에서 비밀번호를 두 번 입력받는 건 오타로 인한 잘못된 비밀번호 등록을 막기 위함이다. 그런데 HTML만으로는 두 입력이 같은지 검증할 수 없다.

※ HTML의 input 속성으로는 "두 칸이 일치하는지" 검증 불가. 자바스크립트가 필요하다.

// JavaScript로 일치 검증 const pwd = document.getElementById("user_pwd"); const check = document.getElementById("check_pwd"); check.addEventListener("input", () => { if (pwd.value !== check.value) { check.setCustomValidity("비밀번호가 일치하지 않습니다"); } else { check.setCustomValidity(""); } });

---

6 회원가입 폼의 보안 체크리스트

※ 실무 회원가입 보안 필수사항

• HTTPS 연결 (TLS 암호화) — 비밀번호 평문 전송 방지
• 비밀번호 해시 저장 (bcrypt, argon2) — 평문 저장 금지
• 이메일 인증 (가입 후 인증 링크) — 실제 본인 확인
• 비밀번호 정책 (최소 8자, 영문+숫자+특수문자) — minlength로 시각화
• rate limiting — 무차별 가입 방지
• CAPTCHA — 봇 가입 방지
• 중복 체크 — DB 조회로 아이디·이메일 중복 차단

---

7 자주 하는 실수

실수	증상	해결
type="text"로 이메일	형식 검증·이메일 키보드 X	type="email"
비밀번호 확인 일치 검사 안함	오타 가입 가능	JS로 검증 + 서버 재검증
HTML만 신뢰	JS로 우회 가능	서버에서 반드시 재검증
maxlength만 강하게	너무 짧은 비번도 통과	minlength도 함께
list-style 안 없앰	점이 어색하게 보임	폼 ul은 list-style: none
required 누락	빈 채로 제출됨	필수 필드에 required
비밀번호 평문 저장	해킹 시 즉시 노출	해시 (bcrypt 등)

---

핵심 한 줄 요약

type="email"@ 형식 자동 검증 + 모바일 키보드

minlength제출 시 검증 (입력은 허용)

maxlength입력 자체가 차단

<small>부가 설명 — 의미 있는 작은 글씨

list-style: noneul 불릿 제거 (폼 표준)

비밀번호 일치JS 필요 — HTML만으론 안 됨

서버 재검증HTML 검증은 사용성, 보안은 서버

비밀번호 해시bcrypt·argon2 — 평문 저장 X

Tags

#input #email #password #minlength #maxlength #HTML #회원가입 #폼 #비밀번호확인 #list-style #검증 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

input, email, password, minlength, maxlength, HTML, 회원가입, 폼, 비밀번호확인, list-style, 검증, 웹개발, 티스토리