폼에 들어가는 컨트롤 태그들
<label> 태그 (MDN)
:: 대화형 컨트롤 요소에 설명을 붙일 때 사용하는 태그.
:: 레이블 가능한 컨트롤 요소와 연결할 수 있다.
:: 레이블을 눌러서 컨트롤 요소에 초점을 맞출 수 있으므로 마우스나 터치스크린 사용자에게 도움이 된다.
:: 또한 컨트롤 요소와 설명이 명시적으로 연결되므로 보조기술 이용자의 웹 접근성이 향상된다.
:: 컨트롤과 레이블을 연결하는 방법 1 : 컨트롤의 id속성 값을 lable의 for속성값에 적는다.
ex) <label for="name"> 이름</label> <input type="text" id="name">
:: 컨트롤과 레이블을 연결하는 방법 2 : 컨트롤을 레이블 태그 안에 적는다. (for와 id 필요없음)
ex) <label> 이름 <input type="text"> </label>
-- 1번 방법을 사용할 경우 <label>태그와 컨트롤 요소가 떨어져 있어도 된다는 장점이 있다.
---- id는 원칙적으로 문서내에 하나만 존재해야 하므로 제대로 작성했다면 문제 될 일이 없다.
---- 하지만 같은 id를 가진 컨트롤 요소가 여러개 존재한다면 label은 가장 가까운 컨트롤 요소와 연결된다.
-- 2번 방법을 사용할 경우 <label> 태그 내부에 여러개의 컨트롤 요소가 있다면 제일 첫번째 컨트롤과 연결된다.
-- 1번과 2번 방법을 동시에 사용했을 경우 for,id 연결이 우선시된다.
:: label 태그의 주요 속성
-- for : 레이블 가능한 컨트롤 태그의 id를 값으로 가져 레이블과 컨트롤을 연결한다.
-- form : label태그가 form태그 밖에 있더라도 같이 묶여진 요소임을 알려주는 속성. form태그의 id값을 값으로 갖는다.
<meter> 태그 (MDN)
:: 스칼라 값 혹은 백분율을 시각적으로 보여줄 때 사용되는 태그.
:: label 태그처럼 대화형 컨트롤 요소와 연결하여 데이터를 시각화하는데 사용된다.
:: meter 태그의 주요 속성
-- value : 현재 값. meter태그가 대화형 컨트롤 요소는 아니기 때문에 직접적으로 제출되는 값은 아니다.
---- min값과 max값을 지정한 경우 그 사이여야 한다. 지정하지 않았거나 잘못된 값인 경우 0으로 간주한다.
---- 지정했지만 min값과 max값 사이가 아닐 경우 값은 그대로지만 넘친 값은 잘려서 표현되지 않는다.
---- ex) 범위가 0~1사이인데 현재값이 2일경우 표현은 1일때와 같다.
-- min : 표현 가능한 최소값. max 값보다 작아야 한다. 지정하지 않을 경우 기본값은 0이다.
-- max : 표현 가능한 최대값. min 값보다 커야한다. 지정하지 않을 경우 기본값은 1이다.
-- low : 값이 작다고 할 수 있는 최대값. 값이 min~low사이에 있을 경우 값이 작다고 표현한다.
---- low의 값은 min값을 초과해야하며, max, high값 미만이어야 한다.
---- 지정하지 않거나, min값보다 작을 경우 min값과 같은 값으로 취급된다.
---- 현재 값이 low 이하이면 바가 노랗게 표현된다.(따로 css 디자인을 설정하지 않았다면)
-- high : 값이 크다고 할 수 있는 최소값. 값이 high~max사이에 있을 경우 값이 크다고 표현한다.
---- high의 값은 max값 미만이어야 하며, min, low값 초과여야 한다.
---- 지정하지 않거나, max값보다 클 경우 max값과 같은 값으로 취급된다.
---- 현재 값이 hign 이상이면 바가 노랗게 표현된다. (따로 css 디자인을 설정하지 않았다면)
-- optimum : 이상적인 값. low, high 속성과 함께 사용될 때 의미가 있다.
---- optimum값이 min과 low 사이라면 값이 작은게 이상적이고, high와 max사이라면 값이 큰게 이상적이다.
---- 설정하지 않았거나, optimum값이 low와 high사이라면 중간값일 때 이상적이다.
---- 값이 이상적인 범위에 있다면 바가 초록색으로 표시된다. (따로 css 디자인을 설정하지 않았다면)
<progress> 태그 (MDN)
:: 작업의 진행률을 시각적으로 보여줄 때 주로 사용하는 태그.
:: meter 태그와 다르게 progress 태그의 값 범위는 항상 0~max까지로 min값을 따로 설정할 수 없다.
:: label 태그처럼 대화형 컨트롤 요소와 연결하여 데이터를 시각화하는데 사용된다.
:: progress 태그의 주요 속성
-- max : 작업이 완료되기 위해서 수행되어야 하는 총 작업량. 0을 초과하는 유효한 부동소수점 값을 가져야한다.
---- 설정하지 않을 경우 기본값은 1이다.
--value : 현재까지 완료된 작업량. max값을 지정했을 경우 max 값 이하의 유효한 부동소수점 값이어야 한다.
---- 값이 지정되지 않았을 경우 미결정 상태로 작업이 언제 완료 될지 알 수 없음을 나타낸다.
<input> 태그 (MDN)
:: HTML의 대표적인 입력 컨트롤 태그. 중요하므로 다음 포스트에서 자세하게 설명하겠다.
<button> 태그 (MDN)
:: 표준 버튼 컨트롤을 만드는 태그. 중요하므로 이후에 다시 설명하겠다.
<textarea> 태그 (MDN)
:: 여러줄의 텍스트를 나타내거나 입력할 수 있는 공간을 나타내는 태그.
:: textarea 태그의 주요 속성
-- cols : textarea의 넓이를 지정한다. 값은 단위를 적지 않은 양의 정수여야 한다. em단위로 지정된다.
-- rows : textarea의 높이를 지정한다. 값은 단위를 적지 않은 양의 정수여야 한다. em단위로 지정된다.
-- maxlength : 입력가능한 최대 문자 크기를 지정한다. 지정할 경우 그 이상은 입력되지 않는다.
-- minlength : 사용자가 입력해야하는 문자의 최소 개수를 지정한다. 부족하면 제출되지 않는다.
<select> 태그 (MDN)
:: 드롭다운 목록을 만들때 사용하는 태그.
:: 내부에 <option> 태그를 사용해서 선택지를 만든다.
:: select 태그의 주요 속성
-- multiple : 지정한 경우, 메뉴에서 다수의 옵션을 선택할 수 있습니다.
---- 이 속성이 있고 size 속성이 없을 경우 대부분의 브라우저가 드랍다운 목록이 아닌 선택 가능한 모든 옵션을 보여준다.
------ 컨트롤을 누르고 누르거나 드래그를 해야 여러 개가 선택되기 때문에 차라리 checkbox를 쓰지 않을까 싶다.
-- size : multiple 속성등의 이유로 스크롤 가능한 목록 상자로 표현할 경우에 한번에 보여줄 옵션의 수를 나타낸다.
---- em 단위로 목록 상자의 크기가 커지는 식으로 표현된다.
---- 스크롤 가능한 목록 상자로 바꾸지 않았어도 size값이 2 이상이면 스크롤 가능한 목록 상자가 된다.
<datalist> 태그 (MDN)
:: input태그와 함께 사용되며 드랍다운 메뉴로 추천 입력값을 보여주는 태그.
:: 사용법은 input 태그에서 list속성의 값으로 datalist의 id값을 사용하여 연결한다.
:: 그외는 select 태그와 거의 비슷하다.
<optgroup> 태그 (MDN)
:: <select>태그와 <datalist>태그의 선택지로 사용되는 <option>태그를 묶을 때 사용되는 구획 태그
:: 그룹의 이름을 나타내는 label 속성을 필수로 가져야한다.
:: disabled 속성을 사용하면 하위 옵션을 선택 불가하게 만든다.
<option> 태그 (MDN)
:: <select>태그와 <datalist>태그의 선택지로 사용되는 태그.
:: option태그의 주요 속성
-- label : 옵션의 텍스트를 나타내는 속성.
---- 지정하지 않을 경우 요소의 텍스트 콘텐츠로 지정된다. 지정했을 경우 요소의 텍스트 콘텐츠는 무시된다.
-- value : 서버에 보낼 실제 값을 나타내는 속성.
---- 지정하지 않을 경우 요소의 텍스트 콘텐츠로 지정된다. 텍스트 콘텐츠도 비어있을 경우 null값이 지정된다.
-- selected : 초기 값으로 이 옵션이 선택되어 있게 한다. multiple 속성이 없을 경우 하나의 옵션값만 지정할 수 있다.
컨트롤 태그에서 어느정도 공통적으로 사용되는 속성
:::: form : 컨트롤과 연결된 양식의 id. 지정하지 않아도 조상 중에 form 요소가 있으면 해당 form과 연결된다.
-- 조상 중에 form 요소가 있어도 이 속성을 지정함으로 다른 폼 요소와 연결되도록 할 수 있다.
:::: name : 컨트롤의 이름을 지정한다. 서버쪽에서 식별자로 사용된다. id속성이 존재한다면 같은 값을 가져야 한다.
:::: autocomplete : 자동완성기능 사용 여부를 지정한다. 지정하지 않을 경우 상위 태그의 설정을 상속받는다.
-- 'on' 'off'값을 갖는다.
:::: disabled : 컨트롤과 상호작용이 가능한지 여부를 지정한다. 지정하지 않을 경우 상위 태그의 설정을 상속받는다.
-- bool값을 가지며 true일 경우 포커스도 잡을 수 없고 내용이 아예 제출되지 않는다.
:::: readonly : 사용자가 컨트롤 안의 내용을 수정가능한지 여부를 지정한다. disabled 속성과는 다르게 값은 제출된다.
-- bool값을 가지며 true여도 포커스는 잡을 수 있다.
:::: required : 사용자가 양식을 제출하기 전에 이 컨트롤을 꼭 채워야 함을 나타냄. 값을 가지지 않는다.
:::: autofocus : 이 속성을 지정하면 페이지를 불러왔을 때 자동으로 포커스를 갖는다.
-- 페이지의 컨트롤 요소 중 단 하나만 이 속성을 가질 수 있다.
썸네일용