여러 데이터 나열해 보여주기

43644 단어 htmlhtml

지금까지는 <input>태그로 한 줄 짜리 데이터를 입력할 수 있는 폼 요소들을 배웠습니다.
이번에는 한 줄 짜리가 아닌 다른 태그를 사용해 여러 데이터를 나열해 보여주고 사용자가 선택할 수 있도록 해주는 폼 요소들을 살펴 보겠습니다.

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

사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다.

  • 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다.
  • 드롭다운 목록은 <select>와 <option>태그를 이용해 표시합니다.
  • <select>태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 <option>태그를 사용해 원하는 항목들을 추가합니다.
  • <option>태그에는 value 속성을 이용해 서버로 넘겨주기 위한 값을 지정합니다.

<select>태그의 속성

속성설명
size화면에 표시될 드롭다운 메뉴의 항목 개수를 지정합니다.
multiple브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있습니다.

드롭다운 목록 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>드롭다운 목록 만들기</title>
    <style>
        body {
           background-color:#fff; 
        }
        form fieldset{
           margin-bottom:25px; 
        }
        form legend{
           font-size:15px;
           font-weight:600; 
        }
       .reg {
           font-size:14px;
           width:110px;
           color:#390;
           font-weight:bold;		
           float:left;
           text-align:right;
           margin-right:10px;
        }	 
        form ul li{
           list-style:none; 
           margin: 15px 0;	
           font-size:14px;	
        }
</style>
</head>
<body>
    <h1>여름방학 특강 신청</h1>
    <form>
    <fieldset>
        <legend>수강 신청인</legend>
        <ul>
            <li>
                <label class="reg" for="uid">학번</label>
                <input type="text" id="uid" autofocus required>
            </li>
            <li>
                <label class="reg" for="uname">이름</label>
                <input type="number" id="uname" required >
            </li>
            <li>
                <label class="reg" for="class">학과</label>
                <select size="5" multiple id="class">
                <option value="archi">건축공학과</option>
                <option value="mechanic">기계공학과</option>
                <option value="indust">산업공학과</option>
				<option value="elec">전기전자공학과</option>
				<option value="computer" selected>컴퓨터공학과</option>
				<option value="chemical">화학공학과</option>
                </select>
            </li>
        </ul>
    </fieldset>
    </form>
</body>
</html>

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

드롭다운 목록에서 여러 항목들을 몇가지 그룹으로 묶어야 할경우, <optgroup>태그를 사용할 수 있습니다.

  • <optgroup>태그를 사용할 때는 label속성을 사용해 그룹의 제목을 붙입니다.

다음은 하나의 select태그 안에서 여러 개의 option태그드들을 두 개의 optgroup으로 묶은 예제입니다.

 <li>
                <label class="reg" for="class">학과</label>
                <select size="5" multiple id="class">
                    <optgroup label="공과대학">
                <option value="archi">건축공학과</option>
                <option value="mechanic">기계공학과</option>
                <option value="indust">산업공학과</option>
				<option value="elec">전기전자공학과</option>
				<option value="computer" selected>컴퓨터공학과</option>
				<option value="chemical">화학공학과</option>
                </optgroup>
                <optgroup label="인문대학">
                   <option value="history">사학과</option>
                   <option value="lang">어문학부</option>
                   <option value="philo">철학</option>
                </optgroup>
                </select>
            </li>

<datalist>,<option>태그

앞에서 배운 드롭다운 목록에서 <select>태그 대신<datalist>태그를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있습니다.

  • 즉 텍스트 필드에 직접 값을 입력하는 것이아니라 데이터 목록에 제시한 값중에서 선택하면 자동으로 입력되는 것입니다.
  • 데이터 목록은 텍스트 필드와 함께 사용하기 때문에 <input>태그를 함께 사용합니다.
  • 사용방법은 <option>태그의 list속성 값과 데이터 목록의 id를 같게 만들면 됩니다.
속성설명
value사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정합니다.
label사용자를 위해 브라우저에 표시할 레이블입니다. 따로 지정하지 않을 경우, value 값을 레이블로 사용합니다.

데이터 목록 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>데이터 목록 만들기</title>
    <style>
        body {
           background-color:#fff; 
        }
        form fieldset{
           margin-bottom:25px; 
        }
        form legend{
           font-size:15px;
           font-weight:600; 
        }
       .reg {
           font-size:14px;
           width:110px;
           color:#390;
           font-weight:bold;		
           float:left;
           text-align:right;
           margin-right:10px;
        }	 
        form ul li{
           list-style:none; 
           margin: 15px 0;	
           font-size:14px;	
        }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>수강 과목을 선택하세요</legend>
            <ul>
                <li>
                    <span class="reg">관심분야</span>
                    <label for="interest"></label>
                    <input type="text" id="interest" list="choices">
                    <datalist id="choices">
                        <option value="grammer" label="문법"></option>
                        <option value="voca" label="어휘"></option>
						<option value="speaking" label="회화"></option>
						<option value="listening" label="리스닝"></option>
						<option value="news" label="뉴스청취"></option>
                    </datalist>
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

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

폼에서 텍스트나 항목을 선택 하는 것이 아니라 직접 여러줄의 텍스트를 입력하는 영역을 만들 수 있습니다.

  • 이 영역을 텍스트영역이라고 하며 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다.
  • <textarea>태그의 속성
속성설명
name다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다.
cols텍스트 영역의 가로 너비를 문자 단위로 지정합니다..
rows텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아 지면 스크롤 막대가 생깁니다.

텍스트 영역 삽입하기

<body>
    <form>
        <fieldset class="easys">
            <legend>이지스퍼블리싱</legend>
            <textarea name="intro" cols="60" rows="5">
        </textarea>

    </fieldset>
</form>
```

디자인 모드 1 일 1 연: 형 원 모드 (Flyweight)
디자인 모델 의 추상 적 인 공장 모델 --- abstract factory

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage