웹접근성 준수 된 회원가입 폼

http://flato.kr/work/2000n/s503_write.html

이천시동행누리센터

<div class="contents">
            <div class="wells">
              <span class="red">*</span> 표시는 필수 입력 사항입니다. 정확하게 입력해 주세요!
            </div>
            <!-- 고객정보 -->
            <div class="sec_g sec_agree">
              <div class="area_tit">
                <h3 class="tit_square">기본정보</h3>
                <a href="#" class="btn_w btn_down">이용신청서 다운로드 <span class="img_g"></span></a>
              </div>

              <form action="" method="post">
                <table class="tbl_g tbl_write">
                  <caption>아이디, 비밀번호, 비밀번호 확인 정보를 포함하는 표</caption>
                  <colgroup>
                    <col width="16%"><col>
                  </colgroup>
                  <tbody>
                    <tr>
                      <th scope="row"><label for="memberID">아이디</label><span class="necessary">필수입력</span></th>
                      <td>
                        <input type="text" name="memberID" id="memberID" class="int w250" onfocus="this.select()"><input type="submit" class="btn_w" value="중복체크" name="Submit">
                        <p class="txt_vital_r">※ 최소 6자 이상의 영문, 숫자로 만들 수 있습니다.</p>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="memberPW">비밀번호</label><span class="necessary">필수입력</span></th>
                      <td>
                        <input type="text" name="memberPW" id="memberPW" class="int w250" onfocus="this.select()">
                        <p class="txt_vital_r">※ 특수문자, 영문자, 숫자 3종류를 포함한 9~15자리 이어야 합니다.</p>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="memberPW2">비밀번호 확인</label><span class="necessary">필수입력</span></th>
                      <td><input type="text" name="memberPW2" id="memberPW2" class="int w250" onfocus="this.select()"></td>
                    </tr>
                  </tbody>
                </table>
              </form>

              <!-- 이용대상자 -->
              <h3 class="tit_square">이용대상자</h3>
              <form action="" method="post">
                <table class="tbl_g tbl_write">
                  <caption>성명, 생년월일, 성별, 이메일, 전화번호, 휴대폰번호, 주소 정보를 포함하는 표</caption>
                  <colgroup>
                    <col width="16%"><col><col width="16%"><col width="34%">
                  </colgroup>
                  <tbody>
                    <tr>
                      <th scope="row"><label for="memberName">성명</label><span class="necessary">필수입력</span></th>
                      <td>
                        <input type="text" name="memberName" id="memberName" class="int w250" onfocus="this.select()" maxlength="10">
                      </td>
                      <th scope="row">성별<span class="necessary">필수입력</span></th>
                      <td>
                        <div class="area_radio">
                          <input type='radio' id='male' name='sex' value='male' />
                          <label for='male'>남성</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='female' name='sex' value='female' />
                          <label for='female'>여성</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="memberyy">생년월일</label><span class="necessary">필수입력</span></th>
                      <td>
                        <input type="text" id="memberyy" placeholder="년도(4자)" class="int" maxlength="4" style="width:103px" title="년도(4자)">
                        <select id="membermm" class="sel" style="width:70px" title="월" aria-label="선택하세요">
                          <option>월</option>
                          <option value="01">1</option>
                          <option value="02">2</option>
                          <option value="03">3</option>
                          <option value="04">4</option>
                          <option value="05">5</option>
                          <option value="06">6</option>
                          <option value="07">7</option>
                          <option value="08">8</option>
                          <option value="09">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                        </select>
                        <input type="text" id="memberdd" placeholder="일" class="int" maxlength="2" style="width:70px" title="일">
                      </td>
                      <th scope="row"><label for="memberSex">이메일</label></th>
                      <td>
                        <input type="email" name="memberSex" id="memberSex" class="int w250" onfocus="this.select()" maxlength="20">
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="memberTel">전화번호</label><span class="necessary">필수입력</span></th>
                      <td colspan="3">
                        <input type="text" name="memberTel" id="memberTel" class="int w250" onfocus="this.select()" maxlength="13">
                        <p class="txt_vital_r">※ '-' 없이 숫자만 입력해주세요.</p>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="memberPhone">휴대폰번호</label><span class="necessary">필수입력</span></th>
                      <td colspan="3">
                        <input type="text" name="memberPhone" id="memberPhone" class="int w250" onfocus="this.select()" maxlength="13"><input type="submit" class="btn_w" value="중복체크" name="Submit">
                        <p class="txt_vital_r">※ '-' 없이 숫자만 입력해주세요.</p>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="memberAddress">주소</label><span class="necessary">필수입력</span></th>
                      <td colspan="3" class="td_address">
                        <input type="text" name="memberAddress" id="memberAddress" class="int w250" onfocus="this.select()" title="우편번호"><a href="#" class="btn_w" title="새창이동">우편번호</a> <br>
                        <input type="text" name="memberAddress" id="memberAddress2" class="int w250" onfocus="this.select()" title="주소">
                        <input type="text" name="memberAddress3" id="memberAddress3" class="int w250" onfocus="this.select()" title="상세주소">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </form>

              <!-- 비상연락처 -->
              <h3 class="tit_square">비상연락처</h3>
              <form action="" method="post">
                <table class="tbl_g tbl_write">
                  <caption>성명, 관계, 전화번호, 휴대폰번호 정보를 포함하는 표</caption>
                  <colgroup>
                    <col width="16%"><col><col width="16%"><col width="34%">
                  </colgroup>
                  <tbody>
                    <tr>
                      <th scope="row"><label for="emerName">성명</label></th>
                      <td>
                        <input type="text" name="emerName" id="emerName" class="int w250" onfocus="this.select()">
                      </td>
                      <th scope="row"><label for="emerRelation">관계</label></th>
                      <td>
                        <input type="text" name="emerRelation" id="emerRelation" class="int w250" onfocus="this.select()">
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="emerTel">전화번호</label></th>
                      <td colspan="3">
                        <input type="text" name="emerTel" id="emerTel" class="int w250" onfocus="this.select()">
                        <p class="txt_vital_r">※ '-' 없이 숫자만 입력해주세요.</p>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="emerPhone">휴대폰번호</label></th>
                      <td colspan="3">
                        <input type="text" name="emerPhone" id="emerPhone" class="int w250" onfocus="this.select()">
                        <p class="txt_vital_r">※ '-' 없이 숫자만 입력해주세요.</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </form>

              <!-- 장애유형 -->
              <div class="area_tit">
                <h3 class="tit_square">장애유형</h3>
                <p class="txt_vital_r">※ 선택1 항목 필수기입 및 복합장애시 선택2 항목도 선택해주세요.</p>
              </div>
              <form action="" method="post">
                <table class="tbl_g tbl_write">
                  <caption>장애종류, 복합장애시, 장애발생일, 의사소통, 휠체어 유무, 도움여부, 기존고객 여부, 첨부파일 정보를 포함하는 표</caption>
                  <colgroup>
                    <col width="16%"><col><col width="16%"><col width="34%">
                  </colgroup>
                  <tbody>
                    <tr>
                      <th scope="row"><label for="obsType">장애종류</label><span class="necessary">필수입력</span></th>
                      <td>
                        <select id="obsType" aria-label="선택하세요" class="sel" style="width:130px">
                          <option>지체</option>
                          <option value="01">1</option>
                        </select>
                        <select id="obsType2" class="sel" style="width:130px" title="장애급수" aria-label="선택하세요">
                          <option>1급</option>
                          <option value="2급">2급</option>
                          <option value="3급">3급</option>
                          <option value="4급">4급</option>
                        </select>
                      </td>
                      <th scope="row"><label for="obsComplex">복합장애시</label></th>
                      <td>
                        <select id="obsComplex" aria-label="선택하세요" class="sel" style="width:130px">
                          <option>없음</option>
                          <option value="01">1</option>
                        </select>
                        <select id="obsComplex2" class="sel" style="width:130px" title="복합장애급수" aria-label="선택하세요">
                          <option>1급</option>
                          <option value="2급">2급</option>
                          <option value="3급">3급</option>
                          <option value="4급">4급</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row"><label for="obsyy">장애발생일</label></th>
                      <td>
                        <input type="text" id="obsyy" placeholder="년도(4자)" class="int" maxlength="4" style="width:103px" title="년도(4자)">
                        <select id="obsmm" class="sel" style="width:70px" title="월" aria-label="선택하세요">
                          <option>월</option>
                          <option value="01">1</option>
                          <option value="02">2</option>
                          <option value="03">3</option>
                          <option value="04">4</option>
                          <option value="05">5</option>
                          <option value="06">6</option>
                          <option value="07">7</option>
                          <option value="08">8</option>
                          <option value="09">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                        </select>
                        <input type="text" id="obsdd" placeholder="일" class="int" maxlength="2" style="width:70px" title="일">
                      </td>
                      <th scope="row">의사소통<span class="necessary">필수입력</span></th>
                      <td class="td_radio">
                        <div class="area_radio">
                          <input type='radio' id='communiY' name='communi' value='가능' />
                          <label for='communiY'>가능</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='communiN' name='communi' value='불가능' />
                          <label for='communiN'>불가능</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">휠체어 유무<span class="necessary">필수입력</span></th>
                      <td class="td_radio">
                        <div class="area_radio">
                          <input type='radio' id='wheelchairAuto' name='wheelchair' value='자동' />
                          <label for='wheelchairAuto'>자동</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='wheelchairHand' name='wheelchair' value='수동' />
                          <label for='wheelchairHand'>수동</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='wheelchairNone' name='wheelchair' value='없음' />
                          <label for='wheelchairNone'>없음</label>
                        </div>
                      </td>
                      <th>도움여부</th>
                      <td class="td_radio">
                        <div class="area_radio">
                          <input type='radio' id='helpNone' name='help' value='무도움' />
                          <label for='helpNone'>무도움</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='helpPart' name='help' value='부분도움' />
                          <label for='helpPart'>부분도움</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='helpFull' name='help' value='완전도움' />
                          <label for='helpFull'>완전도움</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>기존고객 여부</th>
                      <td colspan="3" class="td_radio">
                        <div class="area_radio">
                          <input type='radio' id='customerY' name='sex' value='예' />
                          <label for='customerY'>예</label>
                        </div>
                        <div class="area_radio">
                          <input type='radio' id='customerN' name='sex' value='아니오' />
                          <label for='customerN'>아니오</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th rowspan="4">첨부파일</th>
                      <td colspan="3">
                        <label for="fileCard" class="lab_file">복지카드사본</label>
                        <input type="file" name="fileCard" id="fileCard" class="int_file">
                        <p class="txt_vital_r">※ JPG, PNG 이미지 파일만 가능합니다.</p>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3">
                        <label for="fileMedical" class="lab_file">진단서</label>
                        <input type="file" name="fileMedical" id="fileMedical" class="int_file">
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3">
                        <label for="fileCertificate" class="lab_file">장애인증명서</label>
                        <input type="file" name="fileCertificate" id="fileCertificate" class="int_file">
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3">
                        <label for="fileEtc" class="lab_file">기타</label>
                        <input type="file" name="fileEtc" id="fileEtc" class="int_file">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </form>

              <!-- 기타 -->
              <h3 class="tit_square">기타</h3>
              <form action="" method="post">
                <table class="tbl_g tbl_write">
                  <caption>메일링 서비스, SMS 수신여부 정보를 포함하는 표</caption>
                  <colgroup>
                    <col width="16%"><col><col width="16%"><col width="34%">
                  </colgroup>
                  <tbody>
                    <tr>
                      <th scope="row">메일링 서비스</th>
                      <td>
                        <div class="area_check">
                          <input type="checkbox" id="agree01" name="agree01" class="i_check" title="이용약관 동의">
                          <label for="agree01">정보 메일을 받겠습니다.</label>
                        </div>
                      </td>
                      <th scope="row">SMS 수신여부</th>
                      <td>
                        <div class="area_check">
                          <input type="checkbox" id="agree02" name="agree02" class="i_check" title="이용약관 동의">
                          <label for="agree02">문자메세지를 받겠습니다.</label>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </form>

              <div class="area_btn">
                <input type="submit" class="btn_g btn_blue w220" value="회원가입" name="Submit">
                <a href="#" class="btn_g btn_gray w220">취소</a>
              </div>

            </div>

          </div>