FORM 다루기

FORM 다루기

 

 

1] <FORM>, </FORM>

<FORM>, </FORM> 태그는 폼의 시작과 끝을 나타냅니다 각종 폼 컨트롤은 폼 태크 안에 있을 때만 정상적으로 동작합니다 만약 폼 컨트롤이 폼 태그 외부에 존재한다면 해당 폼 컨트롤에 기록된 정보는 전달되지 않습니다 폼 태그에는 여러 가지 속성이 있어서 이 속성들을 잘 설정해야 사용자가 입력한 정보를 올바르게 전달할 수 있습니다 가장 일반적인 폼 태그의 사용방법은 다음과 같습니다

 

<FORM NAME="폼이름" ACTION="데이터를 보낼 주소" METHOD="전송방식">

HTML 및 기타 폼 요소들...

</FORM>

 

     FORM 태그의 속성과 이벤트 처리 함수

 

속성

1. name      

폼의 이름을 나타냅니다 보통은 굳이 이름을 부여하지 않아도 상관없지만 하나의 HTML 문서 안에 여러 개의 폼이 있을 때 구분 지으려고 폼의 이름을 사용합니다

 

2. action

사용자가 입력한 폼 정보를 전달할 주소를 지정하는 항목입니다 데이터를 전달받는 주소는 반드시 PHP와 같은 서버 스크립트 파일이어야 합니다

 

3. method

데이터를 전달하는 방식을 정의하는 부분입니다 전송 방식에는 POST와 GET 두 가지 방식이 있으며 GET 방식은 URL을 통해서 전달하는 방식이고 POST 방식은 HTTP 바디에 데이터를 실어서 보내는 방식입니다

 

4. enctype

폼 데이터를 어떻게 인코딩할 것인지를 지정하는 부분입니다 그러나 폼 데이터 전송 형식이 GET이라면 ENCTYPE을 지정하더라도 원하는 결과를 얻을 수 없습니다 ENCTYPE은 POST 전송일 경우에만 적용되며  application/x-www-form-urlebcoded과 multipart/form-data  두 가지 종류가 존재하며 ENCTYPE을 지정하지 않았을 때는 기본값으로 application/x-www-form-urlebcoded가 폼 정보를 전달합니다

 

5. target

폼 정보를 모두 전송하고 그 결과를 보여 줄 프레임이나 창의 이름을 지정하는 부분입니다

 

이벤트 처리 함수

1. onsumit

sumit 버튼을 클릭하거나 자바스크립드를 이용하여 sumit을 실행한 경우에 발생합니다 사용자가 쿼리 전송 버튼을 클릭하는 경우 sumit 이벤트가 발생하여 먼저 OnSumit 핸들러에 지정된 명령어나 함수가 처리됩니다 이 명령이 처리되고 Action에 지정된 주소로 폼 데이터를 전송합니다

 

2. onreset

reset 버튼을 클릭하거나 자바스크립트를 이용하여 reset을 실행한 경우에 발생합니다 사용자가 리셋 버튼을 클릭하면 OnRest 핸들러에 지정된 함수나 명령어가 실행됩니다

 

 

2] <INPUT>

<INPUT> 태그는 각종 텍스트 값의 입력과 버튼 그리고 체크 상자와 라디오 상자를 만들 수 있습니다

 

<INPUT> 태그의 타입

1. TEXT

짧은 텍스트를 입력할 수 있는 상자입니다 길지 않은 문자열 예를 들면 이름이나 이메일 주소와 같은 수십 자 이내의 값을 입력하고자 할 때 일반 텍스트 입력 상자를 사용합니다

 

2. PASSWORD

일반 텍스트 입력 상자와 대부분 같지만 입력한 값이 별표로 출력된다는 것이 다릅니다 그리고 알파벳이나 숫자 및 기호만 입력할 수 있습니다

 

3. FILE

파일을 업로드하거나 파일의 위치 정보를 기록하고자 할 때 사용할 수 있느 태그입니다 파일 선택 상자는 파일을 업로드할 때 주로 사용되며 POST 방식과 multipart/form-data  인코딩 형식을 지정해야 올바르게 동작합니다

 

