[HTML] input 입력창에서 한글만 입력받는 법 (pattern 속성 활용)

---

💡 이름, 별명 입력란에 한글만 입력받고 싶다면?

회원가입, 설문조사 등에서 이름 입력란을 한글로만 제한하고 싶을 때가 있어요.
이럴 때는 input 박스에 pattern 속성을 이용해서
한글만 입력 가능하도록 제한할 수 있습니다.

---

🛠️ 한글만 입력받기: 코드 예제와 설명

✅ 기본 예제 (pattern 활용)

<form>
  <input type="text" placeholder="한글만 입력" pattern="^[가-힣]+$" title="한글만 입력하세요">
  <button type="submit">제출</button>
</form>

✅ 위 코드에서:

• pattern="^[가-힣]+$" 👉 한글만 허용 (가~힣 유니코드 범위)
• + 👉 하나 이상 입력해야 함
• title="한글만 입력하세요" 👉 잘못 입력 시 안내 메시지 표시

---

🎯 포인트 설명

• pattern 속성은 정규식을 사용해서 입력값을 검증해요.
• ^[가-힣]+$:
  • ^ → 시작
  • [가-힣] → 한글 범위
  • + → 하나 이상
  • $ → 끝
• 소문자, 숫자, 영문, 특수문자는 입력해도 submit 시 오류 발생

---

⚡ 한글 이름 2~4글자만 허용하고 싶다면?

<input type="text" placeholder="한글 2~4글자" pattern="^[가-힣]{2,4}$" title="한글 2~4글자만 입력하세요">

정규식	의미
[가-힣]+	한글 1개 이상
[가-힣]{2,4}	한글 2개 이상 4개 이하

---

🧩 참고: 한글 + 영문 허용하고 싶다면?

<input type="text" placeholder="한글 또는 영문" pattern="^[가-힣a-zA-Z]+$" title="한글 또는 영문만 입력하세요">

---

🏁 마무리 요약

목표	방법
한글만 입력받기	pattern="^[가-힣]+$" 사용
자리수(글자 수) 제한	{최소,최대} 사용
한글과 영문 둘 다 허용	pattern="^[가-힣a-zA-Z]+$" 사용
오류 안내 메시지	title="메시지" 속성으로 설정

---

👉 다음 글 예고

[HTML] input 입력창에서 영문 소문자와 숫자만 입력받는 방법 (pattern 속성 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