FIELDSET element

<FIELDSET> <LEGEND> ... </LEGEND> </FIELDSET>
◀ ▶

---

FIELDSET element는 서로 관련있는 컨트롤들을 하나로 묶을 수 있도록 해 주며, LEGEND element는 컨트롤 묶음에 제목을 붙이는 역할을 한다. 두 element 모두 시작과 끝내는 태그로 이루어진다.

<FORM action="..." method="post">
 <FIELDSET>
  <LEGEND>Personal Information</LEGEND>
  Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
  First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
  Address: <INPUT name="personal_address" type="text" tabindex="3">
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Medical History</LEGEND>
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Smallpox" tabindex="20"> Smallpox
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Mumps" tabindex="21"> Mumps
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Dizziness" tabindex="22"> Dizziness
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Sneezing" tabindex="23"> Sneezing
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Current Medication</LEGEND>
  Are you currently taking any medication? 
  <INPUT name="medication_now" 
         type="radio" 
         value="Yes" tabindex="35">Yes
  <INPUT name="medication_now" 
         type="radio" 
         value="No" tabindex="35">No
  If you are currently taking medication, please indicate
  it in the space below:
  <TEXTAREA name="current_medication" 
            rows="10" cols="40"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM> 이렇게 나와요

LEGEND 속성

id, class, title, style

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

※ FIELDSET과 LEGEND를 활용하면 깔끔하게 화면을 정리할 수도 있다.

<FORM>
 <FIELDSET>
  <LEGEND style="color : #ff0099 ; font : 800 12pt"><IMG src="notice.gif"></LEGEND>
1. HTML 강좌가 완성되었습니다.
<BR>
2. CSS 강좌가 업데이트되었습니다.
<BR>
3. FONT에 글꼴 10개가 추가되었습니다.
 </FIELDSET>
</FORM> 이렇게 나와요

---

◀ ▶