입력 타입: Email & Tel

핵심 개념

이메일이나 전화번호를 입력받을 때, 형식이 맞는지 브라우저가 미리 확인해주는 똑똑한 입력창이에요.

코드 분석

HTML5📋 코드 (5줄)

<form onsubmit='alert("입력 완료!"); return false;'>
  <div>이메일: <input type='email' required></div>
  <div>전화번호: <input type='tel' placeholder='010-0000-0000'></div>
  <button type='submit'>확인</button>
</form>

AI 프롬프트

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

Claude

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

이 회원가입 폼의 type='email'·'tel' 검증에서
국제 표준(E.164) 미적용, 한국 휴대폰 번호 패턴 누락을 찾아
수정해줘.

ChatGPT

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

type='email', type='tel'을
토스·당근·쿠팡 회원가입 폼이
어떻게 활용하는지 비교 예시로 보여줘.

Gemini

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

이 폼의 email·tel 입력 처리를 분석해서
모바일 키보드 UX, 검증 패턴, 자동완성(autocomplete)
개선점을 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 모바일 회원가입에서
type='tel' 패턴 검증을 할지 서버에서만 할지,
현업에서 뭘 더 선호하는지 솔직히 말해줘.

⭐ 이것만 기억하세요

입력 타입: Email & Tel는 이 3가지만 확실히 잡으세요

1.type='text'로 이메일을 받으면 모바일에서 @ 키가 없는 기본 키보드가 뜨고, 형식 검증도 수동으로 해야 합니다

2.type='email'은 @ 포함 여부를 자동 검증하고, type='tel'은 숫자 키패드를 자동으로 띄워줍니다

3.다음 챕터에서 날짜 입력에 특화된 date 타입과 브라우저 내장 캘린더 UI를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 20 / 33

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