[개발]프로그래밍/html5
[html5] input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호
좋은 블로그
2021. 2. 5. 10:51
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 타입과 달리 한번에 입력한 값을 지울 수가 있습니다.
따라서 사용자로 하여금 검색을 할 때 좀 더 편리하게 이용할 수 있도록 만든 것입니다.
그런데 텍스트를 입력하게 되면 오른쪽에 X모양이 나오는 것을 확인하실 수 있습니다.
X표를 누르게 되면 일반 text 타입과 달리 한번에 입력한 값을 지울 수가 있습니다.
따라서 사용자로 하여금 검색을 할 때 좀 더 편리하게 이용할 수 있도록 만든 것입니다.
2
<input type
=
"url"
......
>
url 타입은 입력을 했을때 웹주소 형식이 아닐 경우를 자동 체크해줍니다.
2번을 보면 그냥 123으로만 입력을 하고 검색 버튼을 누르니 "URL을 입력하세요"라는 메시지가 나오는 것을 확인하실 수 있습니다.
2번을 보면 그냥 123으로만 입력을 하고 검색 버튼을 누르니 "URL을 입력하세요"라는 메시지가 나오는 것을 확인하실 수 있습니다.
3
<input type
=
"email"
......
>
email 타입은 @ 문자를 포함한 메일 주소 형식을 자동 체크해줍니다.
이 경우데도 만약 형식이 맞지 않으면 "이메일 주소에 @를 포함해 주세요" 라는 메시지가 표시되는 것을 확인하실 수 있습니다.
이 경우데도 만약 형식이 맞지 않으면 "이메일 주소에 @를 포함해 주세요" 라는 메시지가 표시되는 것을 확인하실 수 있습니다.
4
<input type
=
"tel"
......
>
tel은 형식을 체크하는 부분이 없습니다.
단지 이 형식으로 넘어온 경우에는 전화번호라고 인식을 하게 되는 것입니다.
단지 이 형식으로 넘어온 경우에는 전화번호라고 인식을 하게 되는 것입니다.