form 컨트롤

[ex1] form, fieldset, legent, label

 

<form action="write_ok.asp" method="post">

  <fieldset>   : 컨트롤 요소 주변에 테두리 생김

<legend>필수 입력 사항</legend>   : 폼 요소의 제목. 스크린 리더기 접근성과 연관되니 꼭 써주기!!

<p><label for="userid">아이디</label> <input type="text" id="userid" /></p>

<p><label for="pwd">비밀번호</label> <input type="text" id="pwd" /></p>

  </fieldset> 

</form>

 

# label : input 의 id값과 일치하게 label for 값을 지정. 명시적 label 방법.

 

 

[ex2] label

 

 

<tr>

  <th scope="row"><label for="cellno">휴대폰</label></th>

  <td>

<input type="text" name="cellno" id="cellno" maxlength="3" size="3"  title="휴대폰 첫째자리" />

-

<input type="text" name="cellno2" maxlength="4" size="4" title="휴대폰 중간자리" />

-

<input type="text" name="cellno3" maxlength="4" size="4" title="휴대폰 끝자리" />

  </td>

</tr>

 

# label : 휴대폰번호 처럼 input이 여러개일때.

첫번째 input에다만 id값을 연결하고, 나머지엔 title만으로 대체 설명 입력.            

 

 

[ex3] radio 선택

 

<tr>

  <th scope="row">메일링 리스트 가입</th>

  <td><input type="radio" id="yes" value="Y" checked="checked" title="메일링 리스트 가입여부" />

        <label for="yes">예</label>

   <input type="radio" id="no" value="N" title="메일링 리스트 가입여부" />

         <label for="no">아니오</label>

  </td>

</tr>

 

# 스크린리더 사용자가 라디오버튼에 접근시, "예" 만 나오게하기보단

   title을 주면 메일링 리스트 가이여부에 대한 "예"를 연결지어 제공할 수 있음.

 

 

[ex4] select, 그룹화

 

<p>

  <label for="age">연령</label>

  <select id="age">

<option value="10">10대</option>

<option value="20">20대</option>

<option value="30">30대</option>

  </select>

</p>

 

# <select id="age" size="10" multiple="multiple"> 로  size를 1 이상으로 지정하면

   리스트박스 형태로 보여짐.

 

<p>

   <label for="addr">주소</label>

   <select id="addr">

<optgroup label="서울특별시">

<option value="gangnam">강남구</option>

<option value="songpa">송파구</option>

</optgroup>

<optgroup label="경기도">

<option value="anyang">안양시</option>

<option value="seoungnam">성남시</option>

</optgroup>

   </select>

 

# option을 그룹화하여 그 하위목록으로 구현할 경우. label 값으로 상위그룹 지정.

</p>

 

 

[ex5] textarea

 

<p>

  <label for="memo">메모</label>

  <textarea cols="50" rows="10" id="memo" name="memo">의견 남겨주세요</textarea> 

</p>