대화형 컨트롤을 만드는 태그
7. <input type="number"> (MDN)
:: text 타입과 비슷하나 숫자만 입력받을 수 있도록 유효성 검사가 포함되어 있다.
-- step 속성이 설정되어 있지 않다면 기본적으로 정수만 입력받을 수 있다.
-- 브라우저에 따라 값을 조정할 수 있는 스테퍼 화살표가 표시되기도 한다.
number 타입에서 추가로 사용되는 속성
:::: step : 값의 단위를 지정하기 위해서 사용되는 속성. 0을 초과하는 실수값 혹은 'any'라는 특수값을 갖는다.
---- 단위에 맞지 않은 값을 입력한 경우 유효성 검사에 실패하며 단위에 맞는 값을 추천해준다.
---- 'any' 입력시 스테퍼는 1단위로 움직이지만 모든 숫자 값을 입력받을 수 있다. (max, min 제한은 유효)
:::: min : 입력 받을 수 있는 최소 값을 지정한다.
:::: max : 입력 받을 수 있는 최대 값을 지정한다.
:::: 설정 값이 min<max 일 경우 입력값은 min, max 둘 중 하나만 가능하다. (잘못된 설정에 가깝지만)
:::: 설정 값이 min=max 일 경우 입력값은 min=max 값 하나만 가능하다. (잘못된 설정에 가깝지만)
8. <input type="range"> (MDN)
:: 숫자를 입력받을 수 있는 볼륨 컨트롤을 표시한다.
:: pattern속성을 이용한 유효성 검사는 사용할 수 없다.
:: 하지만 입력된 값이 유효범위 내의 숫자값인지 확인하는 유효성 검사는 자동으로 포함된다.
:: 추가로 사용되는 속성은 number 타입과 같다. 기본 설정은 min="0" max="100" step="1"이다.
:: 기본 값은 min<max 일 경우 min+(max-min)/2 이고, min≥max 일 경우 min값이다.
:: 설정 값이 min<max 일 경우 입력값은 min 하나만 가능하다. (잘못된 설정에 가깝지만)
9. <input type="datetime-local"> (MDN)
:: 날짜 및 시간을 입력받을 수 있는 컨트롤을 표시한다.
:: 지원하지 않는 브라우저에서는 텍스트 타입으로 표시된다.
:: 이제는 사용되지 않는 datatime 유형에서는 기준 시간대 설정도 포함되어 있었지만 제거되었다.
:: 기준 시간대 설정이 필요한 경우 따로 선택화면을 제공하는 것이 추천된다.
:: 값의 형태는 'yyyy-MM-ddThh:mm(:ss)'로 min, max, value 설정 값도 이 형태로 입력해야한다.
:: step 값은 1000ms초 단위로 제공되며 기본값은 60(=1분)이다.
:: step 값이 60의 배수가 아닐 경우 초단위까지 입력받는다.
:: step="any"가 무엇을 의미하는지는 정확하게 정의되어 있지 않다.
10. <input type="date"> (MDN)
:: 날짜를 입력받을 수 있는 컨트롤을 표시한다.
:: 지원하지 않는 브라우저에서는 텍스트 타입으로 표시된다.
:: 값의 형태는 'yyyy-MM-dd'로 min, max, value 설정 값도 이 형태로 입력해야한다.
:: step 값은 86400000ms(=1일) 단위로 제공되며 기본값은 1(=1일)이다. any값은 1과 같은 의미를 갖는다.
11. <input type="time"> (MDN)
:: 시간을 입력받을 수 있는 컨트롤을 표시한다.
:: 지원하지 않는 브라우저에서는 텍스트 타입으로 표시된다.
:: 값의 형태는 'hh:mm(:ss)'로 min, max, value 설정 값도 이 형태로 입력해야한다.
:: step값이 1000ms초 단위로 제공되며 기본값은 60(=1분)이다.
:: step값이 60의 배수가 아닐 경우 초단위까지 입력받는다.
:: 이 타입에서 step="any"가 무엇을 의미하는지는 정확하게 정의되어 있지 않다.
12. <input type="month"> (MDN)
:: 년도와 월을 입력받을 수 있는 컨트롤을 표시한다.
:: 지원하지 않는 브라우저에서는 텍스트 타입으로 표시된다.
:: 값의 형태는 'yyyy-MM'로min, max, value 설정 값도 이 형태로 입력해야한다.
:: step값은 월 단위로 제공된다.
13. <input type="week"> (MDN)
:: 년도와 몇번째 주인지를 입력받을 수 있는 컨트롤을 표시한다. 1년은 52주 혹은 53주이다.
:: 지원하지 않는 브라우저에서는 텍스트 타입으로 표시된다.
:: 값의 형태는 'yyyy-Wnn'로 min, max, value 설정 값도 이 형태로 입력해야한다.
:: step값은 주 단위로 제공된다.
:: 이 타입에서 step="any"가 무엇을 의미하는지는 정확하게 정의되어 있지 않다.
썸네일용