<input> 태그는
사용자로부터 데이터를 입력받기 위한 대화형 컨트롤을 나타냅니다.

이 태그는 type 속성 값에 따라 다양한 컨트롤 유형을 제공하며,
type 속성 외에도 여러 가지 속성을 통해 입력 필드의 동작을 세부적으로 조정할 수 있습니다.

이러한 속성들을 조합하여 <input> 태그는 강력하고 다양한 기능을 제공합니다.

다음의 목차로 설명합니다.

<input> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</input>)가 없다는 의미입니다.

HTML 
<form action="submit_url" method="get" class="form-example">
    <div class="form-example">
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name" required>
    </div>
    <div class="form-example">
        <label for="user-email">이메일</label>
        <input type="email" id="user-email" name="user-email" required>
    </div>
    <input type="submit">
</form>
HTML <form>
실제 적용된 모습

<input> 태그는 type 속성 값에 따라 다양한 컨트롤 유형을 제공합니다.

type 속성 값에 따라 입력 필드의 동작과 표시 방식이 달라집니다. 아래에 사용 가능한 각 type 속성 값과 그 설명을 정리하였습니다.

type 속성이 지정되어 있지 않을 경우 type 속성의 기본값은 text입니다.

주요 브라우저 중에서 일부 브라우저가 지원하지 않는 type 속성 값은 포함시키지 않았습니다.

input type 속성 값과 설명
type 설명 기본 예제
<input type="button"> 일반 버튼입니다.
자바스크립트와 함께 사용하여 다양한 동작을 수행할 수 있습니다.
<input type="checkbox"> 체크박스입니다.
단일한 값으로 체크와 취소를 할 수 있습니다. 일반적으로 정사각형이지만 모서리가 둥글게 되어 있을 수도 있습니다.
<input type="color"> 사용자가 색상을 선택하거나 입력할 수 있는 컬러 피커 형태의 입력 필드를 나타냅니다.
브라우저에서 활성화되면 컬러 피커를 엽니다.
<input type="date"> 날짜 입력 컨트롤입니다.
브라우저에서 활성화된 연도, 월, 일에 대한 날짜 선택기 또는 숫자 휠을 엽니다.
<input type="datetime-local"> 시간대 없이 날짜와 시간을 입력하는 컨트롤입니다.
브라우저에서 활성화된 날짜 및 시간 구성 요소에 대한 날짜 선택기 또는 숫자 휠을 엽니다.
<input type="email"> 이메일 주소 입력 필드입니다.
텍스트 입력처럼 보이지만, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 @ 문자 및 . 문자와 같은 이메일 주소 입력에 도움이 되는 키패드를 지원합니다.
<input type="file"> 사용자가 디바이스에서 파일을 선택하고 업로드할 수 있는 입력 필드입니다.
<input type="hidden"> 숨겨진 입력 필드로, 사용자에게 보이지 않지만 데이터를 양식과 함께 전송할 수 있습니다.
<input type="image"> 그래픽 제출 버튼입니다. 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식(<form>)의 모든 컨트롤의 값을 제출합니다. 텍스트가 아닌 이미지 형식을 취하는 제출 버튼을 만드는데 사용됩니다. src 속성으로 지정된 이미지를 표시합니다. src 속성이 누락된 경우에는 alt 속성의 값이 표시됩니다. <input type="submit">과 동일한 기능을 합니다.
<input type="number"> 숫자 입력 필드입니다.
스피너를 표시하고 숫자만을 입력할 수 있도록 유효성 검사를 합니다. 동적인 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 숫자 키패드를 표시합니다.
<input type="password"> 비밀번호 입력 필드입니다.
값이 가려져 있는 한 줄 텍스트 입력 컨트롤입니다. 브라우저는 입력되는 민감한 정보를 화면에서 보이지 않게 텍스트 문자를 점("•")과 같은 기호로 대체하여 읽을 수 없게 처리합니다.
<input type="radio"> 라디오 버튼입니다.
일반적으로 작은 원으로 렌더링되며 선택 시 채워지거나 강조 표시됩니다.
<input type="range"> 범위 슬라이더로, 설정된 숫자 범위 내에서 값을 선택할 수 있습니다.
<input type="reset"> 양식(<form>) 초기화 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 초기화합니다.
<input type="search"> 검색어 입력 필드입니다.
한 줄 텍스트 입력 컨트롤이며, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 검색 아이콘을 표시합니다. 브라우저에 따라 필드를 지우는 데 사용할 수 있는 삭제 아이콘을 포함할 수 있습니다.
<input type="submit"> 양식(<form>) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다.
<input type="tel"> 전화번호 입력 필드입니다.
한 줄 텍스트 입력 컨트롤이며, 전화번호 형식을 검증하지는 않습니다.
<input type="text"> type 속성의 기본값이며, 일반 텍스트 입력 필드입니다.
한 줄 텍스트 입력 컨트롤입니다.
<input type="time"> 시간대가 없는 시간 값을 입력하는 컨트롤입니다.
<input type="url"> URL 입력 필드입니다.
텍스트 입력처럼 보이지만, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 / 및 . 문자와 같은 URL 입력을 보조하기 위한 키 및 www. 또는 .com과 같은 도메인 이름에서 일반적으로 발견되는 문자열의 빠른 입력을 위한 키와 같은 URL 입력에 도움이 되는 키패드를 지원합니다.

