<HTML5+CSS3> 사용자가 정보를 입력하는 input 태그 (2) 체크박스와 시간속성

type= "checkbox" -체크박스 넣기

-체크박스도 라디오 버튼처럼 여러 항목 중에서 원하는 항목을 선택하는 것으로, 라디오 버튼과의 차이점은 2개 이상도 선택할 수 있다는 것입니다.

ex) <input type="checkbox" 속성=속성값">

%<radio>,<checkbox>태그 속성에서 cheked와 <input>태그 속성에서의 checkbox는 엄연히 다르므로 주의 !!! (전 글 설명 참고 )

속성

(1) name : 체크박스가 여러 개 있을 경우 구분하기 위해 이름을 지정함. 관련 항목이라 하더라도 라디오 버튼처럼 반드시 그룹으로 묶어주지 않아도 됨.

(2) value : 체크박스 항목을 선택했을 때 value 속성을 사용해서 서버로 넘길 값 지정. 필수속성! (단, 값은 영문 or 숫자)

(3) checked : 체크박스 중 처음부터 선택된 상태로 화면에 표시하고 싶다면 checked 속성을 사용.

type="color" - 색상 선택 상자 표시하기

-color 필드는 사용자가 색상표에서 색상을 선택할 수 있게 해줍니다. (일부 브라우저에서만 지원)

ex)<input type="color" 속성="속성값">

ex)<label>원하는 색상 : <input type="color" value=" " > </label>

% color 필드에서는 value 속성을 사용해 기본 생삭을 지정할 수 있다. 색상 값은 16진수로 표시하고 Red나 Yellow같은 색상 키워드는 사용할 수 없다.

type="datetime" , "datetime-local" - 날짜와 시간 표시하기

-날짜와 시간을 함께 표시할 수 있다. 

datetime: UTC(Universal Time Coordinated)라는 국제적인 표준시를 기준으로 한 날짜와 시간 표시

datetime-local : 지역의 날짜와 시간을 표시

HTML에서 날짜와 시간을 표기할 때는 유유효한 형식을 지켜야 하는데,

첫 번째로, 날짜를 나타내는 날짜 문자열 (연도4자리, 월과 일은 2자리)

두 번째로, 영문자 T (대문자)

세 번째로, 시간을 나타내는 시간 문자열

네 번째로, 영문자 Z (대문자) 또는 시차 : Z는 타임 존이 UTC일때 사용한다.

(시차=로컬시간과 UTC시간과의 차이 (로컬시간-UTC시간) )

ex) 22:50:00Z와 18 : 50 : 00 -04 : 00 은 같은 시간을 나타낸다

%시간 문자열 뒤에 붙는 Z는 "Zulu time"를 줄인 말인 주줄루를 뜻한다 줄루란 군대에서 UTC를 가리키는 말로 사용된다.

type="date", "month", "week" -다양한 날짜 표기하기

-"date" : 지정하면 달력에서 날짜를 선택했을 때 필드에 "yyyy-mm-dd"형식으로 연도와 월 일 표시

-"month" : "yyyy-mm" 월까지 입력

-"week"   : 1월 처첫째 주를 기준으로 몇 번째 주인지, 연도와 주가 표시 "yyyy-W24"

type="time" - 시간 지정하기

-날짜와 시간을 나타내는 유형에서 공통으로 사용할 수 있는 속성은 다음과 같다

(1) min : 날짜나 시간의 최솟값을 지정

(2) max : 날짜나 시간의 최댓값을 지정

(3) step : 스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마만큼씩 커지거나 작아지게 할지 지정

(4) value : 화면에 표시할 초깃값 지정