#8-3. HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력

# HTML에서 사용되는 다양한 input 요소들을 살펴봅니다.
# 이메일(email), url 주소(url), 전화번호(tel), 검색어(search)

# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력

 

---

 

1) 이메일 입력(email)

<input>태그의 type 속성값을 "email"로 설정하면, input요소는 사용자가 email 주소를 입력할 수 있도록 합니다.

브라우저의 지원 여부에 따라 email 주소가 유효한 email 주소인지 자동으로 검사합니다.

<input type="email" name="email">

 

---

 

2) URL 주소 입력(url)

<input>태그의 type 속성값을 "url"로 설정하면, input요소는 사용자가 URL을 입력할 수 있도록 합니다.

브라우저의 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사합니다.

<input type="url" name="url">

 

---

 

3) 전화번호 입력(tel)

<input>태그의 type 속성값을 "tel"로 설정하면, input요소는 사용자가 전화번호를 입력할 수 있도록 합니다.

<input type="tel" name="tel">

 

---

 

4) 검색어 입력(search)

<input>태그의 type 속성값을 "search"로 설정하면, input요소는 사용자가 검색어를 입력할 수 있도록 함
이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작합니다.

search 타입이 일단 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 X 표시가 생기는 점입니다.

<input type="search" name="keyword">

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.