[HTML] 폼 구성하기(fieldset 태그, legend 태그, textarea 태그, select 태그, option 태그, optgroup 태그) -2

1. fieldset 태그/ legend 태그

form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해 그룹 지을 수 있다.

fieldset 태그로 그룹을 지으면 그룹별로 박스모양의 테두리가 생성되며 이렇게 그룹 지은 요소들은

legend 태그로 이름을 붙일 수 있다

<form action="#">
	<fieldset>
    	<legend>그룹 이름</legend>
        <!-- 상호작용 요소 생략 -->
    </fieldset>
</form>

 

위의 형식을 바탕으로 예시를 만들어 보았다

<form>
            <fieldset>
                <legend>기본 정보</legend>
                <p>
                    <label for="userid">아이디</label>
                    <input type="text" id="userid">
                </p>
                <p>
                    <label for="userpw">비밀번호</label>
                    <input type="password" id="userpw">
                </p>
            </fieldset>
            <fieldset>
                <legend>선택 정보</legend>
                <p>
                    <label for="age">나이</label>
                    <input type="number" id="age">
                </p>
                <p>
                    <label for="recommender">추천인</label>
                    <input type="text" id="recommender">
                </p>
            </fieldset>
</form>

 

 

---

2. textarea 태그

여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용한다.

웹 사이트에서 글을 작성할 사용하는 입력 요소는 대부분 textarea 태그로 생성한다.

형식)
	<textarea>초깃값</textarea>

 

textarea를 활용한 예시는 아래와 같다

<form action="#" method="post">
        <fieldset>
            <legend>블로그 글쓰기</legend>
            <p>
                <label for="title">제목
                    <input type="text" id="title" name="title">
                </label>
            </p>
            <p>
                <label for="desc">내용
                    <textarea id="desc" name="desc"></textarea>
                </label>
            </p>
        </fieldset>
       </form>

 

 

---

 

3. select, option, optgroup 태그

select 태그를 사용하면 콤보박스를 생성할 수 있으며 콤보박스에 항목 하나를 추가할때는 option태그를 사용하고 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용한다

<select>
	<optgroup label="그룹 이름">
		<option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
	</optgroup>
</select>

option 태그는 서버에 전송할 값을 value 속성으로 지정할 수 있는데 속성을 생략하면 option 태그의 콘텐츠로 적은 테스트가 값으로 전송되며 optgroup 태그로 항목들을 그룹 지을 때 반드시 label 속성으로 그룹명을 지정해야 한다

 

아래는 option 태그를 사용한 예시 코드다

<select name="city" id="city">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
</select>

optgroup 태그로 관련 있는 항목을 그룹지으면 아래와 같다

<select name="city" id="city">
                    <optgroup label="서울시">
                        <option value="강북구">강북구</option>
                        <option value="강남구">강남구</option>
                        <option value="서초구">서초구</option>
                    </optgroup>
                    <optgroup label="경기도 성남시">    
                        <option value="중원구">중원구</option>
                        <option value="분당구">분당구</option>
                    </optgroup>
</select>

이 외에도 select 태그와 몇 가지 속성을 함께 사용하면 콤보박스를 여러 형태로 만들 수 있다.

 

 

   - size 속성

size 속성은 콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성으로 속성값으로 숫자를 적으면 되고, 생략할 경우 기본 1개 항목이 표시된다.

 

아래의 코드처럼 size 속성값을 3으로 지정하면 화면에 항목 3개를 표시한다

---

 

   - multiple 속성

select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택할 수 있으나, multiple 속성을 사용하면 여러 항목을 동시에 선택할 수 있다(콤보박스에서 항목 하나를 선택한 상태로 ctrl을 누르고 다른 항목을 클릭하면 된다

 

---

 

   - selected 속성

콤보박스는 첫번째 option 태그의 값이 기본 선택된 상태로 표시되는데 selected 속성을 사용하면 기본 선택 항목을 변경할 수 있다. 아래의 예시 코드에서 확인할 수 있다.

여러개의 option 태그에 selected 속성을 사용하면 selected 속성이 마지막으로 사용된 option 태그가 기본값으로 표시된다