47037 Members __ Online

정렬
HOME스터디[s]웹표준

웹표준 강좌 05 _ form

posted by 라부
date : , update :
hit : 21372, scrab : 0 , recommended : 22

웹표준 강좌 05 _ form<?xml:namespace prefix = o /> 

기본 테이블방식은 많은 style로 지저분해질 수 있음

 

A.

<form id="thisform" method="post">

<p><label for="name">이름 :</label><br />

<input type="text" id="name" name="name"></p>

<p><label for="email">이메일 :</label><br />

<input type="text" id="email" name="email"></p>

<p><input type="checkbox" id="remember" name="remember"><label for="remember">내정보 기억하기</label></p>

<p><input type="submit" value="확인"></p>

</form>

마크업이 단순해 작은화면장비 유리

레이블과 컨트롤 길이가 달라도 정렬가능

접근성 좋음

 

 

B.

<form id="thisform" method="post">

           <dl>

                     <dt><label for="name">이름 :</label></dt>

                     <dd><input type="text" id="name" name="name"></dd>

                     <dt      ><label for="email">이메일 :</label></dt>

                     <dd><input type="text" id="email" name="email"></dd>

                     <dt><label for="remember">내정보 기억하기</label></dt>

                     <dd><input type="checkbox" id="remember" name="remember"></dd>

                     <dt><input type="submit" value="확인"></dt>

           </dl>

</form>

 

작은화면장비 유리, 접근성, ccs컨트롤가능

 

<label>

For 속성에 id를 일치하는 값을지정

폼레이블을 마크업하기위한 방법  스크린리더프로그램에서 폼컨트롤 레이블을 읽어들임

 

<tabindex> 텝키를 이용해 입력폼순서이동 키보드만으로 내비게이션가능

<input tabindex=”1”>

<input tabindex=”2”>

<input tabindex=”3”>

 

<accesskey> Alt , Ctrl,  Commend 키를사용

<label for=name accesskey=”9”>

모든브라우저에서 지원하지 않음

 

 

<form id="thisform" method="post">

           <fieldset>

                     <legend>로그인 하기 </legend>

          

           </fieldset>

</form>

 

<fieldset> 폼스타일 자동테두리

<legend> 폼 타이틀  









웹표준, 강좌
댓글 2 | 엮인글 0

웹표준 강좌 06_ 문서구조
웹표준 강좌 04_인용문





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E