<input>의 type attribute는 UI, (모바일의) 화면 키보드, 내장 유효성 검사를 바꿉니다. 올바른 타입을 사용하면 사용성이 향상되고 무료로 유효성 검사를 얻습니다.
html
<input>의 type attribute는 UI, (모바일의) 화면 키보드, 내장 유효성 검사를 바꿉니다. 올바른 타입을 사용하면 사용성이 향상되고 무료로 유효성 검사를 얻습니다.
모바일 키보드가 적응합니다 — type="email"은 @ 키를, type="tel"은 숫자 패드를, type="number"는 숫자를 보여줍니다. 이것만으로도 휴대폰에서 큰 사용성 향상입니다.
무료 유효성 검사 — type="email"은 제출 시 not-an-email을 거부하고, min/max는 숫자 범위를 제한하며, type="url"은 유효한 URL인지 확인합니다. JavaScript가 필요 없습니다.
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- 동일한 name = 상호 배타적; 하나만 선택 가능 -->
올바른 input 타입을 선택하면 더 나은 모바일 키보드, 네이티브 선택기, 내장 유효성 검사를 무료로 얻어 accessibility를 높이고 작성할 JavaScript를 줄입니다.
작은 선택이지만 UX에 대한 보상은 그보다 훨씬 큽니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기