입력 목적에 맞는 type으로 키보드, 검증, UI를 최적화합니다.
text, email, password, number, date, color, range, checkbox 등 type에 따라 브라우저의 입력 UI와 기본 검증이 달라집니다. type을 생략하면 text로 동작합니다.
값 확인을 누르면 FormData를 Object.fromEntries로 객체로 바꾸고 JSON.stringify로 두 칸씩 들여써 출력합니다. count와 score는 숫자 입력이지만 결과에서는 따옴표가 붙은 문자열 2와 7로 나오고, color는 #176b45처럼 소문자 여섯 자리 HEX 문자열이 됩니다. 이메일 칸이 비었거나 형식이 틀리면 검증에 걸려 submit 이벤트가 일어나지 않으므로 아무것도 출력되지 않습니다.
숫자가 필요하면 문자열인 value 대신 valueAsNumber를 읽고, date 입력은 valueAsDate로 Date 객체를 얻을 수 있습니다. type=number는 min과 max 밖의 값을 제출 단계에서 막을 뿐 타이핑 자체를 막지는 않습니다. 화면에 보이는 날짜 형식이 지역마다 달라도 date의 value는 언제나 연-월-일 형식입니다.
모든 값을 text로 받으면 모바일 키보드와 브라우저 검증의 도움을 잃습니다.
직접 바꿔보세요URL과 전화번호를 받는 input을 각각 추가하세요.