HTML <input> 태그는 폼(form) 안에서 사용자가 데이터를 입력할 수 있는 입력 요소를 선언할 때 사용합니다. 텍스트 박스, 체크박스, 라디오 버튼, 파일 업로드 창 등 다양한 형태의 입력 컨트롤을 하나의 태그로 만들 수 있는 것이 특징입니다.
<input> 태그의 주요 속성
<input> 태그와 함께 사용할 수 있는 주요 속성은 다음과 같습니다. (HTML5)로 표시된 속성은 HTML5에서 새롭게 도입된 것입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| accept | 콘텐츠 유형 | 서버가 허용하는 콘텐츠 유형을 쉼표로 구분하여 지정합니다. |
| align | left / right / top / middle / bottom | |
| alt | 텍스트 | 브라우저나 사용자 에이전트가 입력 컨트롤을 렌더링하지 못할 때 대신 표시할 텍스트를 지정합니다. |
| autocomplete (HTML5) | on / off | <input> 요소의 자동 완성 기능을 활성화하거나 비활성화합니다. |
| autofocus (HTML5) | autofocus | 페이지가 로드될 때 해당 <input> 요소가 자동으로 포커스를 받도록 지정합니다. |
| checked | checked | type="radio" 또는 type="checkbox"일 때, 페이지가 로드되는 시점에 이미 선택된 상태로 표시됩니다. |
| disabled | disabled | 입력 컨트롤을 비활성화합니다. 사용자가 값을 변경할 수 없으며, 포커스를 받지 못하고 Tab 키 이동 시에도 건너뛰어집니다. |
| form (HTML5) | form_id | 해당 입력 요소가 속한 하나 이상의 폼을 지정합니다. |
| formaction (HTML5) | URL | 폼이 제출될 때 입력 데이터를 처리할 파일의 URL을 지정합니다. |
| formenctype (HTML5) | application/x-www-form-urlencoded multipart/form-data text/plain | 폼 데이터를 서버로 전송할 때 사용할 인코딩 방식을 지정합니다. |
| formmethod (HTML5) | post / get | action URL로 데이터를 전송할 때 사용할 HTTP 메서드를 정의합니다. |
| formnovalidate (HTML5) | formnovalidate | 폼 제출 시 요소들의 유효성 검사를 수행하지 않도록 정의합니다. |
| formtarget (HTML5) | _blank / _self / _parent / _top | 폼 제출 후 서버로부터 받은 응답을 표시할 위치(대상)를 지정합니다. |
| height (HTML5) | 픽셀 | 입력 컨트롤의 높이를 지정합니다. |
| list (HTML5) | datalist_id | <input> 요소에 미리 정의된 옵션 목록을 제공하는 <datalist> 요소를 연결합니다. |
| max (HTML5) | 숫자 / 날짜 | 허용되는 최댓값을 지정합니다. |
| maxlength | 숫자 | 텍스트 필드에 입력할 수 있는 최대 문자 수를 정의합니다. |
| min (HTML5) | 숫자 / 날짜 | 허용되는 최솟값을 지정합니다. |
| multiple (HTML5) | multiple | 사용자가 여러 개의 값을 입력할 수 있도록 허용합니다. |
| name | 텍스트 | 입력 컨트롤에 고유한 이름을 부여합니다. |
| pattern (HTML5) | 정규식(regexp) | <input> 요소의 값이 검사될 정규 표현식을 지정합니다. |
| placeholder (HTML5) | 텍스트 | 사용자가 입력해야 할 값을 알려주는 짧은 힌트를 표시합니다. |
| readonly | readonly | 입력 컨트롤을 읽기 전용으로 설정합니다. 사용자는 값을 수정할 수 없지만, 포커스를 받을 수 있고 Tab 키 이동 시에도 포함됩니다. |
| required (HTML5) | required | 폼을 제출하기 전에 반드시 입력해야 하는 필수 필드임을 지정합니다. |
| size | 숫자 | 컨트롤의 너비를 지정합니다. type="text" 또는 type="password"인 경우 문자 수 단위이며, 그 외의 경우 픽셀 단위입니다. |
| src | URL | 표시할 이미지의 URL을 정의합니다. type="image"일 때만 사용됩니다. |
| step (HTML5) | 숫자 | 입력 필드에서 유효한 숫자 간격을 지정합니다. |
| type | button / checkbox / color / date / datetime-local / email / file / hidden / image / month / number / password / radio / range / reset / search / submit / tel / text / time / url / week | 생성할 입력 컨트롤의 유형을 지정합니다. |
| value | 텍스트 | 컨트롤의 초기값을 지정합니다. type="checkbox" 또는 type="radio"인 경우 이 속성은 필수입니다. |
| width (HTML5) | 픽셀 | 입력 컨트롤의 너비를 지정합니다. |
예제 코드
다음 코드를 실행하면 HTML에서 <input> 요소를 실제로 구현한 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML input Tag</title>
</head>
<body>
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
마무리 팁
위 예제처럼 <input> 태그는 type 속성 값에 따라 완전히 다른 형태로 동작합니다. 또한 name 속성을 지정해야 서버로 전송되는 데이터를 구분할 수 있으므로, 폼을 작성할 때는 항상 name 속성을 함께 넣어 주는 것이 좋습니다.