FIELDSET과 LEGEND는 우리나라의 사이트에서는 흔히 사용하지 않는 태그이다.
하지만 이 포스트를 읽고 나면 아마도 당신은 이 두 태그를 사랑하지 않을 수 없을 것이라 장담한다.
다음 캡쳐이미지를 보자.
Firefox/2.0.0.1 의 화면
언뜻 보면 레이어를 사용한 레이아웃 같다.
하지만 이어지는 코드를 보면 동공이 놀랄것이다.
<FORM action="..." method="post">
<P>
<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">
...more personal information...
</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
...more medical history...
</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="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
- 이 코드는 w3c.org에서 발췌한 것임
- 원문 URL : http://www.w3.org/TR/html4/interact/forms.html#idx-label-2
예상한것과는 전혀 다르다.
레이어도 없고 테이블도 없다.
오로지 순수한 HTML 태그만을 써서 저런 레이아웃을 만들었다.
저 태그들은 IE전용 태그도 아니며 w3c에 나와있는 표준 태그이다.
어떤가, 아름답지 아니한가???
'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글
가로 세로 정중앙에 위치하는 레이어 만들기 (0) | 2007.02.15 |
---|---|
[HTML] LABEL과 사용자 중심의 프로그래밍-UI (3) | 2007.01.05 |
[CSS] onMouseOver,onMouseOut은 그만!! (17) | 2007.01.03 |
이벤트 Fake!!! (0) | 2006.12.12 |
키입력 이벤트처리 (2) | 2006.12.06 |