표
유형 | 설명 | 기본 예제 | Spec |
---|---|---|---|
text (en-US) | 디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다. | ||
password (en-US) | 값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다. | ||
email (en-US) | 이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다. | HTML5 | |
button | 기본 행동을 가지지 않으며 value 을 레이블로 사용하는 푸시 버튼. |
||
file | 파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다. |
||
hidden (en-US) | 보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요! | ||
checkbox (en-US) | 단일 값을 선택하거나 선택 해제할 수 있는 체크박스. | ||
color (en-US) | 색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다. | HTML5 | |
date | 날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다. | HTML5 | |
datetime-local (en-US) | 날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다. | HTML5 | |
image (en-US) | src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여줍니다. |
||
month (en-US) | 연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. | HTML5 | |
number (en-US) | 숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다. | HTML5 | |
radio | 같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다. | ||
range (en-US) | 값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의합니다. | HTML5 | |
reset (en-US) | 양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다. | ||
search (en-US) | 검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다. | HTML5 | |
submit (en-US) | 양식을 전송하는 버튼 | ||
tel (en-US) | 전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다. | HTML5 | |
time (en-US) | 시간대가 없는 시간값을 입력하는 콘트롤 | HTML5 | |
url (en-US) | URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다. | HTML5 | |
week (en-US) | 시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다. | HTML5 |
사용법
<input type="typeName" />
출처
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
728x90