폼 검증: required & pattern

핵심 개념

필수 입력 항목은 required, 특정 형식(정규식)은 pattern 속성 하나로 해결할 수 있어요. 서버로 보내기 전에 미리 검사하세요.

코드 분석

HTML5📋 코드 (5줄)

<form onsubmit='alert("검증 통과!"); return false;'>
  <p>3글자 영문(대소문자)을 입력하세요:</p>
  <input type='text' required pattern='[A-Za-z]{3}' title='3글자 영문' placeholder='ABC'>
  <button type='submit'>검증 및 제출</button>
</form>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 회원가입 폼의 required·pattern·minlength 검증 코드에서
우회 가능한 보안 허점을 찾아
클라이언트 + 서버 양쪽 검증을 강화해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

required, pattern, minlength, type 검증을
실전 회원가입 폼으로 합쳐서
복사 가능한 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 폼 검증 코드 전체를 분석해서
UX(에러 메시지), 접근성(aria-*), 보안(서버 재검증)
3가지 축으로 종합 리포트를 만들어줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

HTML5 기본 검증(required·pattern)이
2026년 React Hook Form, Zod 같은 라이브러리 시대에도
쓸 가치가 있는지 솔직하게 평가해줘.

⭐ 이것만 기억하세요

폼 검증: required & pattern는 이 3가지만 확실히 잡으세요

1.서버에서만 검증하면 사용자가 잘못된 폼을 제출한 뒤에야 오류를 알게 돼서 이탈률이 높아집니다

2.required는 필수 입력을 강제하고, pattern은 정규식으로 입력 형식을 제한합니다 — 둘 다 JS 없이 HTML만으로 동작합니다

3.다음 챕터에서 텍스트를 넘어 비디오 콘텐츠를 페이지에 삽입하는 법을 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.9 — 질문하거나 답변을 확인하세요

→

진행도 9 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)