[HTML] HTML 입력 태그 #7

시작하기 앞서

지난 게시물에서 입력 태그인 input에 대해 알아보았다.

HTML input 태그(새 창 바로가기)

정보를 입력받을 때 사용되는 태그이지만 input 이 아닌 태그에 대해 알아볼 것이다.

 

---

textarea 태그

input 태그를 보면 내용을 입력하는 부분이 한 줄이다.

그래서 만약 게시물처럼 긴 글을 입력하고 싶을 때에는 <textarea> 태그를 사용한다.

<h3>textarea 태그</h3>
<label for="message">메시지를 입력하세요.</label> <br />
<textarea id="message"></textarea>

그러면 긴 텍스트를 입력하는 창이 생긴다.

결과

textarea - 크기 변경

만약 텍스트 창의 크기를 수정하고 싶으면

cols, rows 속성을 사용하여 각각 열(가로)과 행(세로) 수를 설정하여 크기를 수정한다.

<textarea id="message" cols="30" rows="5"></textarea>

그래서 가로는 30개 만큼 커졌고, 세로는 5개 만큼 커졌다.

결과

 

textarea - 입력 값 넣기

input 태그에서 입력 값을 넣어줄 때, value 라는 속성을 사용했다.

하지만 <textarea> 태그에서는 태그 사이에 값을 넣어준다.

<textarea id="message" cols="30" rows="5">textarea 입니다.</textarea>

결과

 

textarea - 다양한 속성

<textarea> 도 input 처럼 다양한 속성이 있고 서로 같거나 비슷한 속성들이 많다.

 

지난 게시물에서 사용해 본 readonly, autofocus, disabled, minlength, maxlength, placeholder 등

모두 사용할 수 있다.

<h3>다양한 속성</h3>
<textarea readonly>읽기 전용</textarea>
<textarea autofocus>자동 포커스</textarea>
<textarea disabled>입력 불가</textarea>
<textarea minlength="1" maxlength="6"></textarea>
<textarea placeholder="내용을 입력하세요."></textarea>

결과

이 외에도 다양한 속성들을 확인하고 싶으면 아래 링크를 참고하면 된다.

<textarea>: The Textarea element - HTML: HyperText Markup Language | MDN

 

---

select, option 태그

html 에서 옵션들을 선택하는 <select>, <option> 태그가 있다.

사용방법은 <select> 태그 안에 선택할 <option> 태그를 넣으면 된다.

<label for="grade">학년</label> <br />
<select id="grade">
  <option value="">-- 학년 선택 --</option>
  <option value="one">1학년</option>
  <option value="two">2학년</option>
  <option value="three">3학년</option>
  <option value="four">4학년</option>
</select>

참고로 value 값은

선택한 값을 제출하여 서버로 전달될 때, value 값으로 전달된다.

결과

 

select, option - 그룹

option 값들을 그룹으로 만들어 선택할 수 있다.

그룹으로 만들 때에는 <otpgroup> 태그를 사용하여 해당 태그 안에 <option> 태그들을 넣으면 된다.

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

결과

 

select, option - 속성

<select> 와 <option> 도 다양한 속성들이 있다.

 

<select>에 disabled 속성을 넣으면

<select id="grade" disabled>
...

옵션을 선택할 수 없게 막혀있게 된다.

결과

<option>에 disabled 과 selected 속성을 넣으면

    <select id="shopping">
      <optgroup label="과일">
        <option value="f_apl">사과</option>
        <option value="f_grp" selected>포도</option>
        <option value="f_org">오렌지</option>
      </optgroup>
      <optgroup label="채소">
        <option value="v_crt">당근</option>
        <option value="v_tmt" disabled>토마토</option>
        <option value="v_ept">가지</option>
      </optgroup>
    </select>

selected 를 한 포도는 처음부터 값이 선택되었고,

disabled 를 한 토마토는 선택할 수 없게 되었다.

결과

 

---

progress, meter 태그

<progress> 와 <meter> 태그는 정도를 표현할 때 사용되는 태그이다.

 

progress 태그

<progress> 태그는 최댓값 max와 value 값을 지정한다.

<h2>progress 태그</h2>
<progress id="progressBar" max="100" value="0">0%</progress> <br />
<progress id="progressBar" max="100" value="50">50%</progress> <br />
<progress id="progressBar" max="100" value="100">100%</progress> <br />

이는 추후에 javascript 를 사용하여, 진행 상황에 맞게 value 값을 변경시켜 주면 된다.

결과

 

meter 태그

<meter> 는 <progress> 와 다르게 최솟값 min 을 설정해야 한다.

그리고 low 와 high 를 사용하여 구간을 3개로 나눌 수 있으며,

이상적인 값 optimun 에 따라 value 값이 적합한지, 부적합한지, 많이 부적합한지 색으로 표현해 준다.

    <h2>meter 태그</h2>
    <meter min="0" max="100" low="33" high="67" optimum="10" value="25">
      25
    </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="75">
      75
    </meter>

아래 meter 는 min(0)부터 max(100)까지 범위이며,

구간을 low(33), high(67) 기준으로 나뉘어 0~33, 33~67, 67~100 세 구간이 된다.

그러면 이상적인 값 optimum(10) 이 있는 구간은 초록색, 한 구간 떨어져 있으면 노란색, 두 구간 떨어져 있으면 빨간색이 된다.

• value가 25일 경우, optimum 이 있는 0~33 구간이라 초록색
• vlaue가 50일 경우, optimum 와 한 구간 떨어진 33~67 구간이라 노란색
• vlaue가 75일 경우, optimum 와 두 구간 떨어진 67~100 구간이라 빨간색

 

결과

 

---

 

마무리 하며...

해당 게시물에서 input 이외에 다양한 입력 태그에 대해 알아보았다.

그중에서 progress 와 meter 는 잘 모르고 있었던 태그인데 이번에 알게 되어 좋았다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)