[HTML5] input 요소의 타입 완전 정복

[HTML5] input 요소의 타입 완전 정복

 

 

HTML에서 자주 사용되는 input 요소의 대표적인 타입 목록

 

text   password checkbox radio button submit

 

 

HTML5에서 추가된 input 요소의 타입 목록

 

number (숫자입력) range (입력 범위 지정) email (이메일 입력) tel (전화번호 입력) url (URL 주소 입력) search (검색어 입력) color (색상 입력) date (날짜 입력) month (연도와 월 입력) week (연도와 주 입력) time (시간 입력) datetime (날짜와 시간 입력) datetime-local (날짜와 시간 입력)

 

 

 

---

 

 

예제를 볼 때는 Chrome 브라우저로 보는 것을 권장합니다.

 

 

 

<input type="text">

 

 텍스트 입력(text input)란에 한 줄의 입력 필드를 정의한다.

 

Example

<form>
	이름 : <input type="text" name="name"><br />
	별명 : <input type="text" name="nick">
</form>

---

이름 :
별명 :

 

 

 

<input type="number">

 

숫자 값을 포함해야 하는 입력필드에 사용된다. 

 

숫자의 최소값, 최대값 설정이 가능하며 브라우저에 따라 한계값을 입력 필드에 표시될 수 있다.

 

 

Example

<form>
	나이 : <input type="number" name="age" min="1"><br />
	키 : <input type="number" name="height" max="300">
</form>

---

나이 :
키 :

---

방향키 (↑↓)로 값을 조절할 수 있으며, 한계값 위/밑으로는 조절할 수 없다.

 

 

 

 

<input type="password">

 

password 필드임을 정의하며 필드의 문자는 별표나 동그라미로 표시되어 값이 가려진다.

 

Example

<form>
	아이디 : <input type="text" name="id"><br />
	비밀번호 : <input type="password" name="password">
</form>

---

아이디 :
비밀번호 :

 

 

 

 

<input type="checkbox">

 

 텍스트 입력(text input)란에 한 줄의 입력 필드를 정의한다.

 

Example

<form>
	취미고르기  <br />
	<input type="checkbox" name="climing"> 등산<br />
	<input type="checkbox" name="reading"> 독서<br />
	<input type="checkbox" name="music"> 음악<br />
	<input type="checkbox" name="painting"> 그림그리기<br />
</form>

---

취미고르기
등산
독서
음악
그림그리기

 

 

 

 

<input type="radio">

 

라디오 버튼은 사용자가 제한된 개수의 선택 중 하나 혹은 중복선택이 가능하도록 설정할 수 있다.

 

Example

<form>
	성별 : 
	<input type="radio" name="gender" value="male"> 남
	<input type="radio" name="gender" value="female"> 여
	<input type="radio" name="gender" value="other"> 기타
</form>

---

성별 : 남 여 기타

---

이 때 name 값이 같은 라디오버튼을 하나의 그룹으로 본다.
만약 name이 다르면 다른 그룹으로 판단하여 두 가지 다 선택이 가능하다.

 

 

 

 

<input type="button">

 

버튼임을 정의하며 클릭이벤트는 보통 스크립트에서 구현한다.

 

Example

<form>
	<input type="button" onclick="alert('Hello')" value="클릭해보세요">
</form>

---

 

 

 

 

<input type="range">

 

range 타입은 입력 값의 범위를 설정해줄 때 사용된다.

 

브라우저에 따라 입력 필드가 슬라이드 컨트롤(slider control)으로 표시될 수 있다.

 

Example

<form>
	<input type="range" name="range" min="0" max="10">
</form>

---

 

 

 

 

<input type="email">

 

e-mail 주소를 포함해야 하는 입력필드에 사용된다.

 

브라우저에 따라서 폼을 제출할 때 e-mail 주소를 자동으로 유효성 검사할 수 있다.

 

 

Example

<form>
	E-mail : <input type="email" name="email">
</form>

---

E-mail :

 

 

 

<input type="tel">

 

전화번호를 포함해야하는 입력 필드에 사용된다.

 

Example

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

---

전화번호 :

 

 

 

<input type="url">

 

URL 주소를 포함하는 입력필드에 사용되며, 브라우저에 따라 폼이 제출될 때 URL 필드 값을 자동으로 유효성 검사가 가능하다.

 

Example

<form>
	주소입력 : <input type="url" name="url">
</form>

---

주소입력 :

 

 

<input type="search">

 

검색 필드에 사용되며, 일반 텍스트 필드처럼 동작된다.

 

Example

<form>
	검색 : <input type="search" name="search">
</form>

---

검색 :

 

 

<input type="color">

 

색상을 포함해야 하는 입력 필드에 사용되며, 브라우저에 따라 색상 선택기(color picker)가 표시된다.

 

Example

<form>
	색상 : <input type="color" name="color">
</form>

---

색상 :

 

 

 

<input type="date">

 

사용자가 날짜를 포함해야 하는 입력 필드에 사용되며, 브라우저에 따라 날짜 선택기(date picker)가 표시된다.

 

Example

<form>
	Date : <input type="date" name="date">
</form>

---

Date :

 

 

 

 

<input type="month">

 

사용자가 월과 연도를 선택할 수 있으며, 브라우저에 따라 날짜 선택기(date picker)가 표시된다.

 

Example

<form>
	Month : <input type="month" name="month">
</form>

---

Month :

 

 

 

 

<input type="week">

 

사용자가 주와 연도를 선택할 수 있으며, 브라우저에 따라 날짜 선택기(date picker)가 표시된다.

 

Example

<form>
	Week : <input type="week" name="week">
</form>

---

Week :

 

 

 

<input type="time">

 

사용자가 시간을 선택할 수 있으며, 브라우저에 따라 시간 선택기(time picker)가 표시된다

 

Example

<form>
	시간 : <input type="time" name="time">
</form>

---

시간 :

 

 

 

<input type="datetime">

 

사용자가 날짜와 시간을 (시간대와 함께) 선택할 수 있다

 

Example

<form>
	날짜/시간 : <input type="datetime" name="datetime">
</form>

---

날짜/시간 :

 

 

 

 

<input type="datetime-local">

 

사용자가 날짜와 시간을 (시간대 없이) 선택할 수 있으며, 브라우저에 따라 날짜 선택기(date-picker)가 표시된다.

 

Example

<form>
	날짜/시간 : <input type="datetime-local"" name="datetime-local"">
</form>

---

날짜/시간 :

 

 

 

 

 

input의 기본 속성과 각 타입별 속성은 다음 게시글에서 알아보자.