입력 목적에 맞는 type으로 키보드, 검증, UI를 최적화합니다.
text, email, password, number, date, color, range, checkbox 등 type에 따라 브라우저의 입력 UI와 기본 검증이 달라집니다. type을 생략하면 text로 동작합니다.
예제에서는 <input type="email"> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
먼저 현재 결과를 확인한 뒤 URL과 전화번호를 받는 input을 각각 추가하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
모든 값을 text로 받으면 모바일 키보드와 브라우저 검증의 도움을 잃습니다.
직접 바꿔보세요URL과 전화번호를 받는 input을 각각 추가하세요.