HTML <input>: 양식 입력 요소

HTML <input> 요소는 웹 기반 양식에서 사용자의 입력을 받기 위한 상호작용 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터와 위젯을 사용할 수 있습니다. 다양한 유형과 특성의 조합이 가능한 <input>은 HTML에서 가장 강력하면서도 가장 복잡한 요소입니다.

<label for="name">이름 (2 ~ 8글자):</label>
<input type="text"
       id="name"
       name="name"
       maxlength="8"
       minlength="2"
       required
       size="10" />

label {
  display: block;
  margin-bottom: 8px;
}

<input> 유형

<input>의 동작 방식은 type 특성의 값이 많은 부분을 결정합니다. type을 따로 지정하지 않았을 때의 기본 값은 text입니다.

사용 가능한 값은 다음과 같습니다.

특성

<input>의 강력함은 특성이 큰 부분을 차지하고, 그중에서도 바로 위에서 설명한 type 특성이 제일 중요합니다. 모든 <input>은 유형에 관계 없이 HTMLInputElement를 기반으로 하므로, 기술적으로는 모든 유형이 동일한 특성을 공유합니다. 그러나 실제로는, 많은 수의 특성이 특정 type에서만 의미를 가집니다. 더군다나 어떤 특성은 type에 따라 의미가 달라지기도 합니다.

다음은 <input>의 모든 특성과 간단한 설명, 그리고 그 특성을 사용했을 때 효과가 있는 유형을 나열한 표입니다. 특성 각각의 자세한 설명은 문서의 더 아래에서 확인할 수 있습니다.

<input>은 전역 특성을 포함합니다.

개별 특성

accept

file 유형에만 사용할 수 있습니다. 업로드 컨트롤에서 사용자가 선택할 수 있는 파일 유형을 지정합니다.

alt

image 유형에만 사용할 수 있습니다. image의 src가 없거나, 불러오지 못했을 때 대신 보여줄 대체 텍스트입니다.

autocomplete

사용자 에이전트의 자동완성 기능에 제공하는 힌트입니다. HTML autocomplete 특성 문서를 참고하세요.

autocomplete 특성은 숫자나 문자 값을 사용하는 hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, password에 유효하고, checkbox, radio, file, 버튼 유형에는 유효하지 않습니다.

autofocus

페이지 불러오기가 끝나는 순간, 또는 이 입력 칸을 포함한 <dialog> 요소가 보여지는 순간 이 입력 칸으로 포커스를 이동해야 하는지 지정하는 불리언 특성입니다.

autofocus 특성을 포함한 요소는 DOMContentLoaded 이벤트가 발생하기 전에 포커스를 획득할 수도 있습니다.

문서 내에서 단 하나의 요소만 autofocus 특성을 가질 수 있습니다. 두 개 이상의 요소에 지정한 경우 더 앞에 위치한 요소가 포커스를 획득합니다.

hidden 유형에는 포커스를 할 수 없으므로 autofocus도 유효하지 않습니다.

autofocus를 사용한 자동 포커스 이동에는 사전 알림 등이 없으므로 스크린 리더 사용자나 인지력 저하를 겪는 사용자를 방해할 수 있습니다.

autofocus 특성을 적용하기 전에 접근성에 대해 깊게 고려해보세요. 자동으로 포커스를 이동하는 과정에 페이지 스크롤이 발생할 수 있으며, 일부 터치 장치에서는 원하지 않아도 즉시 가상 키보드가 노출될 수 있습니다. 스크린 리더는 포커스를 받은 컨트롤의 레이블은 발화하지만 그 전의 내용은 아무것도 말해주지 않고, 시각에 문제가 없는 사용자라도 작은 화면을 사용하고 있는 경우 이전 내용을 동일하게 놓칠 것입니다.

capture

file 유형에만 사용할 수 있습니다. 지정한 미디어(마이크, 카메라 등)에서 새로운 파일을 캡처해 업로드할 수 있습니다.

checked

checkbox와 radio 유형에 사용할 수 있습니다. 불리언 특성으로, radio에 지정한 경우 같은 이름으로 이루어진 그룹 내에서 이 라디오 버튼을 선택했음을 나타냅니다. checkbox에 지정한 경우 기본적(페이지 로드 시)으로 이 체크박스를 체크한 상태로 지정합니다. checked 특성은 현재 체크 상태를 나타내지 않습니다. 체크박스와 라디오 버튼의 상태가 바뀌어도 checked 콘텐츠 특성은 변화를 반영하지 않습니다. (현재 체크 상태는 HTMLInputElement의 checked IDL 특성이 나타냅니다.)

