구리

HTML - input 태그 date 타입 관련 예시 본문

HTML,CSS

HTML - input 태그 date 타입 관련 예시

guriguriguri 2021. 5. 21. 10:05

라벨 사용할 경우

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>input 태그의 date 타입에 대하여</title>
</head>

<body> 
	라벨을 사용할 경우
	<form action="https://example.com">
	  <label>
	    Enter your birthday:
	    <input type="date" name="bday">
	  </label>
	
	  <p><button>Submit</button></p>
	</form>

</body>
</html>

 

라벨 이용하여 지정 날짜만 허용

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>input 태그의 date 타입에 대하여</title>
</head>

<body> 
	지정한 날짜만 허용할 경우
	<form>
	  <label for="party">Choose your preferred party date:
	    <input type="date" name="party" min="2021-05-18" max="2021-05-21" />
	  </label>
	</form>

</body>
</html>

유효성 검사

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>input 태그의 date 타입에 대하여</title>
</head>

<body> 
	유효성 검사 할 경우 : required

	<form>
	  <label>
	    Choose your preferred party date (required, May 18st to 25th):
	    <input type="date" name="party" min="2021-05-18" max="2021-05-27" required />
	    <span class="validity"></span>
	  </label>
	
	  <p>
	    <button type="submit">Submit</button>
	  </p>
	</form>

</body>
</html>

date 타입 지원하지 않는 브라우저의 경우

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>input 태그의 date 타입에 대하여</title>
</head>

<body> 
	date 타입을 지원하지 않는 브라우저의 경우 : pattern ####-##-##

	<form>
	  <label for="bday">Enter your birthday:
	    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
	    <span class="validity"></span>
	  </label>
	  <p>
	    <button type="submit">Submit</button>
	  </p>
	</form>

</body>
</html>

'HTML,CSS' 카테고리의 다른 글

TIL_210525_CSS_고급 선택자, 미디어 쿼리, Grid  (0) 2021.05.25
TIL_210524_CSS 관련(border, image,float,box) 예시  (0) 2021.05.24
TIL_210506_프로젝트 문제 해결(simple_shop 회원가입 완료)  (0) 2021.05.06
TIL_210504_CSS 연습 및 예제 (simple_shop 기본 틀)  (0) 2021.05.04
TIL_210503_웹 UI 관련 기본지식, HTML 태그2, CSS 기초  (0) 2021.05.04
'HTML,CSS' Related Articles more