본문 바로가기

웹/HTML

HTML Input Type

HTML Input Type

다양한 input type들이 존재한다.

숫자만 입력 최소 10 최대 15 :

<input type ="number" name ="number" min="10" max="15">

숫자만 입력할 수 있게 하는 타입이다. 최솟값의 범위와 최댓값의 범위를 정할 수 있다.

물론 키보드로 치면 최소값과 최댓값을 넘어서는 범위를 입력할 수 있지만 제출을 하면 오류로 뜨게 된다.

 

 

날짜를 입력 :

<input type ="date" name ="date">

연도와 월 일을 입력할 수 있게 하는 타입이다.

 

 

연도와 월을 입력 : 

<input type ="month" name ="month">

연도와 월을 입력할 수 있게 하는 타입이다.

 

 

연도와 주를 입력 : 

<input type ="week" name ="week">

연도와 주를 입력할 수 있게 하는 타입이다.

 

 

시간 입력 :

<input type ="time" name ="time">

오전/오후 및 시간을 입력할 수 있게 하는 타입이다.

 

 

이메일 입력 :

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

이메일 형식으로 입력하게 만드는 타입이다. 만일 "@" 안 쓰고 제출을 하면 @입력해서 다시 쓰라고 뜬다.

 

 

검색할 때 사용 :

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

검색할 때 사용하는 타입이다.

 

 

전화번호 :

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

전화번호를 입력하게 하는 타입이다.

 

url 입력 :

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

url를 입력하게 하는 타입이다

 

슬라이드를 이용한 범위

<input type ="range" name = "range" min = "0" max = "10">

슬라이드를 이용해서 범위를 지정할 수 있게 하는 타입이다. 맨 왼쪽이 0 맨 오른쪽이 10이다.

 

색깔 선택 :

<input type ="color" name = "color">

말 그대로 색깔 선택

 


제출버튼 :

<input type ="submit" name ="submit">

제출버튼!

' > HTML' 카테고리의 다른 글

HTML validation error  (0) 2020.03.29
HTML autocomplete,autofocus,placeholder  (0) 2020.03.29
HTML mobile  (0) 2020.03.29
HTML method  (0) 2020.03.29
HTML lable  (0) 2020.03.29