HTML] <input>태그의 type 속성 유형

<input type="속성값" ……>

hidden : 사용자에게 보이지 않으나, 서버로 넘겨지는 값 가지는 필드

- 예를 들어 회원가입 폼에서 사용자가 입력하지 않아도 되는 정보를 서버로 넘길 때 사용하는 폼

- name 속성으로 필드 이름 지정, value 속성으로 서버로 넘김

<input type="hidden" name="이름" value="서버로 넘길 값">

text : 텍스트 상자, 한 줄 입력

- ID, 이름, 주소 등 텍스트 입력 시 주로 사용

- name(필드 이름), size(필드 길이), value(필드 부분에 표시될 내용), maxlength(최대 문자 개수)

<label>이름<input type="text" size="20" value="이름"></label>

search : 검색 상자 삽입

- HTML5에서 추가된 별도 속성

<input type="search" ……>

url : URL 입력 필드 삽입

- HTML5에서 요소가 분화함.

password : password 입력 필드 삽입

- value 속성이 없는 것을 제외하고 일반 텍스트 필드와 동일

<label>비밀번호<input type="password size="10"></label>

email : 메일 주소 입력 필드

- HTML5에서는 자바스크립트를 이용한 '@' 탐색과정 없이 손쉽게 이메일 필드 형성 가능

<label>이메일주소 : <input type="email"></label>

tel : 전화번호 입력 필드

- 일반 텍스트가 아니라 전화번호임을 명시하기 위한 것 텍스트 필드 기반이라 속성은 동일함

<label>전화번호 : <input type="tel"></label>

number, range는 공통의 속성을 사용한다.

- min, max를 통해 최솟값, 최댓값 지정 가능함, 기본값은 0

- value를 통해 필드에 표시할 초기값 설정 가능

- step : 짝수, 홀수 등으로 특정 숫자 제한할 경우 사용, 숫자 간격 지정 가능하며 기본값은 1, 생략 가능

number : 숫자 입력(스핀 박스 이용)

- HTML5에서 스핀 박스를 이용해 숫자입력이 가능하게 만듦

- 쇼핑몰 주문수량 설정탭에 활용

<label>주문수량 : <input text="number" min="1" max="5" value="1"> 박스(1인당 최대 5박스)</label>

range : 숫자 입력(슬라이드 막대 이용)

- HTML5에서 슬라이드막대를 이용해 숫자입력 가능하게 만듦

- 음량조절하는 것과 유사함

<label>음량(1~3단계) : <input text="range" min="1" max="5" value="1"></label>

radio : 여러 항목 중 하나만 선택 가능한 버튼

- name은 버튼의 구분을 위해 존재함. 관련 있는 것이라면 그룹으로 묶을 것. 같은 그룹일 경우 name 동일.

- value를 통해 서버에 해당 항목이 선택되었음을 알려줌. 영문 혹은 숫자로 구성하며 반드시 필요함.

- checked속성 사용 시 처음에 해당 항목이 선택된 상태로 표시됨.

<p>동의하십니까?</p>

<label><input type="radio" value="yes" name="agreement">동의함</label>

<label><input type="radio" value="no" name="agreement">동의하지 않음</label>

checkbox : 항목 중 여러 가지 선택 가능한 버튼

- name은 버튼의 구분을 위해 존재함. 관련이 있어도 그룹으로 묶을 필요는 없음.

- value를 통해 서버에 해당 항목이 선택되었음을 알려줌. 영문 혹은 숫자로 구성하며 반드시 필요함.

- checked속성 사용 시 처음에 해당 항목이 선택된 상태로 표시됨.

<p>사용 중인 SNS(소셜네트워크서비스)는?</p>

<label><input type="checked" value="tw">트위터</label>

<label><input type="checked" value="fb">페이스북</label>

<label><input type="checked" value="ins">인스타그램</label>

<label><input type="checked" value="ks">카카오스토리</label>

color : 색상표에서 색상 선택이 가능하게 해주는 필드

- 현재 지원하지 않는 브라우저가 있어 호환성이 떨어지는 편.

- value를 통해 기본 색상 지정 가능하며, 값은 16진수값으로 표시해야함.

<label>원하는 색상 : <input type="color" value=" "></label>

네이버에 색상값을 검색할 경우, 원하는 색상의 16진수값을 알려준다.

datetime, datetime-local : 날짜와 시간 표시

- datetime은 국제표준시(UTC; Universal Time Coordinated) 기준으로 날짜와 시간을 표시

- datetime-local은 지역의 날짜와 시간을 표시

<input type="datetime" ……>

<input type="datetime-local"……>

date, month, week : 날짜 표기법

- date로 지정할 경우, yyyy-mm-dd 형식으로 연월일 표기

- month로 지정할 경우, yyyy-mm 형식으로 연월 표기

- week로 지정할 경우, yyyy-Www  형식으로 연주 표기

<p>조회기간 선택</p>

<label><input type="date" id="start"></label>

<label><input type="date" id="end"></label>

time : 시간 지정, 스핀 박스가 지정됨

- min, max로 날짜, 시간의 최솟값, 최댓값 설정

- step으로 스핀박스 화살표마다 증감량 설정

- value를 통해 화면에 표시할 초깃값 설정

<p>원하는 대여시간 설정</p>

<label>시작<input type="time" value="09:00" id="start"></label>

<label>끝<input type="time" value="18:00" id="end"></label>

file : 폼에 파일 첨부할 경우 사용하며, '파일 선택', '찾아보기', '선택'등으로 필드가 표시됨

- 웹브라우저에 따라 폼의 형태와 첨부파일에 대한 내용표시가 달라짐

<label> 첨부파일 선택:<input type="file"……></label>

submit : 사용자가 입력한 정보 서버로 전송하는 버튼 생성

- value속성을 활용해 submit 버튼에 표시할 내용 지정할 수 있음

- submit 버튼으로 전송된 정보는 처음 <form>태그에서 지정한 폼처리 프로그램으로 넘겨짐

<p>메일링 리스트</p>

<label> 메일 주소 : <input type="submit" value="제출"……></label>

reset : input요소에 입력된 정보 모두 리셋해 사용자가 입력한 내용 전부 삭제 가능

- value 속성을 사용해 버튼에 표시할 내용 저장

<p>메일링 리스트</p>

<label> 메일 주소 : <input type="submit" value="제출"……> <input type="reset" value="다시입력"……></label>

image : submit 버튼 대신 대체할 이미지 버튼이 존재할 경우 사용

- 이미지파일을 버튼으로 활용하여 디자인에 용이

- submit버튼과 동일해 입력한 정보 폼을 처리하는 프로그램으로 전송

<input type="image" src="이미지 경로" alt="대체 텍스트" ……>

button : submit, reset 같은 자체 기능이 없는 버튼

- 기능은 존재하지 않고 버튼이라는 틀만 존재하므로 스크립트 함수 등을 연결해 사용

- value 속성으로 버튼에 표시할 내용 저장

<input type="button" value="내용" ……>