HTML <input type="text">: 일반 평문 입력

text 유형의 <input> 요소는 한 줄의 기본적인 텍스트 입력 칸을 제공합니다.

<label for="username">사용자 이름 (4~8 글자):</label>
<input id="username" maxlength="8" minlength="4" type="text" />

label {
  display: block;
}

값

text 유형의 값은 문자열입니다. 값의 형식을 제한하려면 minlength, maxlength, pattern 특성 등을 사용하세요.

추가 특성

text 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

maxlength

입력 값의 유효한 최대 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 긴 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다. 기본 설정에서, 브라우저는 사용자가 입력하는 값의 길이를 이 특성의 값으로 제한합니다.

minlength

입력 값의 유효한 최소 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 짧은 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다.

pattern

제약 검증을 만족하려면 입력 값이 일치해야 하는 정규표현식을 지정합니다. JavaScript RegExp가 인식할 수 있는 정규표현식이어야 합니다. 정규표현식을 컴파일할 때 u 플래그를 지정하므로 패턴은 항상 Unicode 코드 포인트의 시퀀스로 취급합니다. 정규표현식을 열고 닫는 슬래시는 생략해야 합니다.

유효하지 않은 값을 지정한 경우 무시합니다.

pattern 특성을 사용할 땐 반드시 <input> 근처의 부가 설명으로 형식에 대한 도움말을 제공하세요. <input>에 aria-describedby 특성을 추가해서 설명과 연결하면 접근성을 강화할 수 있습니다.

여기에 더해서 title 특성으로 정확한 요구사항을 설명하면 대부분의 브라우저에서 툴팁으로 보여줄 것입니다. 하지만 title 특성의 접근성 문제를 고려하면 일반 텍스트 설명 없는 title만 단독으로 사용하지는 말아야 합니다.

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다.

placeholder는 양식을 설명할 수 있는 다른 방법에 비해 적합하지 않으며 예상하지 못한 기술적 문제를 유발할 수 있습니다. <input>의 레이블 절을 참고하세요.

readonly

입력 칸을 읽기 전용으로 만들어 사용자가 편집할 수 없도록 하는 불리언 특성입니다. 하지만 JavaScript를 사용해 HTMLInputElement의 value 속성을 직접 설정하면 값을 바꿀 수 있습니다.

읽기 전용 입력 칸에는 사용자가 값을 입력할 수 없으므로, readonly를 추가한 요소에 required 특성을 추가하면 아무 효과도 없습니다.

유효성 검증

기본 텍스트 입력 칸은 아무 형식의 문자열이나 받을 수 있어야 하므로 text 유형에는 내장된 유효성 검증 기능이 없습니다. 하지만 필요한 경우 required 특성으로 입력을 필수로 받게 하거나, maxlength, minlength, pattern 등을 사용해 입력 형식을 제한할 수 있습니다.

명세

• HTML Standard

브라우저 호환성

같이 보기

• 여러 줄 입력 칸: <textarea>