form 태그는 앞에서 살펴본 input 태그 외에도 select, textarea 등 다양한 태그가 내부에 들어올 수 있다. 이번 파트에서는 input 태그에서 type 속성으로 radio 또는 checkbox를 사용해 구현한 형태와 유사한 형태를 표현하는 select 태그와 input 태그 보다 많은 텍스트를 담을 수 있는 textarea 태그를 중심으로, form 태그 내부에 위치하는 태그들을 살펴본다.
Form 태그가 포함하는 내부 태그들 살펴보기
CONTENTS
드롭다운 목록을 만드는 select 태그
기본적으로 select 태그는 input 태그의 radio 타입과 checkbox 타입과 유사한 형태이다. 하지만 모든 목록을 다 보여줄 필요가 없이 드롭다운으로 선택하는 형태를 표현할 때 select 태그가 적합하다.
select 태그 예시
select 태그는 드롭 다운 리스트를 표현한다:
<form action="######">
<label for="cars">차를 선택하세요:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="선택">
</form>
위의 예시처럼 컨테이너 역할을 하는 form 태그 내부에서 select 태그는 option 태그를 사용하여 드롭다운 리스트를 구현할 수 있다. 이때 기본적으로 맨 처음 option 태그 value값이 보여진다. 이때 다른 option 태그를 기본값으로 보여주고 싶으면 option 태그에 selected 속성만 추가하면 된다.
option 태그 selected 속성
selected 속성은 처음에 보여줄 항목을 지정한다:
위와 같이 audi를 담고 있는 option 태그에 selected 속성만 추가했다. 더불어 마지막 input 태그 타입이 submit에 value값을 생략하면 submit 타입의 디폴트값이 제출로 표현한다.
다음으로 input 태그에서 radio 타입을 사용해서 구현한 방식과 유사하게 여러 목록을 보여줄 수 있는 selcet 태그 속성으로 size가 있다. 문자 그대로 목록을 몇 개 보여줄 지 size 속성값으로 기입하면 된다.
select 태그 size 속성
size 속성을 사용하여 보여줄 목록 수를 지정한다:
<select id="cars" name="cars" size="3">
위 코드는 처음 코드에서 select 태그에 size 속성만 추가했을 뿐이다. 이것만으 input 태그에서 radio 타입을 사용한 것과 유사한 형태를 구현할 수 있다.
다음으로는 input 태그에서 checkbox 타입을 사용해서 여러 항목을 선택하는 형태를, select 태그에 multiple 속성만 추가해서 구현할 수 있다.
select 태그 multiple 속성
multiple 속성을 사용하여 다중 선택을 구현한다:
<select id="cars" name="cars" size="4" multiple>
위와 같이 처음 코드에서 select 태그 속성 부분만 바뀌였다. size 속성을 사용하여 모든 항목을 보여주고, multiple 속성을 사용하여 다중선택이 가능하도록 구현했다. 이때 윈도우 운영체계를 기준으로 ctrl 키를 누르고 선택해야 다중선택이 가능하다.
텍스트 영역을 구현하는 textarea 태그
input 태그는 text 타입을 사용해서 문자를 입력할 수 있다. 하지만 기본적으로 21자까지만 가능하다. 조금 긴 문장을 입력할 때에는 input 태그 대신에 textarea 태그를 사용한다.
textarea 태그
textarea 태그는 여러 줄을 입력할 수 있는 텍스트 영역을 구현한다.
<form action="####">
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
<input type="submit">
</form>
위와 같이 textarea 태그에 rows 속성과 cols 속성으로 줄과 너비를 지정할 수 있다. rows과 cols 대신에 textarea 태그에 style를 사용해서도 구현은 가능하다.
그룹화를 구현하는 fieldset 태그
입력폼에서 관련 데이터를 그룹화하여 보기 좋게 표현할 때 사용하는 태그가 fieldset 태그이다. 이때 그룹화한 fleldset 태그의 캡션은 legend 태그에 담을 수 있다.
폼 양식에서 그룹화에 사용하는 fieldset 태그
form 태그 내부에 위치하는 fieldset 태그는 내부에 legend 태그를 사용해 캡션을 넣을 수 있다.
<form action="#####">
<fieldset>
<legend>신상명세서:</legend>
<label for="fname">성:</label><br>
<input type="text" id="fname" name="fname" value="성을 입력해주세요"><br>
<label for="lname">이름:</label><br>
<input type="text" id="lname" name="lname" value="이름을 입력해주세요"><br><br>
<input type="submit" value="입력 완료">
</fieldset>
</form>
위의 코드에서 보듯이 form 태그 내부에 fieldset 태그를 사용한다. 또한 fieldset 태그 내부에 legend 태그를 사용하여 전체 그룹의 캡션 역할을 구현하고, input 태그를 비롯하여 select, textarea 태그 등 폼 요소 태그를 내부에 넣어 그룹화를 구현한다.
이외에도 HTML5에서는 form 태그에 많은 요소들이 추가됐다. 대표적으로 datalist 태그, output 태그 등이 있는데, 이와 관련해서는 다음 파트에서 살펴본다.
