HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명

HTML5 부터는 input 태그의 기능이 아주 많이 향상되었습니다. 추가된 주요 기능은 유효성 체크입니다. input 태그의 속성상 화면에서 값을 입력 받게 됩니다. 이때 자바스크립트로 유효성을 체크해야 했었습니다. 그런데 HTML5 부터는 이것을 좀 덜어 주기 위해서 많은 속성을 추가하였습니다.

 

 

▼ 새로 추가한 타입들은 다음과 같습니다. 아래에 열거한 내용보다 더 많지만 주로 사용할 만 것들만 언급을 하였습니다.

 

l  email : 이메일 주소 검증 창을 만든다.

l  search : 검색창을 만든다. text 속성과 동일하다. 크롬과 사파리만 가능함

l  url : URL 입력 형식을 검증하는 창을 만든다.

l  tel : 전화번호 입력창을 만들며 검증 하지 않는다.

l  number : 숫자만 입력할 수 있는 창을 만들며 범위 제한을 둘 수 있다.

l  range : 슬라이드 컨트롤을 만든다.

l  date : 날짜 입력창을 만든다.

l  color : 색상을 선택할 수 있는 창을 만든다.

 

 

◎ type=”email” 일 때

 

 

▼ 타입이 email 값일 때 전송을 하게 되면 input 에 입력한 값이 이메일 형식에 맞는지 체크하게 됩니다. 아래 그림과 같이 메일 구성요소 중 “@” 가 빠지면 입력창 하단에 풍선 도움말로 제대로 입력하지 않았다고 알려 줍니다. 이전에는 정규식을 사용해서 입력한 값을 체크하곤 했었습니다. 

 

<form id="frm" action="action.jsp">
	<p>이메일 입력</p>
	<div><input type="email" id="useremail" name="useremail"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하기 ▶ HTML div, span 태그 사용법과 차이

 

 

 

◎ type=”url” 일 떄

 

 

▼ 입력란에 http:// 가 앞자리에 와야 합니다. 값을 제대로 넣지 않으면 아래 그림처럼 URL 을 제대로 입력하라고 입력창 하단에 풍선 도움말을 보여 줍니다.  

 

<form id="frm">
	<p>URL 입력:</p>
	<div><input type="url" id="userurl" name="userurl"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

 

◎ type=”tel” 일 때

 

 

▼ tel 은 유효성 체크를 하지 않으며 자동으로 “-“ 를 넣어 주지는 않습니다. 각 나라마다 표준이 다르기 때문이겠죠. 이렇게 유효성 체크는 하지 않지만 모바일 기기에서 입력할 때는 자동으로 숫자 패드가 나타납니다.  

 

<form id="frm" action="action.jsp">
	<p>전화번호 입력:</p>
	<div><input type="tel" id="usertel" name="usertel"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

 

◎ type=”search” 일 때

 

 

▼ search 타입은 크롬과 사파리에서만 사용이 가능합니다. 크로스브라우징이 안되기 때문에 잘 사용은 하지 않지만 어떤 형태로 나타나는지 알아보겠습니다. 아래 그림처럼 검색어를 입력하게 되면 입력란 끝에 x 버튼이 나타나게 됩니다. 클릭하면 검색어가 제거 되겠죠. 

 

<form id="frm" action="action.jsp">
	<p>검색입력 :</p>
	<div><input type="search" id="usersearch" name="usersearch"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

 

◎ type=”number” 일 때

 

 

▼ number 타입은 숫자를 입력 받기 위한 값입니다. 텍스트는 아예 입력이 되지 않으며 숫자를 입력하는 순간 입력란 끝에 스핀 컨트롤이 생깁니다. 화살표를 클릭해서 값을 올리거나 내릴 수 있습니다. 

 

<form id="frm" action="action.jsp">
	<p>숫자입력 :</p>
	<div><input type="number" id="usernumber" name="usernumber"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

▼ 숫자를 입력 받을 수 있는 input 을 만들게 되면 유효성 체크를 위해 범위 입력을 받아야 되는 경우가 있습니다. input 의 type 을 number 로 주고 min, max, step, value 속성으로 범위와 초기값, 증가 값을 세팅할 수 있습니다. 범위는 min, max 로 하고 스핀 컨트롤을 클릭했을 때 증가 값은 step 으로 합니다. 그리고 화면에 나타나는 초기값은 value 에 입력하시면 됩니다. 범위를 벗어나면 더 이상 숫자는 변화가 없습니다. 

 

<form id="frm" action="action.jsp">
	<p>숫자입력 :</p>
	<div><input type="number" 
				id="usernumber" name="usernumber"
				value="100"
				step="10"
				min="0"
				max="1000"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

◎ type=”range” 일 때

 

 

▼ range 타입은 범위에 있는 숫자를 슬라이드로 입력할 수 있는 형태로 만들어 줍니다. 슬라이드로 선택한 숫자는 텍스트로 표현되지 않으므로 javascript 를 이용해서 표시해 주셔야 합니다. 그리고 범위와 증가 값은 number 유형과 동일합니다. min 과 max 를 이용해서 범위를 지정하고 step 으로 증가 값을 세팅하시면 됩니다. 

 

<form id="frm" action="action.jsp">
	<p>범위 입력 :</p>
	<div><input type="range" 
				id="userrange" name="userrange"
				value="100"
				step="10"
				min="0"
				max="1000"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

 

◎ type=”date” 일 때

 

 

▼ date 타입은 날짜 형식을 입력 받을 수 있습니다. 날짜를 편리하게 선택할 수 있도록 달력창이 뜹니다. 달력 팝업창에서 화살표를 클릭해 이동하면서 날짜를 선택해 주시면 됩니다. 화면이 로딩될 때 나타나는 날짜 값은 value 속성에 입력하면 됩니다. 그림에서처럼 입력 박스 끝에는 스핀 컨트롤과 화살표 두 개가 나타나는데 스핀 컨트롤은 클릭할 때 마다 선택한 년, 월, 일을 증감시킬 수 있습니다. 그리고 바로 옆에 있는 화살표는 달력을 띄우는 버튼입니다. 

 

<form id="frm" action="action.jsp">
	<p>날짜 입력:</p>
	<div><input type="date" id="userdate" name="userdate" 
				value="2015-10-10"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

 

◎ type=”color” 일 때

 

 

▼ color 타입은 윈도우에서 제공하는 색상 선택 기본 컨트롤을 보여 줍니다. 팝업창에 나타난 색상입력 창에서 색상을 선택하시면 input 박스에 나타나게 됩니다. 기본 색상값은 value 속성에 16진수로 입력하시면 됩니다. 

 

<form id="frm" action="action.jsp">
	<p>날짜 입력:</p>
	<div><input type="color" id="usercolor" name="usercolor" value="#FFFFF"></div>
	<div><input type="submit" value="전송"></div>
</form>

 

 

▼ 만약 선택한 색상값을 알고 싶으면 input 태그의 value 값을 가져오면 됩니다. 

 

<form id="frm" action="action.jsp">
	<p>날짜 입력:</p>
	<div><input type="color" id="usercolor" name="usercolor" value="#FFFFF"></div>
	<div><input type="submit" value="전송"> 
	<input type="button" 
		   onclick="alert(document.getElementById('usercolor').value);" 
		   value="색상값"></div>
</form>

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하기 ▶ HTML div, span 태그 사용법과 차이