<input>
태그의 속성들<input type="속성값" >
<input>
요소가 나타낼 타입을 명시한다. 기본값은 text
이며 <input>
태그의 필수 속성은 아니지만 항상 명시하는것이 좋다.
checkbox
체크박스(checkbox) 생성
color
색을 선택할 수 있는 입력 필드(color picker)생성
date
날짜를 선택할 수 있는 입력 필드 생성(year, month, day)
datetime-local
날짜와 시간을 선택할 수 있는 입력 필드 생성 (year, month, day, hour, minute)
email
이메일 주소를 입력할 수 있는 입력 필드 생성
올바른 이메일 주소를 입력하지 않았을 시 알림창이 뜬다
file
업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼 생성
accept
을 사용해서 업로드할 파일을 정할 수 있다.
속성값으로
.
으로 시작하는 파일 확장자, audio/*
, video/*
, image/*
, 미디어 타입
을을 사용 가능하다.
hidden
사용자에게는 보이지 않는 숨겨진 입력 필드 생성
image
제출 버튼(submit button)으로 사용될 이미지 생성
type="image"
일때 img
태그와 마찬가지로 alt
,src
, height
, width
속성을 사용할수 있다
month
날짜를 선택할 수 있는 입력 필드 생성 (year, month)
number
숫자를 입력할 수 있는 입력 필드 생성
마우스로 숫자를 키우거나 줄일 수 있다
password
비밀번호를 입력할 수 있는 입력 필드 생성
입력 내용이 사용자에게 보이지 않음
radio
라디오 버튼(radio button)생성
성별처럼 둘 중 하나의 선택지만 고를 때 사용하고, 남성의 label과 여성의 label name속성을 똑같이 gender등으로 정해두면 둘다 선택하는 중복선택이 안되게 할 수 있다.
range
슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드 생성
reset
리셋 버튼(reset button) 생성
search
검색어를 입력할 수 있는 텍스트 필드 생성
submit
제출 버튼(submit button)생성
tel
전화번호를 입력할 수 있는 입력 필드 생성
text
type 속성의 기본값으로, 한 줄로 된 텍스트 필드 생성
time
시간을 선택할 수 있는 입력 필드 생성(hour, minute)
url
URL 주소를 입력할 수 있는 입력 필드 생성
week
날짜를 선택할 수 있는 입력 필드 생성 (year, week)
<input>
태그 안에 쓰는 것으로 그 입력칸에 내용을 입력하지 않으면 브라우저 차원에서 경고와 함께 제출이 되지 않는다.
각각 <input>
요소의 최소, 최대값, 입력할 수 있는 숫자들 사이의 간격을 나타낸다.
<input>
요소의 초깃값(value)을 명시한다.
value 속성은 <input>
요소의 type 속성값에 따라 다른 용도로 사용되는데,
button
, reset
, submit
: 버튼 내의 텍스트를 정의
hidden
, password
, text
: 입력 필드의 초깃값을 정의
checkbox
, image
, radio
: 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의
또한, <input>
요소의 type 속성값이 file
인 경우에는 value 속성을 사용할 수 없다.
boolean 속성
- 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.
boolean속성을 가졌다면 밑에
boolean
으로 표기
<autocomplete="on / off">
boolean
<input>
요소로 이동시킴. boolean
<input>
요소를 명시함.<input>
요소의 type 속성값이 checkbox
또는 radio
인 경우에만 사용할 수 있다.boolean
해당 <input>
요소가 비활성화됨을 명시함.
disabled 속성이 명시된 <input>
요소는 사용할 수 없으며, 사용자가 클릭할 수도 없고, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input>
요소의 데이터는 제출되지 않는다.
특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있다.
해당 <input>
요소가 포함될 하나 이상의 <form>
요소를 명시함.
<input form="(form id)">