다른 입력 칸과 달리, 체크박스와 라디오의 값은 checked일 때만 서버로 제출됩니다.

예를 들어, name이 fruit이고 value가 cherry인 체크박스를 체크한 상황이면 양식 데이터에 fruit=cherry를 포함합니다. 그러나 체크박스를 체크하지 않은 상황일 땐 fruit이 양식 데이터에 아예 포함되지 않습니다. 체크박스와 라디오의 기본 value는 on입니다.

dirname

search와 text 유형에 사용할 수 있습니다. 지정하면 요소의 쓰기 방향을 제출 데이터에 포함합니다. 따라서 제출 데이터에는 두 개의 이름/값 쌍이 포함되는데, 첫 번째는 name/value 쌍이고, 두 번째는 dirname/(쓰기 방향에 따라)ltr 또는 rtl입니다.

<form action="page.html" method="post">
  <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry" /></label>
  <button type="submit">제출</button>
</form>

위의 예제 양식을 제출하면 데이터의 fruit은 cherry를, fruit.dir는 (한국어의 기본 쓰기 방향인) ltr을 가지게 됩니다.

disabled

지정할 경우 사용자와의 상호작용을 막는 불리언 특성입니다. 비활성 컨트롤은 사용 불가능하다는 것을 나타내기 위해 더 연한 색상을 사용하는 등 모양이 달라지곤 합니다.

상호작용을 막는다는 것은 컨트롤이 클릭 이벤트를 받지 못하고, 양식 제출 시 컨트롤의 값을 포함하지 않는다는 뜻입니다.

form

이 컨트롤을 양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 컨트롤의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

form 특성을 사용하면 <input>이 <form>의 자손이 아니어도 연결할 수 있으며, form 특성이 가리키는 <form>이 조상 <form>보다 우선합니다.

formaction

image와 submit 유형에 사용할 수 있습니다. 버튼을 클릭했을 때 데이터를 제출할 URL을 지정합니다. 버튼의 양식 소유자에 지정한 action 특성보다 우선합니다. 양식 소유자가 없으면 아무 효과도 없습니다.

formenctype

image와 submit 유형에 사용할 수 있습니다. 버튼을 클릭했을 때, 제출할 데이터를 인코딩하는 방법을 지정합니다. 가능한 값은 다음과 같습니다.

• application/x-www-form-urlencoded: 기본값입니다.
• multipart/form-data: type이 file인 <input>을 제출할 때 사용합니다.
• text/plain: 디버깅 용도로 사용하는 값입니다. 실제 사용자가 제출하는 데이터의 인코딩에는 사용하지 말아야 합니다.

버튼의 양식 소유자에 지정한 enctype 특성보다 우선합니다.

formmethod

image와 submit 유형에 사용할 수 있습니다. 버튼을 클릭했을 때, 제출할 데이터를 전송할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.

• post: 양식의 데이터를 HTTP 요청의 본문에 넣어서 서버로 전송합니다. 로그인 키처럼 공개해선 안되는 정보를 포함해야 할 때 사용하세요.
• get: 양식의 데이터를 action URL 뒤의 쿼리 문자열로 붙여서 서버로 전송합니다. 검색 창처럼 양식이 유발하는 부수효과가 없을 때 사용하세요.
• dialog: 양식이 <dialog> 안에 있을 때, 양식을 제출하면 대화상자를 닫습니다.

버튼의 양식 소유자에 지정한 method 특성보다 우선합니다.

formnovalidate

image와 submit 유형에 사용할 수 있습니다. 버튼을 클릭했을 때, 제출 시 양식의 데이터를 검증하지 않음을 지정하는 불리언 특성입니다. 버튼의 양식 소유자에 지정한 novalidate 특성보다 우선합니다.

formtarget

image와 submit 유형에 사용할 수 있습니다. 버튼을 클릭했을 때, 제출 결과를 표시할 위치를 지정합니다. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름입니다.

다음의 키워드는 특별한 뜻을 가지고 있습니다.

