[HTML] input 입력창에서 영문 대문자만 입력받는 법 (pattern 속성 활용)

---

💡 영어 대문자만 입력받는 입력창을 만들고 싶다면?

회원가입 시 닉네임을 영어 대문자만 받는다거나, 코드 입력란을 제한할 때
input 박스에 영문 대문자만 입력되도록 설정할 수 있습니다.
이럴 때는 HTML의 pattern 속성을 활용하면 간단하게 제한이 가능합니다.

---

🛠️ 영문 대문자만 입력 제한: 코드 예제와 설명

✅ 기본 예제 (pattern 활용)

<form>
  <input type="text" placeholder="대문자만 입력" pattern="[A-Z]+" title="대문자만 입력하세요">
  <button type="submit">제출</button>
</form>

✅ 위 코드에서:

• pattern="[A-Z]+" 👉 영문 대문자만 허용 (A부터 Z까지)
• + 👉 하나 이상 입력해야 함
• title="대문자만 입력하세요" 👉 잘못 입력 시 나오는 안내 메시지

---

🎯 포인트 설명

• pattern 속성은 정규식(Regular Expression)을 사용
• pattern="[A-Z]+": A부터 Z까지 대문자만 허용
• 소문자, 숫자, 특수문자는 입력해도 submit 시 오류 발생

---

⚡ 대문자 3자리만 입력받고 싶다면?

<input type="text" placeholder="3자리 대문자" pattern="[A-Z]{3}" title="대문자 3자리만 입력하세요">

정규식	의미
[A-Z]+	대문자 1개 이상
[A-Z]{3}	정확히 3개 대문자
[A-Z]{2,5}	2개 이상 5개 이하 대문자

---

🧩 참고: 소문자만 허용하고 싶다면?

<input type="text" placeholder="3자리 대문자" pattern="[A-Z]{3}" title="대문자 3자리만 입력하세요">

---

🏁 마무리 요약

목표	방법
영문 대문자만 입력받기	pattern="[A-Z]+" 사용
자리수 제한	{숫자} 정규식 사용
소문자만 입력받기	pattern="[a-z]+" 사용
오류 시 안내 메시지 설정	title="메시지" 사용

---

👉 다음 글 예고

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