[HTML] form 태그 속성 정리

FORM 태그

폼은 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용됩니다.

입력된 데이터를 한번에 서버로 전송하면 전송된 데이터는 웹 서버가 처리하고, 결과에 따른 또 다른 웹 페이지를 보여줍니다.

폼 요소는 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있습니다.

 

FORM 태그 속성

폼 태그 속성에는 name, action, method, target 등이 있습니다.

폼 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼지 정합니다.

 

1. action

- 폼 내부에 입력 값들 전송하는(받는사람) 서버 측 URL을 지정합니다.

- 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하기 때문에 이를 위해 action 속성을 사용합니다.

 

2. name

- 전송될 데이터의 이름

 

3. accept-charset

- 폼 전송에 사용할 문자 인코딩을 지정합니다.

 

4. target

- action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

 

5. method (디폴트 값 = get)

- 서버로 데이터를 전송하는 방식입니다.

- get 방식 or post 방식이 있습니다.

 

    1) get 방식

    - <form method = "get"> & 링크 &  URL 직접 & 자바스크립트 등등

    - URL의 끝에 데이터를 첨부해서 전송하는 방식

    문제점

    - 항상 노출이 된다. (보안에 중요한 데이터는 사용 금지)

    - URL 최대 256자까지 (오버플로우 : 데이터 잘림)

    - URL은 인코딩 방식이 base64(한글포함x)

    - 되도록 영문과 숫자 정도만 전송

 

    2) post 방식

    - post 방식 : <form method = "post"> 유일

    - 패킷의 본문 안에 데이터를 넣어서 전송하는 방식(FM 제대로 된 방식)

    - 데이터 노출이 없음(보안상 조금 더 안전)

    - 제한 크기 무제한

    - 한글 상관없이 전송

 

6. enctype

- 인코딩 타입을 지정합니다. 이 속성에 의해 브라우저는 입력된 데이터를 서버로 보낼 때 어떤 타입으로 인코딩해야 하는지 알 수 있는데 다음과 같이 세 가지 중 하나는 지정해줍니다.

   1) enctype="application/x-www-form-urlencoded"

   서버에 보내기 전에 모든 문자를 인코딩하는 방식이며 폼에 텍스트 데이터를 포함했을 때 지정합니다.(기본값)

   2. enctype="multipart/form-data"

   파일 업로드 컨트롤처럼 문자가 아닌 파일을 전송할 때 사용됩니다.

   3. enctype="text/plain"

   일반 텍스트로 인코딩 됩니다.

  

7. novalidate

- novalidate 속성은 HTML5에 새롭게 추가된 속성으로서, 유효성 미확인을 지정합니다.

이 속성을 지정하면 폼에 입력된 데이터를 서버로 보낼 때 데이터를 체크하지 않습니다.

 

FORM을 구성하는 다양한 element

1. <fieldset>, <legend>

폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다.

그리고 <fieldset> 태그 하위에 <legend> 태그를 사용하여 그룹화한 폼 엘리먼트들을

목적에 맞게 이름을 지정합니다. 

* 웹 접근성에서 필수적인 요소는 아니지만

  복잡한 서식이 여러 개 나오는 경우,

  <fieldset>, <legend>을 이용하여 논리적으로 유사한 서식을 묶어준다면

  화면낭독기 사용자에게 도움이 될 수 있습니다.

예시)