네이버 검색폼에 보면 FIELDSET과 LEGEND 태그를 좀 의미 있게 쓸려고한거같다.
select 구문에 blind처리된걸로 보아 시각장애인용 ,백그라운드용 처리할것으로 보임…
아주 저세상으로 보내버리셨다.( position: absolute; top: -1000em; left: 0;)
#CSS
#HTML
<fieldset>
<legend>검색</legend>
<select id=”where” name=”where” title=”검색 범위 선택” class=”blind”>
<option value=”nexearch” selected=”selected”>통합검색</option>
<option value=”post”>블로그</option>
<option value=”cafeblog”>카페</option>
<option value=”cafe”>- 카페명</option>
<option value=”article”>- 카페글</option>
<option value=”kin”>지식iN</option>
<option value=”news”>뉴스</option>
<option value=”web”>사이트</option>
<option value=”category”>- 카테고리</option>
<option value=”site”>- 사이트</option>
<option value=”movie”>영화</option>
<option value=”webkr”>웹문서</option>
<option value=”dic”>사전</option>
<option value=”100″>- 백과사전</option>
<option value=”endic”>- 영어사전</option>
<option value=”eedic”>- 영영사전</option>
<option value=”krdic”>- 국어사전</option>
<option value=”jpdic”>- 일본어사전</option>
<option value=”hanja”>- 한자사전</option>
<option value=”terms”>- 용어사전</option>
<option value=”book”>책</option>
<option value=”music”>음악</option>
<option value=”doc”>전문자료</option>
<option value=”shop”>쇼핑</option>
<option value=”local”>지역</option>
<option value=”video”>동영상</option>
<option value=”image”>이미지</option>
<option value=”mypc”>내PC</option>
<optgroup label=”스마트 파인더”>
<option value=”movie”>영화</option>
<option value=”auto”>자동차</option>
<option value=”game”>게임</option>
<option value=”health”>건강</option>
<option value=”people”>인물</option>
</optgroup>
<optgroup label=”네이버 랩”>
<option>긍정부정검색</option>
</optgroup>
</select>
<span class=”green_window”><input id=”query” name=”query” type=”text” title=”검색어 입력” class=”input_text” tabindex=”1″ accesskey=”s” style=”ime-mode:active;” autocomplete=”off” onclick=”document.getElementById(‘fbm’).value=1;”></span><button id=”search_btn” type=”submit” title=”검색” tabindex=”3″ class=”sch_smit” onmouseover=”this.className=’sch_smit over'” onmousedown=”this.className=’sch_smit down'” onmouseout=”this.className=’sch_smit'” onclick=”clickcr(this,’sch.action’,”,”,event);”><span class=”ir”>검색</span></button>
<input type=”hidden” id=”sm” name=”sm” value=”top_hty”>
<input type=”hidden” id=”fbm” name=”fbm” value=”1″>
<input type=”hidden” id=”acr” name=”acr” value=”” disabled=””>
<input type=”hidden” id=”acq” name=”acq” value=”” disabled=””>
<input type=”hidden” id=”qdt” name=”qdt” value=”” disabled=””>
<input type=”hidden” id=”ie” name=”ie” value=”utf8″>
</fieldset>
FIELDSET과 LEGEND는 우리나라의 사이트에서는 흔히 사용하지 않는 태그이다.
하지만 이 포스트를 읽고 나면 아마도 당신은 이 두 태그를 사랑하지 않을 수 없을 것이라 장담한다.
다음 캡쳐이미지를 보자.
언뜻 보면 레이어를 사용한 레이아웃 같다.
하지만 이어지는 코드를 보면 동공이 놀랄것이다.
<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에 나와있는 표준 태그이다.
어떤가, 아름답지 아니한가???
16 Replies to “HTML태그 – FIELDSET과 LEGEND”