Form에서 label과 input 요소의 연결 및 title 사용법

기본적으로 사용하는 input 요소와 label을 짝을 이룹니다.

<label for="valA" id="labA">A</label>
<input id="valA" title="A의 값을 입력하세요." type="text">

 

체크박스와 라디오의 경우 input요소 뒤에 label이 위치해야 합니다.

<input id="valB" title="B 선택" type="checkbox">
<label for="valB">B</label>

 

하지만, 디자인이 label을 수용할 수 없을 때 혹은 label로 식별되는 텍스트가 없을 때, 혹은 label을 표시하는 것이 혼란스러울 수 있는 곳에서는 title 만으로 폼 컨트롤을 식별하게 됩니다.

 

검색의 경우

<label for="searchTerm">Search for</label>

<select title="검색범위">
  <option>subject</option>
  <option>actor</option>
  <option>writer</option>
  <option>content</option>
</select>

<input id="searchTerm" title="검색어를 입력하세요"/>

 

전화번호의 경우

<fieldset>
  <legend>전화번호</legend>
  <input id="areaCode" title="지역번호" type="text" size="3">
  <input id="exchange" title="국번" type="text" size="3">
  <input id="lastDigits" title="전화번호" type="text" size="4">
</fieldset> 

그 외 label을 쓰지 않는 경우

• 전송과 초기화 버튼 (input type="submit" 또는 input type="reset")
• 이미지 버튼 (input type="image")
• 숨겨진 입력필드 (input type="hidden")

스크립트 버튼 (input type="button")