HTML 입문 | HTML 입력 양식 (Forms) | HTML 입력(input) 요소 타입(type)
입력(input) 요소 타입(type)
form 요소는 다양한 타입의 input 요소를 포함할 수 있다.
HTML에서 자주 사용되는 input 요소의 대표적인 타입은 다음과 같다.
- text
- password
- submit
- reset
- image
- button
- radio
- checkbox
- file
HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다.
- 숫자 입력(number)
- 입력 범위 지정(range)
- 색상 입력(color)
- 날짜 입력(date)
- 시간 입력(time)
- 날짜와 시간 입력(datetime-local)
- 연도와 월 입력(month)
- 연도와 주 입력(week)
- 이메일 입력(email)
- URL 주소 입력(url)
- 전화번호 입력(tel)
- 검색어 입력(search)
텍스트 입력 - text
<input> 태그의 type 속성값을 “text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.
<form>
제목 : <input type="text" name="title">
</form>
비밀번호 입력 - password
<input> 태그의 type 속성값을 “password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.
비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표(*)나 작은 원 모양(•)이 표시된다.
<form>
사용자명 : <input type="text" name="username"><br/>
비밀번호 : <input type="password" name="password">
</form>
전송 버튼 - submit
<input> 태그의 type 속성값을 “submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼이 된다.
폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 사이드의 웹 페이지를 의미한다.
이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.
<form action="/">
사용자명 : <input type="text" name="username"><br/>
<input type="submit" value="전송">
</form>
재설정 버튼 - reset
<input> 태그의 type 속성값을 “reset"으로 설정하면, 사용자가 입력한 값이 초기 값으로 재설정하는 버튼이 된다.
<form action="/">
사용자명 : <input type="text" name="username" value="개발곰"><br/>
<input type="reset" value="재설정">
</form>
이미지 버튼 - image
<input> 태그의 type 속성값을 “image"으로 설정하면, 전송버튼(Submit Button)의 역할을 하면서 이미지로 출력되는 버튼이 된다.
<form action="/">
사용자명 : <input type="text" name="username"><br/>
<input type="image" src="/resources/images/logo/64x64.png">
</form>
전송버튼이 아닌 일반적인 버튼을 이미지로 처리할려면 <img> 태그를 사용하고 이를 자바스크립트를 이용하여 액션을 지정해야 한다.
일반 버튼 - button
<input> 태그의 type 속성값을 “button"으로 설정하면, 일반적인 버튼이 된다.
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
button은 <button> 태그로도 표현이 가능하다. 참조
라디오 버튼 - radio
<input> 태그의 type 속성값을 “radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.
이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.
<input type="radio" name="fruit" value="apple" checked> 사과
<input type="radio" name="fruit" value="banana"> 바나나
<input type="radio" name="fruit" value="orange"> 오렌지
<input type="radio" name="fruit" value="strawberry"> 딸기
체크박스 - checkbox
<input> 태그의 type 속성값을 “checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.
체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.
이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.
<input type="checkbox" name="fruit" value="apple" checked> 사과
<input type="checkbox" name="fruit" value="banana"> 바나나
<input type="checkbox" name="fruit" value="orange"> 오렌지
<input type="checkbox" name="fruit" value="strawberry"> 딸기
파일 선택 - file
<input> 태그의 type 속성값을 “file"로 설정하면, 파일을 전송할 수 있다.
<input type="file" name="imageFile" accept="image/*">
숫자 입력(number)
<input> 태그의 type 속성값을 “number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.
number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.
브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.
<input type="number" name="num" min="1" max="9">
number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
입력 범위 지정(range)
<input> 태그의 type 속성값을 “range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.
0 <input type="range" name="favnum" min="1" max="9"> 9
range 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
색상 입력(color)
<input> 태그의 type 속성값을 “color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.
선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다.
브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.
<input type="color" name="color" value="#FF0000">
color 타입은 사파리 9.1과 그 이전 버전, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
날짜 입력(date)
<input> 태그의 type 속성값을 “date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여준다.
<input type="date" name="day1">
또한, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.
<input type="date" name="day2" min="1977-01-01" max="2020-12-31">
date 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
시간 입력(time)
<input> 태그의 type 속성값을 “time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여줍니다.
<input type="time" name="time">
time 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.
날짜와 시간 입력(datetime-local)
<input> 태그의 type 속성값을 “datetime-local"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여준다.
<input type="datetime-local" name="time">
datetime-local 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.
연도와 월 입력(month)
<input> 태그의 type 속성값을 “month"로 설정하면, input 요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여준다.
<input type="month" name="month">
month 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
연도와 주 입력(week)
<input> 태그의 type 속성값을 “week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여준다.
<input type="week" name="week">
week 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.
이메일 입력(email)
<input> 태그의 type 속성값을 “email"로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.
<input type="email" name="email">
email 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.
URL 주소 입력(url)
<input> 태그의 type 속성값을 “url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.
브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사한다.
<input type="url" name="url">
url 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.
전화번호 입력(tel)
<input> 태그의 type 속성값을 “tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.
<input type="tel" name="tel">
tel 타입은 사파리 8에서만 지원한다.
검색어 입력(search)
<input> 태그의 type 속성값을 “search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다.
이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.
search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.
<input type="search" name="keyword">