<input type="text">

<input> 태그의 type="text"는 기본 한 줄 텍스트 입력 필드를 나타냅니다.
type="text"는 <input> 태그에서 사용되는 type 속성의 기본값입니다.

사용자가 일반 한 줄 텍스트를 입력할 수 있는 기본 컨트롤입니다.

HTML 
<label for="user-id">사용자 아이디</label>
<input type="text" id="user-id">
브라우저에서 실제 표시된 모습

사용법 참고사항

<input> 태그의 type에는 type="text" 뿐만 아니라, 한 줄 텍스트를 입력할 수 있는 여러 개의 컨트롤 유형이 있습니다.

한 줄 텍스트를 입력할 수 있는 여러 개의 input type
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 속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.

HTML 
<label for="user-id">사용자 아이디</label>
<input type="text" id="user-id" placeholder="특수문자 포함 10자 이상">
브라우저에서 실제 표시된 모습
접근성 고려사항

placeholder 속성이 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <label>을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다. 
<input type="text" placeholder="사용자 아이디">
브라우저에서 실제 표시된 모습

자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

텍스트 필드에 입력된 문자열의 초깃값을 지정합니다.

HTML 
<label for="user-id">사용자 아이디</label>
<input type="text" id="user-id" value="myid#123">
브라우저에서 실제 표시된 모습 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.

readonly 속성

컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.

하지만, 이 속성은 value를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

HTML 
<label for="user-id">사용자 아이디</label>
<input type="text" id="user-id" value="myid#123" readonly>
브라우저에서 실제 표시된 모습 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

브라우저 호환성

input type 속성의 text 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="text"> 1 12 1 1
placeholder 3 12 4 4
readonly 1 12 1 1

명세서

input type 속성의 text 값에 대한 명세서 사양
명세서 사양
<input type="text"> HTML Standard
#text-(type=text)-state-and-search-state-(type=search)

참고문헌

같이 보기