블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

'FIELDSET'에 해당되는 글 1

  1. 2007.01.05 [HTML] FIELDSET과 LEGEND
2007. 1. 5. 15:12 Programing/HTML/JavaScript/CSS

FIELDSETLEGEND는 우리나라의 사이트에서는 흔히 사용하지 않는 태그이다.
하지만 이 포스트를 읽고 나면 아마도 당신은 이 두 태그를 사랑하지 않을 수 없을 것이라 장담한다.

다음 캡쳐이미지를 보자.

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에 나와있는 표준 태그이다.
어떤가, 아름답지 아니한가???
posted by 초딩입맛제주아재

댓글을 달아 주세요

prev 1 next