본문 바로가기

Webstoryboy

Category

Explanation

HTML

[HTML] <input>

<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> 요소를 아래쪽을 정렬합니다.
html5
alt alt="text" <input> 요소가 이미지의 경우 대체 문자를 설정합니다. -
autocomplete autocomplete="on"
autocomplete="off"
<input> 요소의 자동 완성 기능을 사용 할 수 있을지 설정합니다. html5
autofocus autofocus 페이지가 로드되면 자동을 포커스를 오도록 설정합니다. html5
checked checked <input> 요소를 유형이 checkbox, radio의 경우 체크를 표시할 수 있습니다. -
dirname dirname="name.dir" <input> 요소의 입력 필드 텍스트 방향을 설정합니다. html5
disabled disabled <input> 요소를 비활성화되도록 설정합니다. -
form form="form_id" <input> 요소의 양식 요소를 지정합니다. 이 속성의 값은 id로 설정합니다. html5
formaction formaction="URL" <input> 요소의 양식이 제출 될 때 입력 컨트롤을 처리 할 파일의 URL을 설정합니다. html5
formenctype formenctype="application/x-www-form-urlencoded"
formenctype="multipart/form-data"
formenctype="text/plain"
<input> 요소의 양식이 제출 할 때 양식 데이터 인코딩하는 방법을 설정합니다. html5
formmethod formmethod = "get"
formmethod = "post"
데이터를 보낼 때 get 방식을 보냅니다.
데이터를 보낼 때 post 방식을 보냅니다.
html5
formnovalidate formnovalidate = "formnovalidate" <input> 요소의 양식을 제출 할 때 유효성 검증을 하지 않습니다. html5
formtarget _blank
_self
_parent
_top
framename
<input> 요소의 양식을 제출 한 후 수신된 응답을 표시할 위치를 설정합니다. html5
height height = "pixels" <input> 요소의 유형이 image인 경우 세로 값을 설정합니다. html5
list list = "datalist의 ID" <input> 요소의 미리 설장한 <datalist> 요소를 보여줍니다. html5
max max = "number/data" <input> 요소의 최대 값을 설정합니다. html5
maxlength maxlength = "number" <input> 요소의 허용되는 최대 문자 수를 설정합니다. html5
min min = "number/data" <input> 요소의 최소 값을 설정합니다. html5
multiple multiple 사용자가 <input> 요소에 둘 이상의 값을 입력 할 수 있도록 설정합니다. html5
name name = "text" <input> 요소의 이름을 설정합니다. -
pattern pattern = "정규식표현(regexp)" <input> 요소의 값을 검사하는 정규식을 설정합니다. html5
placeholder placeholder = "text" <input> 요소의 미리보기 텍스를 설정합니다. html5
readonly readonly <input> 요소의 입력 필드가 오직 읽을 수만 있습니다. -
required required <input> 요소의 입력 필드가 필수적을 작성해야 합니다. html5
size size = "number" <input> 요소의 폭을 문자로 설정합니다. -
src src = "이미지 경로" <input> 요소의 type="image"인 경우 경로를 설정합니다. -
step step = "number" <input> 요소의 유효한 번호 간격을 지정합니다. html5
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)와 년도를 설정합니다.
-
-
html5
html5
html5
html5
-
-
-
html5
html5
-
-
html5
-
html5
-
html5
-
html5
html5
html5
value value = "text" <input> 요소의 속성 값을 설정합니다. -
width width = "pixels" <input> 요소의 유형이 image인 경우 가로 값을 설정합니다. html5

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
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" 사용가능 사용안됨 사용안됨 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기