HTML5에 추가된 input 태그 type 타입 에 대한 설명 1

2019. 4. 9. 18:30프로그래밍/HTML

안녕하세요 아이굿입니다.

오늘은 HTML5에서 새롭게 추가된 input 태그 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>

 

 

 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>

 

 

 

 

 



출처: https://mainia.tistory.com/4326 [녹두장군 - 상상을 현실로]