required, minlength, min, max, pattern 등 입력 제약을 설정합니다.
placeholder는 예시 힌트, value는 초기값, readonly는 제출되지만 수정 불가, disabled는 수정과 제출 모두 제외됩니다. required와 길이·범위 속성은 브라우저 기본 검증에 사용됩니다.
submit 리스너는 값을 검사하지 않고 통과 문장만 씁니다. 그래도 이름이 한 글자이거나 나이가 14보다 작으면 이 문장이 나오지 않는데, 브라우저가 minlength, min, max, required를 먼저 확인해 제출 자체를 멈추기 때문입니다. maxlength=10은 오류를 띄우는 대신 열한 번째 글자부터 입력되지 않게 막습니다.
minlength와 maxlength 검사는 사용자가 직접 입력한 값에만 적용되므로, 스크립트로 value에 짧은 문자열을 넣으면 tooShort 오류가 생기지 않습니다. 글자 수는 UTF-16 코드 단위로 세기 때문에 이모지 하나가 두 글자로 계산될 수 있습니다. 어떤 제약이 실패했는지는 input.validity의 tooShort, rangeOverflow 같은 값으로 구분합니다.
placeholder는 입력 후 사라지므로 label을 대신할 수 없습니다.
직접 바꿔보세요이름에 한 글자, 나이에 130을 넣어 브라우저 메시지를 확인하세요.