알아두세요!
브라우저와 운영 체제에 따라 type 속성 값에 따른 컨트롤의 인터페이스나 스타일이 조금씩 다를 수 있습니다.

브라우저 호환성

input 태그의 type 속성 값의 브라우저 호환성
속성 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
type="button" 1 12 1 1
type="checkbox" 1 12 1 1
type="color" 20 14 29 12.1
type="date" 20 12 53 14.1
type="datetime-local" 20 12 93 14.1
type="email" 5 12 1 5
type="file" 1 12 1 1
type="hidden" 1 12 1 1
type="image" 1 12 1 1
type="number" 7 12 29 5.1
type="password" 1 12 1 1
type="radio" 1 12 1 1
type="range" 4 12 23 3.1
type="reset" 1 12 1 1
type="search" 5 12 4 10.6
type="submit" 1 12 1 1
type="tel" 3 12 1 4
type="text" 1 12 1 1
type="time" 20 12 57 14.1
type="url" 1 12 1 1

<input> 태그는 여러 가지 속성을 가지고 있어서 매우 유용합니다.
그 중에서도 가장 중요한 것은 type 속성으로, 앞서 다양한 예시로 설명했습니다. 모든 <input> 태그는 같은 기본 속성들을 가지고 있지만, 실제로는 특정한 type 속성에만 영향을 미치는 속성들이 많습니다. 또한, 일부 속성은 type 속성에 따라 다르게 작동하기도 합니다.

<input> 태그는 모든 글로벌 속성을 사용할 수 있습니다.

여기에서는 <input> 태그의 주요 속성을 간단히 설명하는 표를 제공하고, 각 속성을 더 자세히 설명하면서 어떤 입력 유형과 관련이 있는지 설명합니다.

input 태그의 속성 설명
속성 관련된 type 속성 설명
accept file 파일 업로드 컨트롤의 허용되는 파일 형식을 지정합니다.
alt image src 속성에 대한 대체 텍스트입니다. src 속성이 누락된 경우에는 alt 속성의 값이 표시되며, 접근성을 위해 필수입니다.
autocapitalize text, search, tel 이 속성은 글로벌 속성입니다.
사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 지정합니다. 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등에만 적용됩니다.
이 속성은 열거형 속성으로 가능한 값은 다음과 같습니다.
  • off 또는 none: 대문자로 바꾸지 않음
  • on 또는 sentences: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자
  • words: 각 단어의 첫 번째 문자를 자동으로 대문자로 표시
  • characters: 모든 문자를 자동으로 대문자로 표시
autocomplete checkbox, radio 그리고 버튼과 관련된 값을 제외한 모든 값 컨트롤 양식에 자동 완성 기능의 사용 여부를 지정합니다.
  • on: 기본값으로, 자동 완성 기능을 사용함
  • off: 자동 완성 기능을 사용하지 않음
checked checkbox, radio 체크박스가 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 체크된 상태로 시작하려면 checked 속성을 사용합니다. 하지만 페이지가 로드된 후 사용자가 체크박스를 체크하거나 체크 해제해도 checked 속성은 변하지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
disabled 모든 값 컨트롤이 비활성된 상태임을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
max date, time, datetime-local, number, range 컨트롤의 최댓값을 지정합니다.
maxlength text, search, url, tel, email, password 허용되는 최대 글자 개수를 지정합니다.
min date, time, datetime-local, number, range 컨트롤의 최솟값을 지정합니다.
minlength text, search, url, tel, email, password 허용되는 최소 글자 개수를 지정합니다.
name 모든 값 컨트롤의 이름을 나타냅니다.
양식이 제출될 때 이 이름이 컨트롤을 식별하는데 사용됩니다.
pattern text, search, url, tel, email, password 컨트롤의 텍스트 값을 검사할 때 사용되는 정규 표현식(regular expression)을 지정합니다.
placeholder text, search, url, tel, email, password, number 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다. 이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.
readonly hidden, range, color, checkbox, radio 그리고 버튼과 관련된 값을 제외한 모든 값 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
required hidden, range, color 그리고 버튼과 관련된 값을 제외한 모든 값 양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
size text, search, url, tel, email, password 컨트롤의 너비를 지정합니다.
이는 0보다 크고 음수가 아닌 유효한 정수여야 합니다. 이 값은 사용자가 볼 수 있도록 허용하는 문자수를 정의합니다.
src image 이미지의 경로를 지정합니다.
step date, time, datetime-local, number, range 컨트롤 숫자 값의 증감 간격을 지정합니다.
value 모든 값 컨트롤의 초깃값을 지정합니다.
단, type="button"이나 type="reset", type="submit"에서는 버튼의 레이블에 사용될 문자열을 지정합니다.

