[attribute] HTML - maxlength 속성 ★ - 입력 가능한 최대 글자 개수 지정 (= maxlength속성 = 맥스렝스속성) ※ 문자 최대길이 ※ 최대글자수 ※ 최대문자수

1. maxlength 예제 - <input> 경우
2. maxlength 정의
3. maxlength 구문
4. maxlength 예제 - <textarea> 경우

maxlength 예제 - <input> 경우

(예) 최대 5글자만 허용

 

<form action="/action_page.php">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name" maxlength="5">

  <input type="submit" value="확인">

</form>

 

결과보기

maxlength 정의

 

요소에 입력 가능한 최대 글자 개수 지정.

 

---

 

1. maxlength 속성 사용 가능 태그 종류

<input>, <textarea>

 

2. cf.

• minlength 속성 - <input> 입력창에 입력 가능한 최소 글자수 지정.
• size 속성 - <input> 입력창 기본 가시 너비를 글자 개수로 지정.

 

3.

주요 최신 브라우저 모두 지원.

 

maxlength 구문

 

• <input maxlength="number">
• <textarea maxlength="number">

 

---

[속성값]

 

number

입력 가능한 최대 문자 개수. 

• (예) 5경우, 한글/영문/숫자 모두 최대 5글자 입력 가능.
• <input> 태그 기본값: 524288

 

maxlength 예제 - <textarea> 경우

(예) 최대 10글자만 입력 허용

 

<form action="/action_page.php">

   <textarea id="intro" name="intro" rows="4" cols="50" maxlength="10">

자기소개 10글자 이내로 간단히 입력.</textarea>

  <input type="submit" value="확인">

</form>

<script>

intro.addEventListener('focus', ()=> {intro.innerHTML=''});

intro.addEventListener('blur', ()=> {intro.innerHTML='자기소개 10글자 이내로 간단히 입력.'});

</script>

 

결과보기