[HTML] 웹폼 Webform : <label>, <fieldset>

slowreem 2021. 4. 13. 16:36

4. <label>로 폼 요소의 캡션 만들기

<label> 태그를 이용하면 캡션과 폼 요소를 한 단위로 묶어 많은 장점을 가진다. 대표적으로 캡션 문자열 위에 마우스를 클릭해도 폼 요소를 클릭한 것으로 처리된다. <label>을 사용하는 방법에는 다음 두 가지가 있다.

<label> 
	짜장면 <input type="radio" name="china" value="1">
</label>

<label for="china"> 짜장면 : </label>
<input type="radio" name="china" id="china" value="1">

10. 폼 요소들의 그룹핑, <fieldset>

<fieldset> 태그로 폼 요소들을 그룹으로 묶을 수 있으며, 그룹의 제목은 <legend> 태그로 표현한다.

<fieldset>
	<legend> 예약자 정보 </legend>
		<label> 예약자 : <input type ="text" size="20" value=""/>
		</label> <br>
		<label> 휴대폰 : <input type ="tel" placeholder="01*-000*-0000"/>
		</label> <br>
		예약인원 : 
			<select name="people"> 
				<option value-"2"> 2명 </option>
				<option value-"3"> 3명 </option>
				<option value-"4"> 4명 </option>
				<option value-"5"> 5명 </option>
				<option value-"6"> 6명 </option>
				<option value-"7"> 7명 </option>
				<option value-"8"> 8명 </option>
			</select>
</fieldset>