html-9: 사용자에게 정보 입력받기-4

사용자에게 정보 입력 받기 -4

textarea 전용 속성들

속성	설명	비고
cols	글자수 단위의 너비	기본값 20
rows	‘표시’되는 줄 수

<label for="message">메시지를 입력하세요.</label> <br>
<textarea id="message" cols="64" rows="5"></textarea>

* textarea는 기본값을 value 속성이 아닌 컨텐츠로 입력

옵션들을 사용하는 태그

selcet, option 태그

<label for="lang">언어</label> <br>
  <select id="lang">
    <option value="">-- 언어 선택 --</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">자바스크립트</option>
    <option value="ts">타입스크립트</option>
  </select>

optgroup 태그

  <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>

datalist 태그

  <label for="job">현재 직업</label> <br>
  <input id="job" list="jobs">
  <datalist id="jobs">
    <option value="학생">
    <option value="디자이너">
    <option value="퍼블리셔">
    <option value="개발자">
  </datalist>

정도를 표현하는 태그

porgress 태그 속성

속성	설명	비고
max	최대값	기본: 1
value	진행 수치	자바스크립트로 변경

meter 태그 속성

속성	설명	비고
min, max	최소값과 최대값
low, high	전체 범위를 3등분하는 두 수치
optimum	이상적인 값	3개의 구간 중 한 곳에 위치
value	실제 값

  <progress 
    id="progressBar" 
    max="100">
    0%
  </progress>
  <button id="prgStartBtn" type="button">시작</button>


  <br><br>


  <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>