• _self (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.
• _blank: 결과를 새롭게 생성한 이름 없는 브라우징 맥락에 보여줍니다.
• _parent: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 _self와 동일합니다.
• _top: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 _self와 동일합니다.

버튼의 양식 소유자에 지정한 target 특성보다 우선합니다.

height

image 유형에만 사용할 수 있습니다. 이미지의 높이를 지정합니다.

list

추천 선택지 목록을 나타내는 <datalist> 요소의 ID를 지정합니다. <input>의 유형에 사용할 수 없는 선택지는 무시합니다. 추천 선택지는 어디까지나 추천으로, 사용자는 자신이 원하는 다른 값을 직접 입력할 수 있습니다.

text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color 유형에 사용할 수 있습니다.

<datalist> 요소의 예제도 확인해보세요.

max

유효한 최대 값을 지정합니다. 숫자 외의 값은 유효하지 않으며, 지정해도 최대 값을 설정하지 않습니다.

초과하는 값을 받은 경우 <input>은 제약 검증을 통과하지 못합니다.

date, month, week, time, datetime-local, number, range 유형에 사용할 수 있습니다.

maxlength

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

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

text, search, url, tel, email, password 유형에 사용할 수 있습니다.

min

유효한 최소 값을 지정합니다. 숫자 외의 값은 유효하지 않으며, 지정해도 최대 값을 설정하지 않습니다.

미달하는 값을 받은 경우 <input>은 제약 검증을 통과하지 못합니다.

date, month, week, time, datetime-local, number, range 유형에 사용할 수 있습니다.

minlength

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

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

text, search, url, tel, email, password 유형에 사용할 수 있습니다.

multiple

email과 file 유형에 사용할 수 있습니다. 불리언 특성으로, 지정할 경우 email의 경우 여러 이메일 주소를 쉼표로 구분해서 입력할 수 있고, file의 경우 여러 파일을 한꺼번에 선택할 수 있습니다.

name

컨트롤의 이름을 지정합니다. 양식을 제출할 때 값과 함께 이름/값 쌍을 구성합니다. 비록 명세 상으로는 name이 필수 특성은 아니지만, 지정하지 않으면 양식 제출 데이터에 포함되지 않으므로 필수로 간주해도 무리가 없습니다.

name에는 두 가지 특별한 값을 제외하면 아무 문자열이나 지정할 수 있습니다.

1. __charset__: type="hidden"인 <input>에 지정하면, 사용자 에이전트가 자동으로 value를 양식 제출 시 사용한 문자 인코딩으로 설정합니다.
2. isindex: 역사적인 이유로 사용할 수 없습니다.

pattern

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

유효하지 않은 값을 지정한 경우 무시합니다. text, search, url, tel, email, password 유형에 사용할 수 있습니다.

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

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

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다. 예컨대 레이블이 "이름"인 텍스트 입력 칸의 placeholder에 어울리는 값은 "김철수"입니다.

text, search, url, tel, email, password, number 유형에 사용할 수 있습니다.

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

readonly

불리언 특성입니다. 지정하면 사용자가 값을 편집할 수 없습니다.

text, search, url, tel, email, date, month, week, time, datetime-local, number, password 유형에 사용할 수 있습니다.

required

불리언 특성입니다. 양식을 제출하려면 사용자가 반드시 이 <input>에 값을 입력해야 합니다.

text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, file 유형에 사용할 수 있습니다.

size

입력 칸의 크기를 한 번에 보여줄 글자의 수로 지정합니다. 0보다 큰 정수만 지정할 수 있으며 기본 값은 20입니다. 글꼴마다 글자의 너비가 다르고, 문자끼리의 너비도 서로 다르므로 이 특성으로는 정확한 너비를 설정할 수 없습니다. size 특성 대신 CSS width 속성을 사용하세요.

email, password, tel, text 유형에 사용할 수 있습니다.

src

image 유형에만 사용할 수 있습니다. 제출 버튼의 이미지로 사용할 파일의 URL을 지정합니다.

step

입력 가능한 값의 간격입니다. 지정하지 않을 경우,

• number와 range 유형에서의 기본 값은 1입니다.
• time 유형에서의 기본 값은 기본 값은 1초입니다.
• date 유형에서의 기본 값은 1일입니다.
• week 유형에서의 기본 값은 1주입니다.
• month 유형에서의 기본 값은 1월입니다.

step 특성의 값은 양의 실수여야 하며, 간격을 지정하지 않음을 뜻하는 키워드인 any도 지정할 수 있습니다.

any 값을 명시하지 않은 경우, 단계에 일치하지 않는 값은 유효하지 않습니다. 예를 들어 <input type="number">에서는 모든 정수가 유효하지만, step의 기본 값이 1이므로 그 외의 실수(4.2 등)는 유효하지 않습니다. 4.2를 유효한 값으로 받으려면 step에 any를 명시하거나, 0.1과 0.2처럼 4.2에 도달할 수 있는 단계를 지정하거나, min을 -5.2처럼 .2로 끝나는 값을 지정해야 합니다.

사용자가 입력한 값이 단계에서 벗어날 경우 유효하지 않은 입력 칸으로 취급하여 CSS :invalid 의사 클래스와 일치합니다.

date, month, week, time, datetime-local, number, range 유형에 사용할 수 있습니다.

type

렌더링할 컨트롤의 유형을 지정하는 문자열입니다. 예를 들어 체크박스를 생성하려면 type 특성에 checkbox를 사용합니다. 지정하지 않았거나 알 수 없는 값을 지정한 경우 text 유형을 보여줍니다.

가능한 유형은 위의 <input> 유형에서 볼 수 있습니다.

value

컨트롤의 값입니다. HTML 코드에서 명시한 경우 컨트롤의 초기 값으로 사용합니다. 그 후에는 JavaScript를 사용해 HTMLInputElement의 value 속성으로 값을 알아내거나 바꿀 수 있습니다. value 특성은 명세 상 필수가 아니지만, checkbox, radio, hidden 유형에서는 필수 특성으로 취급해야 합니다.

width

image 유형에만 사용할 수 있습니다. 이미지의 너비를 지정합니다.

접근성 고려사항

레이블

<input>의 용도를 설명하는 레이블은 접근성 필수사항입니다. <input>에 입력해야 하는 값을 <label> 요소로 사용자에게 설명해 주세요.

연관 레이블

스크린 리더 등 보조 기술에서 서로 짝지어진 <input>과 <label> 요소를 유용하게 사용합니다. <label> 요소의 for 특성은 레이블을 입력 칸에 연결해서, 보조 기술이 해당 입력 칸을 보다 정확히 설명할 수 있도록 도와줍니다.

단순히 입력 칸 옆에 일반 텍스트를 배치하는 것으로는 충분하지 않습니다. 사용성과 접근성을 위해서는 명시적 또는 암시적인 레이블이 필요합니다.

<p>이름을 입력하세요: <input id="name" /></p>

위의 코드에서는 <input>과 "이름을 입력하세요" 텍스트 사이에 아무런 관계도 설정하지 않았으므로 접근성이 떨어집니다.

<!-- 암시적 레이블 -->
<p>
  <label>이름을 입력하세요: <input id="name" /></label>
</p>

<!-- 명시적 레이블 -->
<p>
  <label for="name">이름을 입력하세요: <input id="name" /></label>
</p>

이름 외에도, <label> 요소는 마우스와 터치 스크린에서 입력 칸을 선택할 수 있는 더 넓은 "히트" 영역을 제공합니다. <label>을 클릭해도 연결된 <input>에 포커스가 가기 때문입니다.

웹 개발자로서, 사용자가 우리의 의도를 알아줄 것이라고 기대하는 것은 금물입니다. 웹에는 다양한 사람이 있으며, 각자 생각하는 방법도 그만큼 다양할 것이므로, 분명하고 뚜렷하게 나타낸 레이블 없이는 양식의 칸이 가지는 의미 또한 사용자마다 다르게 해석할 가능성이 있습니다.

플레이스홀더는 접근성이 떨어짐

placeholder 특성은 <input> 요소의 콘텐츠 영역이 비어있을 때 보여줄 텍스트를 지정할 수 있습니다. 그러나 플레이스홀더는 레이블이 아니므로 레이블 대신 사용해서는 안됩니다. 플레이스홀더는 입력할 값의 형태를 보여주는 텍스트로, 설명을 제공할 용도가 아닙니다.

스크린 리더는 플레이스홀더를 읽지 못할 뿐더러, 사용자가 입력 칸에 값을 입력하거나 처음부터 양식에 이미 값이 지정된 경우 사용자는 플레이스홀더를 볼 수 없습니다. 또한 자동 번역 기능을 제공하는 브라우저에서 플레이스홀더는 번역 대상에 포함되지 않을 수 있습니다.

placeholder 특성을 피할 수 있다면 피하세요. 레이블이 필요하면 <label>을 사용해야 합니다.

크기

입력 칸과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 운동조절 장애를 가진 사용자뿐만 아니라 터치 스크린처럼 정확하지 않은 입력 도구 사용자도 충분한 활성화 영역 크기에 도움을 받습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.

명세

HTML Living Standard

브라우저 호환성