4. CHECKBOX

각 항목에 대한 선택 여부를 확인하는데 사용하는 태그입니다

 

5. RADIO

체크 상자와는 달리 여러 개의 항목 중의 하나만을 선택해야 하는 경우 사용하는 태그입니다 보통 2,3개의 선택 항목 중에서 하나를 반드시 선택해야 하는 경우 사용합니다 또한 4개 정도의 값에서 하나만을 선택해야 할 때에는 라디오 상자를 사용하지 않고 선택 상자를 사용합니다

 

6. BUTTON

버튼 모양의 컨트롤을 만들어주는 태그입니다 단순히 버튼 모양만을 만들고 다른기능이 없는 기본적인 태그지만 이벤트 핸들러를 사용하여 아이디 중복 확인 같은데에 쓰입니다

 

7. SUMIT

폼의 입력한 정보를 폼의 Action에 지정된 주소로 전송하는 버튼을 생성합니다 폼의 정보를 전송하려면 반드시 sumit이 필요합니다

 

8. RESET

폼에 입력한 정보를 모두 원래의  초기값으로 되돌리는 버튼을 생성합니다 기본적으로 빈 폼에 새로운 값을 입력했다면 모두 빈 폼으로 되돌아가게 되고 폼 컨트롤에 VALUE 속성 등을 이용하여 초기값으로 설정되어 있다면 해당 초기값으로 되돌아갑니다

9. IMAGE

더욱 화려한 디자인을 추구하기 위해서 만들어진 사용자가 정의한 모양의 그림 이미지 버튼입니다 이 이미지 버튼은 웹에서 사용 가능한 모든 이미지를 통해서 만들 수 있으며 쿼리 전송 버튼과 마찬가지로 버튼을 클릭하면 SUMIT 이벤트가 발생합니다

 

10. HIDDEN

눈에 보이지 않는 숨겨진 상자를 만들어 줍니다 이 숨겨진 상자는 일반적으로 사용자가 수정해서는 안되는 값이나 눈에 보이지 않게 여러 가지 값을 전송할 때 사용합니다 하지만 보안이 제대로 되지 않아 악의적으로 충분히 수정할 수 있기 때문에 숨겨진 상자를 신뢰해서 공개되어서는 안 되거나 수정하면 큰 피해가 일어날 수 있는 중용한 정보를 전송하기 위해 사용해서는 안됩니다

 

 

3] <SELECT>...</SELECT>

이 태그는 일반적으로 3개 이상의 목록에서 하나 혹은그 이상의 항목을 선택하고자 할 때 사용하는 폼 컨트롤입니다 선택 상자에는 두 종류가 있는데 하나는 목록 중에서 하나만 선택하고자 하는 콤보 상자와 하나 혹은 그 이상을 선택할 수 있는 리스트 상자입니다

 

1. 콤보 상자

<SELECT> 태그에서 size를 지정하지 않으면 콤보 상자가 됩니다 콤보 상자는 목록 중에서 하나만 선택할 수 있습니다

 

2. 리스트 상자

<SELECT> 태그에서 size를 지정해 주면 리스트 상자가 됩니다 리스트 상자는 다중 선택을 할때 쓰며 다중 선택을 허용하는 경우에는 <SELECT> 태그에 multiple을 추가해주고 반드시 이름을 배열 형식으로 바꾸어야 합니다

 

 

4] <TEXTAREA>...</TEXTAREA>

여러 문단에 걸친 길 글을 입력하기 위한 <TEXTAREA> 태그는 일반적으로 게시판과 같은 곳에서 글의 내용을 입력하는데 사용하며 입력창의 크기를 다음과 같은 방법으로 지정할 수 있습니다

 

<TEXTAREA NAME="content" ROWS="5" COLS="40"></TEXTAREA>

 

여기서 ROWS는 세로의 크기를 나타내며 이 값이 5이면 다섯 줄을 보여 줄 수 있는 크기를 의합니다 또한 COLS는 가로의 길이를 나태내며 40이란 값은 영문을 기준으로 40자가 보이는 크기를 뜻합니다