XHTML : 폼 관련 요소

: Form 요소
<form>	- 사용자가 작성하여 서버로 제출할 수 있는 서식 영역을 생성하는 요소 - 블록 레벨요소, strict DTD일 경우 서식요소들을 콘텐츠로 직접 포함 불가.
	<form action="서버 URL" method="get 또는 post"> 폼의 내용 </fom>
	속성 속성값 형식 비고 action 서식 내용을 처리할 서버측 프로그램의 URL (php, asp 등) 필수 method 전송 방법   get 기본값, 데이터 길이가 짧을 경우 적합. 주소창에 변수값 노출 post 데이터 길이가 긴 경우 적합. 보안 문제로 데이터값 노출 방지시 사용. enctype 송신 정보의 MIME 타입 (ex.파일 전송시 “multipart/form-data")   name 서식의 식별 이름 strict DTD 사용불가 target action 페이지가 열릴 웹 브라우저 창 strict DTD 사용불가
<fieldset>	- 여러 개의 폼요소 그룹화. 필드요소 그룹화 - fieldset 주위에 border가 생성되어 그룹안의 콘텐츠가 폼관련 요소임을 쉽게 파악 가능.
<legend>	- 폼 요소의 제목, fieldset의 그룹 명 - fieldset 요소 바로 뒤 한번만 작성 가능. - 웹 브라우저마다 스타일이 다르게 적용되어 CSS 이용한 디자인 작업에 어려울 수 있음. - 포커스의 문제, 시각장애인을 위함. 이미지를 넣을 수 있음.
	<form action=“member.asp" method="post"> <fieldset><legend>폼 요소의 제목</legend>......</fieldset></form>
	* fieldset으로 폼 요소를 그룹화 하고 legend 요소를 생략해도 되나?   HTML4.01에서는 반드시 fieldset 요소안에 legend 요소를 함께 사용하도록 하고   있고, XHTML에서는 선택적으로 사용   ⇒ 스크린 리더와 같은 보조기기에의 접근성과 연관됨으로 생략하지 않는 것이 좋다.
<label>	- 각 폼, 컨트롤의 연관관계와 설명을 추가하는 역할
	명시적 label id와 for 속성 연결하기. 더 권장 * input 요소의 id값과 label 요소의 for 값을 같게 지정. <lablel for="id명">내용</label> <input id="id명" >   <form action="abc.asp" method="post"> <fieldset>   <legend>회원가입 정보</legend>   <p><label for="userName">이름</label>   <input type="text" id="userName" name="name" value="value" />   </p> </fieldset>       </form> 암묵적 label label 요소에 폼 컨트롤 포함시키기   <form action="abc.asp" method="post"> <fieldset>   <legend>회원가입 정보</legend>   <p><label>이름</label>   <input type="text" id="userName" name="name" value="value" />   </p> </fieldset>       </form>
	폼 컨트롤을 설명할 때 label 요소를 사용하는 것이 어려울 경우 title 속성을 활용가능.
	* 명시적인 label과 암묵적 label 함께 사용하기 : 구조적인 마크업을 지향하면서 스타일 컨테이너로서의 독립적인 역할을 할 수 있도록 설계할 때 ex.<label for="userName">     <span>이름</span>     <input type="text" name="username" id="username" />        </label>
<input>	서식 요소 생성. 인라인 레벨 요소.
	<input type="컨트롤값“ value="초기값” size="크기“ id="식별자” name="변수명“ />
	* input 요소의 속성                                                         속성 속성값 형식 type 생성되는 서식 요소의 형식을 지정 name 요소의 식별 이름 (서버로 넘겨지는 요소) value 서식 요소의 값을 지정하여 직접 입력을 받는 서식 요소의 경우 기본값이 됨 (button, submit, reset 은 단추의 표시되는 내용) readonly 서식 요소를 읽기 전용 상태로 함 disabled 서식 요소를 사용 불가 상태로 함 size 서식 요소의 입력받을 크기를 지정함.
<input>	* type 값에 따라 생성되는 요소의 특성                                              type 생성되는 요소 전용 속성 속성 특성 txet 문자열 입력 필드 maxlength="[숫자]“ 입력가능한 최대문자수 password 암호 문자 입력 필드 maxlength="[숫자]“ 입력가능한 최대문자수 checkbox 복수 선택 버튼 checked="checked" 선택된 상태로 표시 radio 단일 선택 버튼 checked="checked" 선택된 상태로 표시 submit 양식 전송 버튼     reset 양식 초기화 버튼     button 임의 기증 버튼(범용)     image 이미지 버튼 src="[이미지 경로]“ alt="[대체 텍스트]“ 버튼으로 사용될 이미지 경로 이미지의 대체 텍스트로 필수 속성이 됨. file 전송 파일 입력 필드   파일 첨부 hidden 숨김 필드   화면에 보이지 않음
<select>	- 선택 박스 영역 - 인라인 요소. <optgroup>과 <option> 외에 다른 요소를 콘텐츠 요소로 포함 不可   최소 1개 이상의 <option> 요소를 포함해야 함.
<optgroup>	- <select>에 포함 된 <option>을 그룹화 하는 요소 - 그룹의 이름은 label 속성을 이용해 지정. - 인라인 레벨 요소, <option> 외 다른 요소 포함 불가. - select 요소의 option 영역을 그룹화하여 하위 목록 형식으로 목록상자를 구현할 때 사용.   label 속성값으로 상위그룹 지정.
<option>	- <select> 의 선택 항목을 생성하는 요소 - value와 selected 속성을 가질 수 있음. value 해당 <option>요소가 선택되었을시, 그 <option>을 포한하는 <select> 요소의 값으로 서버에 전송. selected 지정된 <option>을 선택 상태로 표시.
	<form method="post" action=""> <fiedset>   <legend>목록항목의 그룹화</legend>   <p><label for="userAddr">주소</label>      <select id="userAddr">        <optgroup label="서울특별시“>          <option value="gangnam-gu">강남구</option>                     ............................        </optgroup>        <optgroup label="경기도“>           <option value="gwacheon-si">과천시</option>                    ...............................        </optgroup>       </select>     </p>   </fieldset> </form>
<textarea>	<textarea cols=" " rows= " " name=" " id=" ">
	- 문단 입력 요소. 여러 줄 텍스트 입력 - 인라인 요소, 텍스트 외 다른 요소 포함 불가 - textarea 요소 안에서 입력 내용이 길어지면 임의의 줄로 바뀜.   row, cols 값은 환경에 따라 크기가 다르게 보일 수 있음. 정확한 정렬을 위해서는   CSS의 width, height를 이용해 영역의 크기 지정. - <input type="text"> 와 유사한 텍스트 입력받는 요소 생성 : 여러 줄 X
	* <textarea> 요소의 속성                                                    속성 속성값 형식 name 요소의 식별 이름 rows <textarea>의 높이를 표시 행수로 지정 cols <textarea>의 폭을 글자 수로 지정 readonly 서식 요소를 읽기 전용 상태로 함 disabled 서식 요소를 사용 불가 상태로 함
<button>	<button type="버튼의 종류“ name="변수명” id="식별자“ value=" ">버튼명</button>
	- 기능 버튼 - <input type="button">과 동일한 범용 버튼을 생성 : input 요소보다 좀더 유연한   디자인이 가능. - button 요소의 경우 스스로 어 콘텐츠인지 알려주기 때문에 레이블이 필요 없음.   데이터 전송에 사용하는 버튼은 value 속성이 레이블 역할을 대신함.
	* <button> 요소의 type 속성                                                속성 속성값 형식 submit <input type="submit">과 동일 서식 요소를 전송 reset <input type="reset">과 동일 서식 요소를 초기화 button <input type="button">과 동일 자바스크립트 기능 등을 위한 범용버튼 요소 생성