티스토리 뷰

1. 개념
input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호
search 타입 : 일반 텍스트 필드와 비슷해 보이지만 글을 입력할 때 오른쪽에 X 표시가 나타나게 되면서 입력한 값을 한번에 쉽게 지울 수 있도록 함
url 타입 : http://로 시작되는지를 자동으로 체크 해주는 필드
email 타입 : @문자를 포함해서 입력한 내용이메일 주소 형식인지를 체크해 주는 것
tel 타입 : 입력한 값을 체크하지는 않지만 서버에서 받을 때 입력한 문자가 텍스트가 아니라 전화번호라는 사실을 인식하게 함
2. 태그
input type = search,url,email,tel
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<form>
1
<label> search 필드 : </label><input type = "search" ><br>
2
<label> url 필드 : </label><input type = "url" ><br>
3
<label> email 필드 : </label><input type = "email" ><br>
4
<label> tel 필드 : </label><input type = "tel" >
</form>
</body>
</html>
결과 화면
코드 설명
1
<input type = "search" ...... >
search 타입을 보게 되면 일반 text 타입과 같습니다. 차이가 없어 보입니다.
그런데 텍스트를 입력하게 되면 오른쪽에 X모양이 나오는 것을 확인하실 수 있습니다.
X표를 누르게 되면 일반 text 타입과 달리 한번에 입력한 값을 지울 수가 있습니다.
따라서 사용자로 하여금 검색을 할 때 좀 더 편리하게 이용할 수 있도록 만든 것입니다.
2
<input type = "url" ...... >
url 타입은 입력을 했을때 웹주소 형식이 아닐 경우를 자동 체크해줍니다.
2번을 보면 그냥 123으로만 입력을 하고 검색 버튼을 누르니 "URL을 입력하세요"라는 메시지가 나오는 것을 확인하실 수 있습니다.
3
<input type = "email" ...... >
email 타입은 @ 문자를 포함한 메일 주소 형식을 자동 체크해줍니다.
이 경우데도 만약 형식이 맞지 않으면 "이메일 주소에 @를 포함해 주세요" 라는 메시지가 표시되는 것을 확인하실 수 있습니다.
4
<input type = "tel" ...... >
tel은 형식을 체크하는 부분이 없습니다.
단지 이 형식으로 넘어온 경우에는 전화번호라고 인식을 하게 되는 것입니다.
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday