아이디 입력란을 만들던 중 최대 글자수를 제한하고 싶었다.
그래서 input 태그의 속성을 활용하려고 max라고 입력하는 순간...
max와 maxlength가 자동완성으로 보여지는 것이 아니겠는가.
갑자기 헷갈려서 고민을 했는데, 그래서 둘 차이를 적어놓으려고한다.

max

max 속성은 말그대로 최대값을 설정한다.
최대"값"이라는 것을 보면 숫자의 최대값을 나타내는 것으로 유추할 수 있다.

그렇다. 이 친구는 숫자의 최대값을 제한할 때 쓰인다.
그래서 input 태그의 type 중
date, datetime, datetime-local, month, number, range, time, week
에만 사용할 수 있다.
min 속성도 같은 원리로 적용된다.

즉,

<input placeholder="입력하세요" type="text" max="5" />

이건 아무 의미가 없다는 뜻이다.
대충만 보면 5글자로 제한한다는거 아니야?! 라고 할 수도 있지만

전혀 영향이 없다.
영향을 주려면 방금 위에서 설명한 type에서 사용해야한다.

<input placeholder="입력하세요" type="number" max="5" />

number라는 type에 max를 적용했더니 최대 5까지만 증가하는 것을 볼 수 있다.

maxlength

사실 위 설명들을 통해 maxlength는 어떤 기능일지 감을 잡으셨을거라고 생각한다.

이 친구는 글자수를 개수를 제한할 때 사용된다.
minlength도 같은 방식이다.

<input placeholder="입력하세요" type="text" maxlength="5" />

실제로 5글자로 제한되는 것을 확인할 수 있다.

앞으로 헷갈릴 일은 없을 것 같다..!

참고 자료

TCP스쿨