<input>태그에서 type속성은 그 값에 따라 전혀 다른 폼의 형태를 갖습니다. 오늘은 <input type=''>에 대해서 자세히 알아보겠습니다. 한 번씩 폼을 클릭해보고 입력해보면서 따라가봅시다. 참고로 모든 속성은 아래와 같은 형태를 취합니다.
<input type='값'>type='text'
text는 텍스트를 입력하는 공간을 만듭니다. <input>의 기본 값으로써 한 줄 텍스트를 입력할 수 있게됩니다.
type='password'
password는 텍스트와 비슷하지만 입력 내용이 보여지지 않습니다.
type='search'
search는 검색용 텍스트 필드를 만들어줍니다. 외형적으로는 text와 동일해 보이지만, 입력을 시작하면 필드의 전체 내용을 지울 수 있는 x가 표시됩니다.
type='url'
url은 주소를 입력할 수 있는 텍스트 필드를 만듭니다. 이 역시도 text와의 차이점이 보이지 않는데 이 필드의 특징은 http://로 입력받아야만 내용이 유효하다는 특징을 가집니다.
type='email'
email은 이메일을 입력할 수 있는 필드를 만들어줍니다. 마찬가지로 @가 텍스트에 포함되어야 올바른 입력값으로 판단합니다.
type='tel'
tel은 전화번호 입력 필드를 만들어줍니다. tel은 국가마다 형식이 조금씩 다르기 때문에 따로 유효성 검사를 하지 않고, 전화번호라는 것을 인식시키는 역할을 합니다.
type='number'
number는 숫자를 입력하는 필드입니다. 이 필드의 오른쪽 끝에는 마우스로 숫자를 증감시킬 수 있는 스핀 박스가 생깁니다.
type='range'
range는 슬라이드로 조절할 수 있는 필드입니다.
type='radio'
radio는 라디오 버튼을 만들어줍니다. 라디오 버튼이란 체크로 폼을 입력하는 방식인데, 여러개의 리스트 중에서 단 한 가지만 선택이 가능한 폼입니다.
type='radio'는 name속성과 함께 사용해서 그룹을 묶습니다. 같은 범위에 속하는 라디오 버튼끼리는 같은 name을 갖습니다.
<label><input type='radio' name='test'> 1번 항목</label>
<label><input type='radio' name='test'> 2번 항목</label> 1번 항목
2번 항목
type='checkbox'
checkbox는 체크 박스를 만들어줍니다. 라디오 버튼과 체크 박스의 차이점은 체크 박스는 여러개의 항목을 선택 할 수 있다는 점입니다.
<label><input type='checkbox'> 1번 항목</label>
<label><input type='checkbox'> 2번 항목</label> 1번 항목
2번 항목
type='color'
color는 색상 선택 상자를 만들어줍니다.
type='date, month, week'
이번 type은 날짜에 관한 정보를 입력하는 폼 속성입니다. date는 년-월-일의 정보를 month는 년-월, week는 년-n번째 주의 정보를 표시해줍니다.
type='date'
type='month'
type='week'
type='time, datetime'
시간 정보를 입력하는 폼 속성입니다. time은 시간만을, datetime은 날짜-시간의 정보를 표시합니다.
type='time'
type='datetime'
버튼의 역할을 하는 type 속성들
type='button'
button은 기능없이 버튼 모양만 있는 버튼을 만들어줍니다. <button>태그만 사용했을 때와 차이는 없습니다. button태그처럼 <input>태그는 닫는 태그가 없으므로, value속성으로 버튼에 적힐 글자를 넣습니다.
type='image'
image는 버튼 대신 이미지를 넣습니다. src속성에 지정된 이미지 파일이 버튼의 역할을 합니다.
type='file'
file은 파일을 첨부 할 수 있는 버튼을 만들어줍니다.
type='submit'
submit은 입력한 정보를 서버측으로 넘기는 역할의 버튼을 만들어줍니다. 기본 값으로 제출 혹은 submit이라는 문구가 적혀져있습니다.
type='reset'
reset은 입력한 정보를 기본값으로 초기화 시키는 버튼을 만들어줍니다. 기본 값으로 초기화 혹은 reset이라는 문구가 적혀져있습니다.
