입력 타입 해부: Email, Tel, Date

핵심 개념

이제 자바스크립트 없이도 이메일 형식인지, 전화번호인지, 날짜인지 브라우저가 직접 검사해줍니다.

코드 분석

HTML5📋 코드 (3줄)

<div>이메일: <input type='email' placeholder='abc@example.com'></div>
<div>전화번호: <input type='tel' placeholder='010-0000-0000'></div>
<div>날짜: <input type='date'></div>

AI 프롬프트

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

Claude

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

이 form 코드에서 input type 선택이 잘못된 부분을 찾아
email/tel/date/number 등 적절한 타입으로 수정하고
모바일 키보드 차이를 설명해줘.

ChatGPT

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

type='email', 'tel', 'date'를
네이버 회원가입, 토스 송금, 에어비앤비 예약 폼에서
실제로 어떻게 쓰는지 예시를 보여줘.

Gemini

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

이 폼의 모든 input type을 분석해서
모바일 UX(키보드 전환), 검증, 접근성 측면에서
개선점을 우선순위로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 모바일 환경에서 input type을 정확히 쓰는 게
전환율(CR)에 실제로 얼마나 영향 주는지
데이터 기반으로 솔직하게 말해줘.

⭐ 이것만 기억하세요

입력 타입 해부: Email, Tel, Date는 이 3가지만 확실히 잡으세요

1.text 하나로 모든 입력을 받으면 모바일 키보드 최적화가 안 되고, 브라우저 기본 검증도 작동하지 않습니다

2.HTML5는 email, tel, date 등 용도별 input type을 제공해서 브라우저가 입력 형식을 자동으로 도와줍니다

3.다음 챕터에서 required와 pattern 속성으로 폼 데이터를 서버 전송 전에 검증하는 법을 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 8 / 33

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