textarea태그는 말 그대로 텍스트를 쓰는 공간이다.
전용 속성으로
cols: 글자 수 단위의 너비 (기본값 20)
rows: 표시되는 줄 수 -> 줄 수 넘어서도 입력은 가능하지만 스크롤을 이용하여 내려야한다.
textarea는
<textarea>기본값</textarea>로 써야함으로
input 태그와는 다르다. -> input은 value 속성을 이용.
mdn에서 엄지가 밑으로 향하는 건 권장되지 않음을 뜻한다.
그 외 다양한 기능들은 mdn에서 확인, 심화하여 사용해보자.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea
select태그 안에 option 태그가 자식으로 들어가있다.
<select>
<option value=" ">-- 언어 선택 --</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">자바스크립트</option>
.
.
.
</select>
value 값 안의 내용이 서버로 전송된다.
기본적으로 선택되어 있으려면 selected 써준다.
<option value="html" selected>HTML</option>
multiple 속성 사용 가능, 그러나 쉬프트를 누르고 동시에 선택해야 하는데 이것은 사용자에게 친절한 UI가 아니다. 체크박스를 실질적으로 권장한다.
select할 목록을 그룹화시킨다.
<label for="shopping">쇼핑 목록</label> <br>
<select id="shopping">
<optgroup label="과일">
<option value="f_apl">사과</option>
<option value="f_grp">포도</option>
<option value="f_org">오렌지</option>
</optgroup>
<optgroup label="채소">
<option value="v_crt">당근</option>
<option value="v_tmt">토마토</option>
<option value="v_ept">가지</option>
</optgroup>
<optgroup label="육류">
<option value="m_bef">소고기</option>
<option value="m_prk">돼지고기</option>
<option value="m_ckn">닭고기</option>
</optgroup>
</select>
자체는 input태그이지만 클릭해보면 여러 옵션이 있음
input태그에 list 속성의 이름과 datalist id와 동일하게끔 하여 연결을 시킨다.
datalist태그 안의 option태그는 value에다가 값을 넣는다.
input의 text 속성처럼 텍스트를 작성할 수 있지만, 또한 사이트를 만든 사람이 권장하는 샘플 값들도 볼 수 있게 만든다.
<label for="job">현재 직업</label> <br>
<input id="job" list="jobs">
<datalist id="jobs">
<option value="학생">
<option value="디자이너">
<option value="퍼블리셔">
<option value="개발자">
</datalist>
동적인 움직임을 보여줄 때 사용한다.
<progress
id="progressBar"
max="100"
>
0%
</progress>
<button id="prgStartBtn" type="button">시작</button>
max와 value 속성을 이용하여
<progress
max="100"
value="50"
>
50% -> value 값만 적어도 되지만 시각적 인식이 아닌 스크린리더로 이용하는 사람들
을 위해서 태그 안의 내용도 명시해야한다.
</progress>
속성 : min, max, low, high, optinum(이상적인 값), value
optinum 속성은 어떤 값이 좋고, 나쁘고, 덜 나쁜지를 판단하는 기준 값이 된다.(이상적인 값의 의미)
가치 판단을 하지 않으려면 low, high, optinum을 사용 안하면 된다.
<h2>
meter 태그
</h2>
<meter
min="0" max="100"
low="33" high="67"
optimum="50" value="20">
20달러
</meter>
<meter
min="0" max="100"
low="33" high="67"
optimum="50" value="50">
50달러
</meter>
<meter
min="0" max="100"
low="33" high="67"
optimum="50" value="80">
80달러
</meter>
<br>
<meter
min="0" max="100"
low="33" high="67"
optimum="10" value="20">
20달러
</meter>
<meter
min="0" max="100"
low="33" high="67"
optimum="10" value="50">
50달러
</meter>
<meter
min="0" max="100"
low="33" high="67"
optimum="10" value="80">
80달러
</meter>
<br>
<meter
min="0" max="100"
low="33" high="67"
optimum="90" value="20">
20달러
</meter>
<meter
min="0" max="100"
low="33" high="67"
optimum="90" value="50">
50달러
</meter>
<meter
min="0" max="100"
low="33" high="67"
optimum="90" value="80">
80달러
</meter>