[XHTML] 10.폼


온라인 서식



웹 사이트에서 특정 콘텐츠에 대한 정보를 제공받기 위해서는 회원가입을 해야 하는 경우가 많습니다.

회원가입 양식을 보면 약간 동의에서부터 이름, 아이디, 패스워드 ,주소 등을 입력해야 하며

성별 체크 등 다양한 항목을 선택하기도 해야 합니다.

회원가입뿐만 아니라 온라인 쇼핑몰에서 상품을 구입하거나 게시판에 글을 쓸 때에도

이러한 정보 양식을 많이 접하게 되는데 웹에서의 이러한 정보입력 양식을 온라인 서식이라고 합니다.

온라인 서식을 만들 때 필요한 요소가 바로 폼입니다.



폼(Form)



<form 요소>


<form> 요소는 온라인 서식에서 작성한 값을 서버 프로그램으로 전송하는 역할을 담당하며 블록요소입니다.


<form action="서버프로그램 URL" method="get이나 post방식">
 서식내용
</form>



‘action’은 서식에서 작성한 값들을 처리하는 서버 프로그램의 주소입니다.

여기에서 서버 프로그램이 하는 역할은 전송되어 넘어온 값들(아이디, 패스워드, 주소)을 DB에 저장하거나

로그인 할 때처럼 입력받은 아이디값이 DB에 등록되어 있는지, 패스워드가 일치하는지에 대한 여부 처리와

데이터 검색 등의 역할을 수행합니다.

또 ‘method’는 서식의 값들을 서버 프로그램에 어떤 방법으로 전달할 것인지 처리하는 부분입니다.

‘get’ 방식과 ‘post’ 방식이 있습니다.

예를 들어 서식에서 id를 ‘koo’ pw를 ‘1234’라고 입력하였다면,

‘get’ 방식의 경우 ‘서버 프로그램 URL?id=koo&pw=1234’ 식으로 전달합니다.

이런 방식은 포털사이트에서 검색한 후 주소창을 보면 확인 할 수 있는데,

이와 같이 get 방식은 주소창에 중요한 정보가 노출된다는 점과 전송할 수 있는 데이터가 적다는 특징이 있습니다.

이와 반대로 post 방식의 경우 전송되는 데이터값들이 노출 되지 않으며 많은 양의 데이터를 전송할 수 있다는 특징이 있습니다.

온라인 서식에서는 일반적으로 post 방식을 많이 이용합니다.


<field 요소>


<fieldset>은 블록 요소이며 <form> 요소 안에 있는 여러 요소를 그룹화할 때 사용하며,


그룹 제목 <legend> 요소를 포함합니다.


<form action="join.php" method="post">
 <fieldset>
   <legend>그룹제목<legend>
   서식내용
 </fieldset>
</form>




<input 요소>


<input>은 인라인 요소이며 type 속성 변경으로 다양한 폼 컨트롤을 생성할 수 있습니다.



그럼 지금까지의 요소를 가지고 회원가입 창을 만들어 볼까요?


image



뭔가 벌써부터 그럴싸하죠?

위의 예제에서 <field> 요소는 사각형 border로 나오게 되며,

<legend> 요소는 사각형 border 상단에 제목으로 출력됩니다.

<input> 의 type의 종류를 정리하면 다음과 같습니다.


image



textarea 요소와 select 요소



<textarea>는 인라인 요소로 게시판의 내용 입력이나 약관 등 여러 줄로 된 텍스트 상자를 생성하는 요소입니다.


<select>요소 또한 인라인 요소이며 선택 목록 상자를 생성합니다.



다음 예제를 보시죠


image



<textarea> 요소의 cols와 rows 속성은 텍스트 상자의 열과 행의 수를 지정합니다.

그리고 <select> 요소는 <option> 요소와 함께 쓰며 특히 목록이 많은 경우에는

관련 있는 것끼리 묶어주는 <optgroup> 요소를 사용합니다.

<option> 요소의 value는 실제 전송값을 의미하며,

<optgroup> 요소의 labael 속성은 그룹 지어진 <option> 요소들의 제목입니다.



label 요소



다음은 <lable> 요소를 이용하여 접근성 높은 온라인 서식을 만드는 방법에 대한 예제입니다.


image



예제를 보면 <lable> 요소의 for 속성 값과 <lable> 요소의 id 속성값을 같은 이름으로 연결해주면

레이블 텍스트(이름, 아이디, 비밀번호 등..)에 마우스를 클릭하거나 포커스가 이동되면

우측에 연결되어 있는 input 텍스트 상자로 커서가 자동으로 이동합니다.

결과를 보게되면 이름을 입력하기 위해 마우스로 상자 안을 클릭하지 않고도,

이름(텍스트)을 클릭하면 자동적으로 커서가 상자 안으로 이동하는 것을 확인할 수 있습니다.

또 주민번호와 이메일 같은 경우에는 하나의 label에 두개의 input이 있는데,

이러한 경우 title 속성을 이용하여 추가적인 설명을 넣어주면

음성만 출력되는 환경에서도 폼 요소들에 대한 접근성을 높일 수 있습니다.