대화형 컨트롤을 만드는 태그
14. <input type="color"> (MDN)
:: 사용자가 색상을 지정할 수 있는 UI요소를 제공한다.
:: 값의 형식은 16진수 형식의 RGB 색상을 지정하는 7자리 문자열('#rrggbb')이다.
:: 이 속성으로는 알파 채널이 있는 색상은 지정할 수 없다.
:: 초기값을 지정하지 않았을 때 기본값은 '#000000'으로 'null'이 아니다.
:: 16진수값으로 대문자를 쓰더라도 값에는 소문자로 저장된다.
15. <input type="file"> (MDN)
:: 사용자의 장치 저장소 내에서 파일을 선택할 수 있는 인터페이스를 제공한다.
:: 값으로 선택한 파일의 경로를 나타내는 문자열이 저장된다.
:: 파일이 선택되지 않았을 경우 저장된 값은 'null'이다.
:: multiful : 사용자가 여러개의 파일을 선택할 수 있음을 나타내는 속성. bool값을 갖는다.
-- 사용자가 여러개의 파일을 선택했을 경우 첫번째 파일의 문자열이 값으로 저장된다.
:: accept : 입력받을 파일의 확장자(=unique file type specifiers)를 지정한다. ,(comma)로 구분한다.
16. <input type="radio"> (MDN)
:: 동일 그룹에서 하나만 선택할 수 있는 버튼을 만든다.
:: 같은 양식 안의 radio버튼끼리 name속성 값이 같으면 서로 같은 그룹으로 취급된다.
:: 양식 제출 시 value에 설정한 값이 전송된다. value에 값을 설정하지 않았을 경우 기본값은 'on'이다.
-- value 값을 따로 설정하지 않을 경우엔 의미없는 값이 전송되는 셈이므로 꼭 설정해주자.
:: checked 속성을 사용하여 기본값을 설정할 수 있다.
-- radio버튼도 checked 속성을 사용하지 않으면 초기에는 선택된게 없는 상태로 남아있다.
-- radio버튼을 비어두는 경우를 의도하지 않았다면 checked 속성을 사용해서 초기값을 정해둘 것을 권장한다.
-- checked 속성은 그룹에서 하나의 요소에만 적용되는데 여러 요소에 적용했을 경우 가장 아래 속성에 적용된다.
:: checkbox 버튼과는 다르게 radio 버튼은 다시 누른다고 선택 해제가 되지 않는다.
-- 이때 아무것도 선택하지 않은 상태로 돌리고 싶다면 초기화 버튼을 이용하면 된다.
17. <input type="checkbox"> (MDN)
:: 개별로 선택되거나 선택되지 않은 상태를 나타내는 체크박스 버튼을 만든다.
:: 개별 요소이므로 checkbox는 여러개를 동시에 선택할 수 있다.
-- 그러므로 서버에서 서로 구분하여 데이터를 받도록 만들 필요가 있다.
:: value 속성 : 체크박스가 체크되었을 경우 서버에 전송할 값. 지정하지 않을 경우 기본 값은 'on'이다.
:: checked 속성 : 체크박스의 초기 상태가 체크된 상태임을 의미하는 속성.
-- MDN 설명에 Bool값이라고 나와있는데 실제로는 속성을 갖느냐 갖지 않느냐에 따라서만 차이를 보였다.
-- 초기 상태만 나타낼 뿐 현재 상태는 나타내지 않음에 주의할 것.
:: indeterminate 속성 : 체크박스가 on, off로 나타낼 수 없는 상태를 가짐을 나타내는 속성.
-- 이 속성이 추가되면 요소는 '체크됨', '체크되지 않음','알수없음'의 3가지 상태를 갖게된다.
-- 체크박스의 상태가 다른 속성의 상태에 종속되고 그것들이 서로 얽혀있을 때 사용한다.
18. <input type="button"> (MDN)
:: 특별한 기능 없이 클릭 이벤트를 연결할 수 있는 버튼을 만든다.
:: value 속성으로 버튼에 표시할 label을 지정한다.
-- 이 속성이나 button 태그 모두 유효하지만 현재는 button 태그를 쓰는게 더 추천 및 선호된다.
19. <input type="reset"> (MDN)
:: 양식에 포함된 모든 컨트롤에 입력된 값을 기본값으로 초기화시키는 버튼을 만든다.
:: value 속성으로 버튼에 표시할 label을 지정한다.
-- 제출해야하는 양식에 리셋 버튼을 포함시키는 것은 사용자 경험 면에서 추천되지 않는다.
20. <input type="submit"> (MDN)
:: 양식에 포함된 모든 컨트롤에 입력된 값을 제출하는 버튼을 만든다.
:: value 속성으로 버튼에 표시할 label을 지정한다.
-- formaction : 양식을 제출할 URL을 지정한다. form 태그의 action 속성을 덮어쓴다.
-- formmethod : 양식을 제출할 방법을 지정한다. form 태그의 method 속성을 덮어쓴다.
-- formtarget : action 속성에 지정한 URL을 나타낼 곳을 지정한다. form 태그의 tatget 속성을 덮어쓴다.
-- formnovalidate : 양식 제출시 제약조건 유효성 검사를 하지 않음을 의미한다. boolean 속성이다.
21. <input type="image"> (MDN)
:: 양식에 포함된 모든 컨트롤에 입력된 값을 제출하는 이미지 버튼을 만든다.
:: submit + img 태그라고 생각하면 된다.
22. <input type="hidden"> (MDN)
:: 양식에 포함되어 제출될 때 같이 제출되지만 사용자 눈에는 보이지 않는 요소이다.
:: value 속성으로 제출될 값을 나타낸다.
:: 화면에 그려지지 않는다.
썸네일용