폼엘리먼트 작성규칙

폼 컨트롤 엘리먼트를 링크업할 때 <form>, <fieldset>, <legend> 엘리먼트를 다음과 같이 선언한다. 

단, 필요에 따라 개별적으로 사용할 수 있다.

1. <filedset>

<form> 엘리먼트의 자식 노드로 선언하여 폰 컨트롤 엘리먼트들을 그루핑하기 위해 선언한다.

2. <legend>

폰 컨트롤 그룹인 <fieldset>의 자식 엘리먼트로서 폰 컨트롤 엘리먼트들의 그룹 이름을 표현하기 위해 선언한다.

<form>

<fieldset>

<legend>개인정보</legend>

</fieldset>

</form>

3. <input>

<label> 엘리먼트, title  애트리뷰트, alt 애트리뷰트를 통해 스크린 리더 사용자는 주변 맥락에 대한 이해 없이 각 엘리먼트에 독립적으로 접근해도 폰을 이해할 수 있다. 

<label for="user_id">아이디</label> <input type="text" id="user_id" name="user_id" />

<input type="image" src="btn_confirm.gif" alt="확인 />

<label for="num1">유선전화</label>

<input type="text" id="num1" name="num1" title="지역번호" />

다음과 같이 type값에 따라 애트리뷰트를 선언한다.

* type이 text일 경우: type, id, title, value, accesskey 순서로 애트리뷰트를 선언한다.

<input type="text" id="user_id" title="사용자ID" value="아이디를 입력하세요" accesskey="l" />

- 동일한 스타일의 텍스트필드이나 너비값이 다를 경우 style  애트리뷰트를 이용하여 width값을 제어한다.

- 텍스트필드에 가이드를 위한 내용이 들어갈 경우 value  애트리뷰트를 선택적으로 사용할 수 있다.

* type이 radio, checkbox일 경우 : type, name, id, checked 순서로 애트리뷰트를 선언한다.

<input type="radio" name="vt_align" id="align_lft" checked="checked" /> <label for="align_lft">왼쪽정렬</label>

<input type="radio" name="vt_align" id="align_cnt" /> <label for="align_cnt">가운데정렬</label>

<input type="radio" name="vt_align" id="align_rgt" /> <label or="align_rgt">오른쪽정렬</label>

<input type="checkbox" name="sports" id="soccer" checked="checked" /> <label for="soccer">축구</label>

<input type="checkbox" name="sports" id="basketball" /><label for="basketball">농구</label>

<input type="checkbox" name="sports" id="tennis" /><label for="tennis">테니스</label>

- 그루핑이 필요하면 선택적으로 name 애트리뷰트를 이용하여 항목들을 그루핑한다.

- 기본 선택에 대한 표현이 필요할 경우 checked="checked"라고 표기한다.

* type이 image일 경우 : type, src, alt 순서로 애트리뷰트를 선언한다.

<input type="image" src="img/btn_confirm.gif" alt="확인" />

- alt 애트리뷰트를 반드시 선언한다.

* type 이 file일 경우, button, reset, submit : type 애트리뷰트를 선언한다.

<input type="file" /><input type="button" />

4. <select>

동일한 스타일의 셀렉트 박스이나 너비값이 다르면 선택적으로 style  애트리뷰트를 이용하여 width값을 제어한다.

<select (id=" ") (title=" ") style="width:100px">

<option>등급</option>

</select>

5. <label>

<input>(text, checkbox, radio, file, password), <select>, <textarea>와 같은 폰 엘리먼트는 for 애트리뷰트를 부여하여 해당 엘리먼트의 id값과 동읷핚 이름으로 연결(coupling)한다.

단, 레이블 명이위치할 공간이 없는 경우 title  애트리뷰트로 대체할 수 있다.

<input type="radio" name="alignment" id="align_left" /><label for="align_lft">왼쪽정렬</label>

<input type="checkbox" name="sports" id="soccer" /><label for="soccer">축구</label>

단, <label> 앆에 <input> 앨리먼트가 있는 경우 for와 id를 이용하여 연결하지 않아도 된다.

<label><input type="checkbox" name="sports" />축구</label>

6. <textarea>

cols, rows 순서로 애트리뷰트를 선언한다.

CSS를 정상적으로 불러오지 못하는 상황에서도 사용에 문제가 없도록 col, rows의 애트리뷰트값은 각각 최소30, 5 이상이 되도록 선언한다. <label>로 커플릿 할 수 없는 경우 title을 사용하여도 무방하며 id, title 순서로 애트리뷰트를 선언한다.

<textarea cols="30" rows="5" (id=" ") (title=" ")></textarea>

7. <button>

type 애트리뷰트를 선언한다.

- type 애트리뷰트를 button으로 선언하여 열기/닫기, 접기/펼치기 등의 UI를 제어한다

- 폰 전송 역할을 하는 버튼은 submit 타입을 사용한다.

<button type="button">열기</button> 

<button type="submit">전송</button>