폼 관련 태그들 - 여러 데이터 나열해 보여 주기

폼 관련 태그들 - 여러 데이터 나열해 보여 주기

<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기

• 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다.
• 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름입니다.
• 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다.
• 드롭다운 목록은 <select>태그로 목록의 시작과 끝을 표시하고 그 안에 <option> 태그를 사용해 원하는 항목들을 추가합니다.
• <option> 태그에는 value 속성을 이용해 서버로 넘겨주기 위한 값을 지정합니다.

 

기본형 : <select 속성="속성 값">
                   <option value="값" [속성="속성 값"]> 내용1 </option>
                   <option value="값" [속성="속성 값"]> 내용2 </option>
                   <option value="값" [속성="속성 값"]> 내용3 </option>
             </select>

 

학과 수학교육과 역사교육과 국어교육과 체육교육과 교육학과 컴퓨터교육과

 

<div class="exam1" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <label class="reg" for="class">학과</label>
    <select id="class">
        <option>수학교육과</option>
        <option>역사교육과</option>
        <option>국어교육과</option>
        <option>체육교육과</option>
        <option>교육학과</option>
        <option>컴퓨터교육과</option>
    </select>
</div>

1) <select> 태그의 속성

• <select> 택그를 사용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭해 나머지 옵션을 살표본 후 필요한 한 가지 항목을 선택할 수 있습니다.
• size 속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절할 수 있습니다.

 

속 성	설 명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정합니다.(크롬 브라우저의 경우, size에서 지정한 개수보다 하나 더 많은 옵션이 표시됩니다.)
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있습니다.

2) <option> 태그의 속성

• 드롭다운 목록에 표시되는 옵션들은 <option> 태그를 이용해 지정합니다.

 

속 성	설 명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다.

학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과

 

<div class="exam2" style="width: 500px; height: 100px; border: 2px solid pink; padding: 20px;">
    <label class="reg" for="class">학과</label>
    <select size="5" id="class" multiple>
        <option value="archi">건축공학과</option>
        <option value="mechanic">기계공학과</option>
        <option value="indust">산업공학과</option>
        <option value="elec">전기전자공학과</option>
        <option value="computer">컴퓨터공학과</option>
        <option value="chemical">화학공학과</option>
    </select>
</div>

3) <optgroup>태그 - 옵션끼리 묶기

• 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우, <optgroup> 태그를 사용할 수 있습니다.
• <optgroup> 태그를 사용할 때는 label 속성을 사용해 그룹의 제목을 붙입니다.

 

학과 수학교육과 역사교육과 국어교육과 체육교육과 컴퓨터교육과 건축공학과 기계공학과 산업공학과 화학공학과 컴퓨터공학과

<div class="exam3" style="width: 500px; height: 100px; border: 2px solid pink; padding: 20px;">
    <label class="reg" for="class">학과</label>
    <select id="class">
        <optgroup label="사범대학">
            <option>수학교육과</option>
            <option>역사교육과</option>
            <option>국어교육과</option>
            <option>체육교육과</option>
            <option>컴퓨터교육과</option>    
        </optgroup>
        <optgroup label="공과대학">
            <option>건축공학과</option>
            <option>기계공학과</option>
            <option>산업공학과</option>
            <option>화학공학과</option>
            <option>컴퓨터공학과</option>
        </optgroup>        
    </select>
</div>

4) <datalist> 태그, <option> 태그

• 드롭다운 목록에서 <select> 태그 대신 <datalist> 태그를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있습니다. 즉 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 것입니다.
• 데이터 목록은 텍스트 필드와 함께 사용하기 때문에 <input> 태그를 함께 사용합니다. 사용하는 방법은 <input> 태그의 list 속성 값과 데이터 목록의 id를 같게 만들면 됩니다.
• type="text"일 경우, 대부분의 브라우저에서 지원하지만 number나 range, color 필드는 브라우저별이나 버전별로 지원하지 않을 수도 있습니다.
• 데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터 옵션을 표시합니다. 이 때 <option> 태그에는 value 속성과 label 속성을 사용할 수 있습니다.

 

기본형 : <input type="text" list="데이터 목록 id">
                      <datalist id="데이터 목록 id">
                      <option></option>
                      <option></option>
                      </datalist>

속 성	설 명
value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정합니다.
label	사용자를 위해 브라우저에 표시할 레이블입니다. 따로 지정하지 않을 경우, value 값을 레이블로 사용합니다.

 

관심분야

 

<div class="exam4" style="width: 500px; height: 100px; border: 2px solid pink; padding: 20px;">
    <label class="reg" for="interests">관심분야</label>
    <input type="text" id="interests" list="choices">
    <datalist id="choices">
       <option value="movie" label="영화"></option>
       <option value="theater" label="연극"></option>
       <option value="song" label="노래"></option>
       <option value="camping" label="캠핑"></option>
       <option value="trip" label="여행"></option>
       <option value="exercise" label="운동"></option>
    </datalist>
</div>

5) <textarea> 태그 - 여러 줄 입력하는 텍스트 영역 만들기

• 폼에서 텍스트나 항목을 선택하는 것이 아니라 직접 여러 줄의 텍스트를 입력하는 영역을 만들 때 <textarea>를 사용합니다.
• 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용합니다.
• <textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 몇 줄을 표시할지 지정하는 rows 속성을 사용합니다.

 

기본형 : <textarea [속성="속성 값"]> 내용 </textarea>

 

속 성	설 명
name	다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다.
cols	텍스트 영역의 가로 너비를 문자 당위로 지정합니다.
rows	텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다.

 

1:1 문의

<div class="exam5" style="width: 500px; height: 180px; border: 2px solid pink; padding: 20px;">
    <legend style="margin-bottom: 10px">1:1 문의</legend>
    <textarea name="notice" cols="20" rows="10"></textarea>
</div>

 

 

 

참고 : HTML5+ CSS3 웹 표준의 정석