<input type="text">
사용자가 일반 한 줄 텍스트를 입력할 수 있는 기본 컨트롤입니다.
사용법 참고사항
<input>
태그의 type
에는 type="text"
뿐만 아니라, 한 줄 텍스트를 입력할 수 있는 여러 개의 컨트롤 유형이 있습니다.
type |
설명 | 기본 예제 |
---|---|---|
<input type="email"> |
이메일 주소 입력 필드입니다.
텍스트 입력처럼 보이지만, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 @ 문자 및 . 문자와 같은 이메일 주소 입력에 도움이 되는 키패드를 지원합니다. |
|
<input type="number"> |
숫자 입력 필드입니다.
스피너를 표시하고 숫자만을 입력할 수 있도록 유효성 검사를 합니다. 동적인 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 숫자 키패드를 표시합니다. |
|
<input type="password"> |
비밀번호 입력 필드입니다.
값이 가려져 있는 한 줄 텍스트 입력 컨트롤입니다. 브라우저는 입력되는 민감한 정보를 화면에서 보이지 않게 텍스트 문자를 점("•")과 같은 기호로 대체하여 읽을 수 없게 처리합니다. |
|
<input type="search"> |
검색어 입력 필드입니다.
한 줄 텍스트 입력 컨트롤이며, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 검색 아이콘을 표시합니다. 브라우저에 따라 필드를 지우는 데 사용할 수 있는 삭제 아이콘을 포함할 수 있습니다. |
|
<input type="tel"> |
전화번호 입력 필드입니다.
한 줄 텍스트 입력 컨트롤이며, 전화번호 형식을 검증하지는 않습니다. |
|
<input type="url"> |
URL 입력 필드입니다.
텍스트 입력처럼 보이지만, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 / 및 . 문자와 같은 URL 입력을 보조하기 위한 키 및 www. 또는 .com과 같은 도메인 이름에서 일반적으로 발견되는 문자열의 빠른 입력을 위한 키와 같은 URL 입력에 도움이 되는 키패드를 지원합니다. |
type="text"
는
email
, number
, password
, search
, tel
, url
등과 같은 더 구체적이거나 특수한 유형의 한 줄 텍스트 입력 필드가 아닌, 일반 텍스트를 입력할 때 사용하는 것이 적합니다.
관련 속성 사용하기
<input type="text">
의 관련된 속성에 대해 알아보겠습니다.
placeholder
속성
placeholder
속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.
접근성 고려사항
placeholder
속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <label>
을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.
value
속성
텍스트 필드에 입력된 문자열의 초깃값을 지정합니다.
readonly
속성
컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
주로 value
속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.
하지만, 이 속성은 value
를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.
이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<input type="text"> |
1 | 12 | 1 | 1 |
placeholder
|
3 | 12 | 4 | 4 |
readonly
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
<input type="text">
|
HTML Standard #text-(type=text)-state-and-search-state-(type=search) |