HTML5 - 여러 값 표현 태그 - select / textarea

여러 값 표현 태그

값을 표현하는 태그 중에선 여러 가지 방법이 있다.

 

 

<select></select> 태그

여려값 중 하나의 값을 선택하는 태그이다.

<select> 태그 안에는 값을 선택할 수 있는 <option> 태그가 있다.

 

select 작성법

<select size='숫자' id=''>
  <option value='값'>표시내용</option>
  <option value='값'>표시내용</option>
  <option value='값' selected>표시내용</option> // selected : 초기값 표시
</select>

 

select 속성으로는 size, multiple 이 있다.

 

option 속성으로는 value, selected 가 있다.

* selected가 없으면 첫번째 option의 값이 기본값으로 선택된다.

 

select 태그 예시

<h3>select와 option태그</h3>
전화번호 :
<select name="phone" id="">
  <option value="010">010</option>
  <option value="011">011</option>
  <option value="016">016</option>
  <option value="019">019</option>
  <option value="none" selected>없음</option>
</select>

 

 

반응형

 

 

<optgroup></optgroup> 태그

option태그를 그룹으로 나누어 선택할 수 있도록 묶어주는 태그이다.

 

optgroup 태그 작성법

<select size='숫자' id=''>
  <optgroup lebel='목록이름'>
    <option value='값'>표시 내용</option>
    <option value='값'>표시 내용</option>
  </optgroup>
  <optgroup lebel='목록이름'>
    <option value='값'>표시 내용</option>
    <option value='값'>표시 내용</option>
  </optgroup>
</select>

 

optgroup 속성으로는 label이 있다.

 

optgroup 태그 예시

<h3>select와 optgroup태그</h3>
선택하세요.
<select name="phone" id="">
  <optgroup label="첫번째">
    <option value="1">1-1</option>
    <option value="2">1-2</option>
  </optgroup>
  <optgroup label="두번째">
    <option value="3">2-1</option>
    <option value="4">2-2</option>
  </optgroup>
</select>

 

 

<textarea></textarea> 태그

여러 줄을 입력할 수 있는 태그이다.

textarea 태그 작성법

<textarea name="이름" rows="행의갯수" cols="열의 갯수"></textarea>

 

textarea 속성으로는 rows, cols가 있다.

rows : 줄의 갯수 

cols : 개수만큼의 글자를 입력할 수 있다.

*초과 시 스크롤바가 생긴다.

 

textarea 작성법

<h3>textarea</h3>
<p>text를 여러 줄 입력할 수 있는 태그</p>
<textarea rows="10" cols="30" ></textarea>