<input>의 type attribute는 UI, (모바일의) 화면 키보드, 내장 유효성 검사를 바꿉니다. 올바른 타입을 사용하면 사용성이 향상되고 무료로 유효성 검사를 얻습니다.
html
모바일 키보드가 적응합니다 — 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에 대한 보상은 그보다 훨씬 큽니다.