폼의 정의 및 구성요소

 

 

폼(Form)의 정의 및 관련요소

 

 

폼(Form)이란?

폼 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당한다.

 

웹문서는 서버에 미리 지정된 위치로 사용자가 입력하거나 선택한 값을 전송하는데

이때 서버에서는 사용자가 송신한 자료를 데이터베이스에 저장하거나 처리한다.

서버 처리와 관련된 프로그램으로는 CGI(common Gateway Interface)나 PHP(Personal Hypertext Preprocessor)

JSP(Java Server Pages), ASP(Active Server Pages) 등이 있다.

서버 처리 프로그램들은 하나 이상의 작은 내장프로그램(스크립트)을 갖고있는 HTML 페이지를

사용자가 볼 수 있도록 도와준다.

 

예)검색어 입력 상자나 체크박스, 라디오 버튼, 콤보박스, 전송버튼 등

 

 

폼요소(Form)

폼의 범위를 정의할 때는 form 요소를 사용한다.

form 요소의 속성으로는 폼의 내용을 처리하는 서버의 URI를 지정하기 위한 action과

폼의 내용을 처리하는 방법인 method가 있다.

 

형식

 

<form action="서버 URI" method="get 또는 post" >

   폼의 내용

</form>

 

 

폼 요소 그룹화 및 제목(fieldset, legend)

 

여러 개의 폼 요소를 그룹화하여 좀 더 구조적으로 만들려면 fieldset 요소를 사용해야 한다.

fieldset 요소를 이용하면 fieldset의 주위에 border가 생성되어 해당 그룹안에 있는 콘텐츠가

폼과 관련된 컨트롤 요소임을 쉽게 구별할 수 있다.

legned 요소로 fieldset의 컨트롤들이 어떠한 성격의 콘텐츠인지 제목 형식으로 알려줄 수 있으며

fieldset 요소의 바로 뒤에 한번만 작성할 수 있다.

 

형식

 

<form action="member.asp" method="post">

  <fieldset>

     <legend>폼 요소의 제목</legend>

  </fieldset>

</form>

 

 

 

레이블(label)

 

폼을 구조화하고 접근성을 높일 수 있는 요소 중에는 label 요소가 있다.

label 요소는 각 폼 컨트롤의 연관 관계와 설명을 추가하는 역할을 담당한다.

웹표준을 지원하는 최신 웹 브라우저의 경우 레이블만 선택해도 폼 컨트롤을 선택할 수 있다.

 

label 요소의 사용에는 명시적인 방법과 암묵적인 방법의 두가지가 있는데

암묵적인 방법보다는 명시적인 방법이 더 권장된다.

폼 컨트롤을 설명할 때 label 요소를 사용하는 것이 어려울 경우는

title 속성을 활용할 수 있다.

 

형식

 

1) 명시적 label(id와 for 속성 연결하기)

<form action="member.asp" method="post">

<fieldset>

<legend>회원가입 정보</legend>

<p><label for="username">이름</label>

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

</fieldset>

</form>

 

 

2)암묵적 label(label 요소에 폼 컨트롤 포함시키기)

 

<form action="member.asp" method="post">

<fieldset>

<legend>회원가입 정보</legend>

<p><label>이름

<input type="text" id="username" name="name" value="value" />

</label></p>

</form>

 

 

 

 

5. 다양한 폼 컨트롤(input)

폼 요소 안에 한 줄 글상자, 라디오 버튼, 체크 박스 등의 폼 컨트롤을 생성할 때는

input 요소를 사용한다. input 요소의 경우 type 속성값에 따라 폼의 종류가 결정된다.

 

※컨트롤의 종류

 

type="컨트롤값"

-text: 한 줄 글상자, 이름, id 등의 컨트롤을 생성할 때 사용

-password: 비밀번호 입력 상자로, 웹 브라우저 화면에 값을 입력한 값을 *나 ·로 표시

-radio: 여러 개의 라디오 버튼 중 하나만 선택 가능

-checkbox: 다중 선택이 가능한 체크박스

-file: 파일을 첨부 형태로 서버로 보낼 때 사용하는 컨트롤 

-image: 이미지 버튼으로 src 속성을 이용하여 버튼 이미지로 사용하려는 이미지 지정.

           alt 속성을 이용하여 대체 텍스트로 지정가능

-submit: 전송버튼

-reset: 취소버튼

-button: 범용버튼. 이벤트가 발생할 때 스크립트 또는 프로그램을 수행하기 위한 버튼

-hidden: 숨김 컨트롤. 화면에는 표시되지 않으며 프로그램에 송신하려고 하는

            데이터를 지정하기 위한 컨트롤

 

 

*input 요소 사용형식

 

<input type="컨트롤값" value="초기값" size="크기" id="식별자" name="변수명" />

 

 

 

6. 목록상자(select, option, optgroup)

select와 option 요소를 이용하여 목록상자를 생성할 수 있다.

 

형식

<select name="변수명" id="식별자">

<option value="초기값">항목</option>

</select>

 

 

7. 여러 줄 글상자(textarea)

여러 줄로 된 텍스트를 입력받을 때는 textarea 요소를 이용한다.

textarea 요소는 input요소를 이용한 한 줄 글상자와 달리 textarea 요소 안에서 입력한 텍스트의

내용이 길어지면 임의의 줄로 바뀐다. (이때 입력받을 수 있는 텍스트 수는 무제한)

 

형식

<textarea cols="" row="" name="" id="">

초기값이 되는 텍스트 작성</textarea>

 

 

8. 버튼 요소(button)

button 요소를 이용하여 생성할 수 잇는 경우는 input 요소의 submit, reset, button등의 type값과 같다.

 

형식

<button type="버튼의 종류" name="변수명" id="식별자">

     버튼명

</button>