기본 예제

위 표에서 설명한 속성들의 몇 가지 간단한 기본 예제입니다.

checked

체크박스가 기본적으로 선택되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 선택된 상태로 시작하려면 checked 속성을 사용합니다. 하지만 페이지가 로드된 후 사용자가 체크박스를 선택하거나 선택 해제해도 checked 속성은 변하지 않습니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<input type="checkbox" checked>
<input type="radio" checked>
브라우저에서 실제 표시된 모습

disabled

컨트롤이 비활성된 상태임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

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

값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다. 이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.

HTML 
<label for="user-company">회사명</label>
<input type="text" id="user-company" placeholder="(예) 주식회사 가나다">
브라우저에서 실제 표시된 모습

value, min, max, step

value 속성은 컨트롤의 초깃값을 지정합니다.

min 속성은 컨트롤의 최솟값을 지정합니다.

max 속성은 컨트롤의 최댓값을 지정합니다.

step 속성은 컨트롤 숫자 값의 증감 간격을 지정합니다.

HTML 
<label for="user-number">수량 선택</label>
<input type="number" id="user-number" value="4" min="0" max="20" step="2">
브라우저에서 실제 표시된 모습

브라우저 호환성

마지막 업데이트 정보: 2024-06-18

input 태그와 관련된 속성 값의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
accept 1 12 1 1
alt 1 12 1 1
autocapitalize 4 79 111 지원하지 않음
autocomplete 14 79 4 6
checked 1 12 1 1
disabled 1 12 1 1
max 4 12 16 5
maxlength 1 12 1 1
min 4 12 16 5
minlength 40 17 51 10.1
name 1 12 1 1
pattern 4 12 4 5
placeholder 3 12 4 4
readonly 1 12 1 1
required 4 12 4 5
size 1 12 1 1
src 1 12 1 1
step 5 12 16 5

컨트롤 요소란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <button>, <select> 등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

<input>, <textarea>, <select> 태그와 같은 컨트롤 요소를 사용할 때에는 <label>을 함께 사용해야 합니다.
이것은 접근성의 최소 요구 사항입니다.

HTML <label> 태그

단, <input> 태그의 버튼과 관련된 type 값(button, image, reset, submit)은 <label>을 함께 사용하지 않습니다. 이것은 버튼의 텍스트가 <label>을 대신하기 때문입니다.
그리고, 사용자가 화면에서 보지 못하게 숨겨진 입력 필드인 type="hidden"도 <label>을 함께 사용하지 않습니다.

<label> 태그를 컨트롤 요소에 사용하면 좋은 이점

컨트롤 요소에 <label> 태그를 사용하지 않는다고 해서 틀린 문법은 아닙니다. 하지만, <label> 태그를 컨트롤 요소에 연결하는 것은 웹 접근성과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

  • 웹 접근성을 위한 스크린 리더 지원: <label> 태그의 for 속성과 연결된 컨트롤 요소의 id를 매칭하여 매칭된 컨트롤 요소의 이름표라는 것을 명확히 파악하게 해줍니다.
  • 사용자 편의성 증대: <label>을 클릭하면 매칭된 컨트롤 요소가 포커스되거나 접근 가능하게 해줍니다.

<label>과 컨트롤 요소의 연결

<label> 태그와 연결하여 매칭할 컨트롤 요소의 id 값을 <label> 태그의 for 속성의 값으로 지정하면 이 <label> 태그와 컨트롤 요소는 연결되어 매칭하게 됩니다.

HTML 
<!--
    # 매칭할 컨트롤 요소의 id 값인 "user-checking"을
    # label 태그의 for 속성의 값으로 지정했습니다.
-->
<label for="user-checking">저를 클릭하세요.</label>
<input type="checkbox" id="user-checking">

이렇게 연결하면 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.

브라우저에서 실제 표시된 모습 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.

이 방식 외에도, <label> 태그와 연결하여 매칭할 컨트롤 요소의 id 값을 <label> 태그의 for 속성의 값으로 지정하지 않고 다음과 같이 <label> 태그와 매칭할 컨트롤 요소를 연결할 수도 있습니다.

HTML 
<label>
    저를 클릭하세요.
    <input type="checkbox">
</label>
브라우저에서 실제 표시된 모습 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.

위의 두 방식 모두 명세서에서는 유효한 예제로 보여주고 있습니다.

input 태그의 명세서 사양
명세서 사양
<input> HTML Standard
#the-input-element

참고문헌

같이 보기