form 입력에 대한 처리

<script type="text/javascript">
//<![CDATA[
function fm_check()
{
 fm = $('fm_edit');
 if(fm.id != '')
 {
   alert('아이디: 4 ~ 15자 이내로 입력하세요.');
   fm.id.focus();
   return false;
 }
 :
 :
 return true;  
}

<p><img src="../lib/img/icon_check.gif" alt="필수" /> 표시는 필수항목입니다</p>
<form name="fm_edit" id="fm_edit" action='./index.php' method="post" onsubmit="return fm_check();">
<table class="member_table" cellspacing="0" border="0" summary="회원가입 등록을 위한 정보입력">
<caption class="hidden">회원가입 등록</caption>
<tbody>
<tr>
<th scope="row"><label for="mem_id"><img src="../lib/img/icon_check.gif" alt="필수" /> 아이디</label></th>
<td><input name="id" id="mem_id" type="text" /> (4~15자 이내 영문, 숫자 조합)
    <a href="#" onclick="OpenIdCheck(); return false;" title="새창"><img src="img/b_idcheck.gif"
     width="50" height="17" border="0" alt="중복확인" /></a>
</td>
</tr>
:
<tr>
<th scope="row"><label for="tel4_1">휴대폰</label></th>
<td><select name="tel4_1" id="tel4_1" class="input" title="첫번째 자리">
     <option value="011">011</option></select>
    - <input type="text" name="tel4_2" size="4" class="input" maxlength="4" title="두번째 자리" />
    - <input type="text" name="tel4_3" size="4" class="input" maxlength="4" title="세번째 자리" />
</td>
</tr>
</tbody>
</table>

<input type="image" src="img/b_ok.gif" alt="확인" />
<a href="#" onclick="history.back(-1); return false;"><img src="img/b_cancel.gif" border="0" alt="취소" /></a>
</form>



★ 정리
- form 의 필드 검증은 onsubmit="return fm_check();" 을 이용한다.
- 확인 버튼의 type은 image, submit 을 이용한다.
- 입력필드는 th, scope, label을 이용하여 상호 작용할 수 있도록 한다.
- 휴대폰 입력처럼 필드가 나누어진 경우 title 속성을 이용하여 설명한다.