Html5에서 새롭게 추가된 입력양식 태그
: input에 입력한 값이 이메일 형식이 맞는지 체크한다.
※Search
: 크롬과 사파리에서만 가능하다.
※url
: url입력 형식을 검증하는 창을 만든다
※tel
:각 나라마다 전화번호 입력 표준이 다 다르기 따문에 '-'표시를 넣어주진 않지만 모바일 기기에서 입력할 때 자동으로 숫자패드가 나타난
※number
:숫자를 입력받는다. 텍스트는 아예 입력이 되지 않으며 숫자를 입력하면 입력란 끝에 스핀 컨트롤이 생기면서 화살표를 클릭해 값을 올리거나 내릴 수 있다.
※range
:범위에 있는 숫자를 슬라이드로 입력할 수 있는 형태로 만들어준다.
※date
:날짜를 입력 받을 수 있다. 날짜를 편리하게 선택 할 수 있도록 달력창이 뜬다.
※color
:color 태그를 사용하면 팝업창이 나타나는데 팝업창에 나타난 색상입력 창에서 원하는 색상을 선택하면 된다.
(출처:)
https://mainia.tistory.com/4326
예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5에서 추가한 입력 양식 태그</title>
</head>
<body>
<ul>
<!-- 데스크탑에서 type="text" 로 지정한 입력폼과 다른 부분이 없지만,
모바일 기기에서는 type 속성값에 맞는 키패드가 생성된다. -->
<li><input type="search" placeholder="검색어 입력"></li>
<li><input type="tel" placeholder="전화번호 입력"></li><!-- 번호 키패드가 생성 -->
<li><input type="url" placeholder="URL 입력"></li><!-- URL 키패드가 생성 -->
<li><input type="email" placeholder="이메일 입력"></li><!-- 이메일 키패드가 생성 -->
<li><input type="number"></li>
<li><input type="range"></li>
<li><input type="color"></li>
<li><input type="time"></li>
<li><input type="date"></li>
<li><input type="month"></li>
<li><input type="week"></li>
<li><input type="datetime"></li>
<li><input type="datetime-local"></li>
</ul>
</body>
</html>
결과물
'Html' 카테고리의 다른 글
| html (0) | 2022.10.04 |
|---|---|
| 09.입력양식태그 (0) | 2022.09.23 |
| 0.0 VS Code 설정 (0) | 2022.09.21 |
| 08. 입력양식태그 (0) | 2022.09.20 |
| 07. 공간분할태그 (0) | 2022.09.20 |