예제 3-18. 입력할 정보의 힌트 보여주기, 형식을 가진 텍스트 입력
WEB/HTML5-CONCEPT 2017. 11. 4. 18:46 |● 입력할 정보의 힌트 보여주기
<input> 태그의 placeholder속성은 사용자가 입력할 정보의 형식을 살짝 보여주는 속성.
● 형식을 가진 텍스트 입력
email 주소, <input type="email">
- 웹 서버로 전송하기전에 형식 검사가 수행된다.
URL, <input type="url">
- 웹 서버로 전송될 때 유효성이 자동으로 검사된다.
전화번호 입력, <input type="tel">
- 전화번호의 유효성 검사는 하지 않는다.
검색어 입력, <input type="search">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <title>형식을 가진 텍스트 입력</title></head> <body> <h3>회원 정보를 입력해주세요.</h3> <hr> <form> email : <input type="email" placeholder="id@host"><br> 홈페이지 : <input type="url" placeholder="http://"><br> 전화번호 : <input type="tel" placeholder="010-1234-5678"> <input type="submit" value="확인"><br><br> <hr> 검색어 : <input type="search" placeholder="검색어"> <input type="button" value="검색"> </form> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 3-19. 폼요소의 그룹핑, <fieldset> (0) | 2017.11.04 |
|---|---|
| 예제 3-17. <input type="number|range">, 스핀버튼과 슬라이드바로 편리한 숫자 입력 (0) | 2017.11.04 |
| 예제 3-16. 생일 날짜 입력 받기 (0) | 2017.11.04 |
| 3. 폼 요소의 종류 (0) | 2017.11.04 |
| 예제 3-15. 시간 정보 입력 폼 요소 활용, 시간 정보 입력 (0) | 2017.11.04 |