여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. input 요소
input 요소
2년전 작성
2년전 수정

<input>

input 요소는 사용자에게 데이터를 받을 수 있는 양식을 제공한다.

유형

text

디폴트 값. 한 줄 텍스트 필드. 다음 줄의 텍스트를 입력 값에서 제거된다.

기본 예시

password

암호 입력 한줄 텍스트 필드. 사이트가 안전하지 않을시 사용자에게 경고한다.

기본 예시

tel

전화번호 입력 텍스트 필드. 모바일이나 태블릿 장비에서는 동적 키패드와 숫자 키패드를 표시한다.

기본 예시

url

URL 입력 텍스트 필드. 텍스트 입력 필드처럼 보이지만 기본적인 유효성 검증을 한다.

기본 예시

email

이메일 주소 입력 텍스트 필드. 텍스트 입력 필드처럼 보이지만 기본적인 유효성 검증을 한다. 모바일이나 태블릿 장비에서는 이메일에 적합한 키보드가 표시된다.

기본 예시

number

숫자 입력 텍스트 필드. 텍스트 입력 필드처럼 보이지만 숫자를 키우고 낮출 수 있는 버튼이 표시되며 기본적인 유효성 검증을 한다. 모바일이나 태블릿 장비에서는 동적 키패드와 숫자 키패드를 표시한다.

기본 예시

search

검색어 입력 한 줄 텍스트 필드. 지원 브라우저에서 텍스트 필드를 비우기위한 삭제 아이콘이 포함된다. 모바일이나 태블릿 장비에서는 키보드에 Enter 대신 검색 아이콘이 표시된다.

기본 예시

hidden

보이지 않지만 값은 서버로 전송하는 컨트롤. 예제에 코드를 작성해놓았으나 숨겨놓아서 보이지 않는다.

기본 예시

date

날짜를 지정할 수 있는 컨트롤. 아이콘 클릭시 날짜 선택할 수 있는 달력을 보여준다.

기본 예시

datetime-local

날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 날짜 선택할 수 있는 달력과 시간 선택할 수 있는 시계를 보여준다.

기본 예시

month

연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 년, 월 선택할 수 있는 달력을 보여준다.

기본 예시

week

년도와 몇째주인지 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 년, 월, 주를 선택할 수 있는 달력을 보여준다.

기본 예시

time

시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 시간을 선택할 수 있는 시계를 보여준다.

기본 예시

checkbox

1개 이상의 항목을 선택하거나 선택 해제할 수 있는 체크박스.

checked

특성 값이 없는 불리언 특성. 기본적으로 체크가 되어있게 설정한다.

<input type="checkbox" checked>

이런식으로 사용한다.

기본 예시

radio

같은 name 값을 가진 여러개의 항목 중 하나의 항목을 선택할 수 있는 라디오 버튼.

checked

특성 값이 없는 불리언 특성. 기본적으로 체크가 되어있게 설정한다.

<input type="radio" checked>

이런식으로 사용한다.

기본 예시

image

src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 입력하지 않으면 alt에 기재한 텍스트를 보여준다. alt 기본값 = 제출.

기본 예시

range

값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의합니다.

기본 예시

button

버튼. 기본 행동을 가지지 않으며 value의 기본값이 없으며, value로 레이블을 설정할 수 있다.

기본 예시

submit

양식을 전송하는 버튼. value의 기본값은 제출, value로 레이블을 설정할 수 있다.

기본 예시

file

파일을 지정할 수 있는 컨트롤.

accept

허용하는 파일 유형을 지정할 수 있다.

HTML
<input type="file" accept="image/png, image/jpeg">

이런식으로 사용한다.

유효한 파일 확장자를 입력(확장자 입력시 .(마침표)로 시작하며 대소문자 구분하지 않는다.)하거나 유효한 MIME 유형 문자열을 입력할 수 있다.
예: .jpg, .pdf, .doc , audio/* = “모든 오디오 파일”, video/* = “모든 비디오 파일”, image/* = “모든 이미지 파일”.

capture

어떤 카메라를 이용할지 지정할 수 있다.

capture 특성을 이용하지 않으면 사용자가 직접 선택할 수 있다.

특성값
user
:
전면 카메라와 마이크
environment
:
후면 카메라와 마이크
multiple

특성 값이 없는 불리언 특성. 파일을 여러개 선택할 수 있다.

HTML
<input type="file" multiple>

이런식으로 사용한다.

webkitdirectory

특성 값이 없는 불리언 특성. 디렉토리만 선택할 수 있다.
✔️ 비표준 특성이므로 대안이 없을때만 사용을 권장한다.

multiple과 같이 사용하면 디렉토리를 여러개 선택할 수 있다.

HTML
<input type="file" webkitdirectory multiple>

이런식으로 사용한다.

기본 예시

color

색상 선택기를 열 수 있는 색상 선택 버튼.

기본 예시

reset

양식의 내용을 기본값으로 초기화하는 버튼. 권장하지 않는다.

기본 예시
참고

Mingg`s Diary
밍구
공부 목적 블로그