<input>
<input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다.
<input>
<input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 요소(Inline Element) |
| 닫는 태그 | Self-Closing(<input />) |
| 버전 | HTML4 |
정의(Definition)
- <input> 태그는 사용자가 입력하는 컨트롤은 <form> 태그 안에 설정합니다.
- <input> 태그는 반드시 속성 값을 설정합니다
접근성(Accessibility)
- <input> 태그에는 <label> 요소가 설정되어 있어야 합니다. 레이블을 추가하면 화면 판독기를 어떤 Input인지 확인 할 수 있습니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| accept | file_extension audio/* video/* image/* media_type |
<input> 요소가 서버에 수락할 수 있는 유형을 설정합니다. | - |
| align | left right top middle bottom |
<input> 요소를 왼쪽으로 정렬합니다. <input> 요소를 오른쪽으로 정렬합니다. <input> 요소를 위쪽으로 정렬합니다. <input> 요소를 가운데로 정렬합니다. <input> 요소를 아래쪽을 정렬합니다. |
 |
| alt | alt="text" | <input> 요소가 이미지의 경우 대체 문자를 설정합니다. | - |
| autocomplete | autocomplete="on" autocomplete="off" |
<input> 요소의 자동 완성 기능을 사용 할 수 있을지 설정합니다. |  |
| autofocus | autofocus | 페이지가 로드되면 자동을 포커스를 오도록 설정합니다. | |
| checked | checked | <input> 요소를 유형이 checkbox, radio의 경우 체크를 표시할 수 있습니다. | - |
| dirname | dirname="name.dir" | <input> 요소의 입력 필드 텍스트 방향을 설정합니다. | |
| disabled | disabled | <input> 요소를 비활성화되도록 설정합니다. | - |
| form | form="form_id" | <input> 요소의 양식 요소를 지정합니다. 이 속성의 값은 id로 설정합니다. | |
| formaction | formaction="URL" | <input> 요소의 양식이 제출 될 때 입력 컨트롤을 처리 할 파일의 URL을 설정합니다. | |
| formenctype |
formenctype="application/x-www-form-urlencoded" formenctype="multipart/form-data" formenctype="text/plain" |
<input> 요소의 양식이 제출 할 때 양식 데이터 인코딩하는 방법을 설정합니다. | |
| formmethod |
formmethod = "get" formmethod = "post" |
데이터를 보낼 때 get 방식을 보냅니다. 데이터를 보낼 때 post 방식을 보냅니다. |
|
| formnovalidate | formnovalidate = "formnovalidate" | <input> 요소의 양식을 제출 할 때 유효성 검증을 하지 않습니다. | |
| formtarget | _blank _self _parent _top framename |
<input> 요소의 양식을 제출 한 후 수신된 응답을 표시할 위치를 설정합니다. | |
| height | height = "pixels" | <input> 요소의 유형이 image인 경우 세로 값을 설정합니다. | |
| list | list = "datalist의 ID" | <input> 요소의 미리 설장한 <datalist> 요소를 보여줍니다. | |
| max | max = "number/data" | <input> 요소의 최대 값을 설정합니다. | |
| maxlength | maxlength = "number" | <input> 요소의 허용되는 최대 문자 수를 설정합니다. | |
| min | min = "number/data" | <input> 요소의 최소 값을 설정합니다. | |
| multiple | multiple | 사용자가 <input> 요소에 둘 이상의 값을 입력 할 수 있도록 설정합니다. | |
| name | name = "text" | <input> 요소의 이름을 설정합니다. | - |
| pattern | pattern = "정규식표현(regexp)" | <input> 요소의 값을 검사하는 정규식을 설정합니다. | |
| placeholder | placeholder = "text" | <input> 요소의 미리보기 텍스를 설정합니다. | |
| readonly | readonly | <input> 요소의 입력 필드가 오직 읽을 수만 있습니다. | - |
| required | required | <input> 요소의 입력 필드가 필수적을 작성해야 합니다. | |
| size | size = "number" | <input> 요소의 폭을 문자로 설정합니다. | - |
| src | src = "이미지 경로" | <input> 요소의 type="image"인 경우 경로를 설정합니다. | - |
| step | step = "number" | <input> 요소의 유효한 번호 간격을 지정합니다. | |
| type |
type = "button" type = "checkbox" type = "color" type = "date " type = "datetime-local " type = "email" type = "file" type = "hidden" type = "image" type = "month" type = "number" type = "password" type = "radio" type = "range" type = "reset" type = "search" type = "submit" type = "tel" type = "text" type = "time" type = "url" type = "week" |
<input> 요소의 유형을 버튼으로 설정합니다. <input> 요소의 유형을 체크박스로 설정합니다. <input> 요소의 유형을 컬러 선택으로 설정합니다. <input> 요소의 유형을 날짜(year, month, day) 선택으로 설정합니다. <input> 요소의 유형을 시간(year, month, day, time) 선택으로 설정합니다. <input> 요소의 이메일 주소의 필드를 설정합니다. <input> 요소의 파일 업로드 버튼을 설정합니다. <input> 요소의 필드를 숨깁니다. <input> 요소의 이미지 버튼을 설정합니다. <input> 요소의 월과 년도를 설정합니다. <input> 요소의 숫자를 입력하기 위한 필드를 설정합니다. <input> 요소의 패스워드 필드 설정합니다. <input> 요소의 패스워드 라디오 버튼을 설정합니다. <input> 요소의 범위 선택 버튼을 설정합니다. <input> 요소의 범위 리셋 버튼을 설정합니다. <input> 요소의 문자를 입력하기 위한 검색 텍스트 필드를 설정합니다. <input> 요소의 데이터 전송 버튼을 설정합니다. <input> 요소의 전화번호를 입력하기 위한 필드를 설정합니다. <input> 요소의 텍스트를 입력하기 위한 필드를 설정합니다. <input> 요소의 시간을 입력하기 위한 컨트롤을 설정합니다. <input> 요소의 URL 입력하기 위한 컨트롤을 설정합니다. <input> 요소의 주(week)와 년도를 설정합니다. |
- - - - - - - - - - |
| value | value = "text" | <input> 요소의 속성 값을 설정합니다. | - |
| width | width = "pixels" | <input> 요소의 유형이 image인 경우 가로 값을 설정합니다. | |
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type = "button" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "checkbox" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "color" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| type = "date" | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| type = "datetime-local" | 사용가능 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| type = "email" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "file" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "hidden" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "image" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "month" | 사용가능 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| type = "number" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "password" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "radio" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "range" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "reset" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "search" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "submit" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "tel" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "text" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "time" | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
| type = "url" | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| type = "week" | 사용가능 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
