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>
요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.
list
현재 문서 내에 존재하는
<datalist>
요소의id
특성을 지정하면 사전 설정된 추천 입력값을 보여줄 수 있습니다.<datalist>
에 정의됐지만 현재<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 양식 검증은 서버에서 입력 데이터를 검증하는 것의 대안이 될 수 없습니다. HTML 코드를 직접 편집해서 검증을 우회하거나 아예 삭제하는 게 너무나 쉽기 때문입니다. 게다가 HTML을 아예 거치지 않고 서버로 직접 요청을 전송해버릴 수도 있습니다. 서버 측 코드가 입력 데이터 검증에 실패한다면 잘못된 형식이나 유형이나 크기의 데이터가 데이터베이스에 저장되어 큰 문제가 발생할 수 있습니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
type="text" |
같이 보기
- 여러 줄 입력 칸:
<textarea>