form 태그

<form 태그 속성>

method 속성 값에는 get/post 2가지 방식이 존재합니다.

get : 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다.

      - 기본값으로 사용된다 
      - 대용량 데이터를 전송하는데 제한이 있다.

      - 보안이 필요하지 않고 지정된 리소스에서 자원을 읽을 경우 

       

post : 데이터가 전송될 때 데이터가 노출되지 않습니다.

      - 회원가입, 파일 업로드 시 많은 데이터를 넘길 때 사용한다.
      - 데이터 전송 양에 길이 제한이 없다.

      - 보안이 필요하고 데이터를 처리할 경우

 

name

   - 폼의 이름을 지정한다 나중에 자바스크립트에서 쓸 일이 있으므로 지정을 해주셔야 합니다.

 

value

   - 네임의정보가 갖고 가는 실제 값입니다.

action

   - 우리가 작성한 값들 이름 나이 주소 등등을 보낼 페이지이고, 이것은 php 다루는 부분입니다.

 

autocomplete(자동완성 속성)

   - 첫 글자만 입력해도 전에 입력된 내용이 자동으로 아래에 표시된다

 

 

 

• autocomplete="on" 자동완성을 사용
• autocomplete="off" 자동완성을 중단한다.

required 

    - 웹 폼의 입력 값을 처리 페이지로 넘길 때 지정한다.

    - 입력값을 처리 페이지로 넘기기 위해서 submit버튼과 같이 사용해야 제대로 실행된다

 

위 그림과 같이 required(필수 입력값)를 입력하지 않으면 "이 입력란을 작성하세요"라는 경고창이 뜨고 

처리 페이지로 넘어가지 않는다

 

placeholder

    - 입력된 값에 힌트를 제공

 

checked

   - 항목이 미리 선택되도록 할 때 사용한다

   - 라디오 버튼이나 체크박스에서 제공된다

 

<form요소>

label

- label은 폼의 양식에 이름 붙이는 태그입니다.

- 주요 속성은 for입니다

- label의 for의 값과 양식의 id의 값이 같으면 연결됩니다.

- label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다.

 

예시;;)

<label for="name">이름</label>: <input type="text" id="name"><br>

<label for="nickname">이름</label>: <input type="text" id="nickname"><br>

<label for="address">이름</label>: <input type="text" id="address"><br>

 

<fieldset>, <legend>

<fieldset>, <legend> - form 요소를 구조화하기 위해 필요한 태그입니다.

• <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용, 묶은 요소 주변의 박스 모양의 선을 그려준다.
• <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>은 보통 form의 성격에 따라 구분합니다.

<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

 

예시;;)

<fieldset>

     <legend> 기본legend>기본 정보 </legend>

... 폼 요소들...

</fieldset>

<fieldset>

<legend> 부가 정보 </legend>

... 폼 요소들...

</fieldset>

 

<form>      

<form> : form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.

             만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.

 

예시;;)

<form action="" method="">

           <fieldset> <legend>기본 정보 </legend>

... 폼 요소들...

</fieldset>

<fieldset>

<legend> 부가 정보 </legend>

... 폼 요소들...

</fieldset>

</form>

 

<form>에는 대표적인 2가지 속성이 있습니다.

• action : 데이터를 처리하기 위한 서버의 주소
• method : 데이터를 전송하는 방식을 지정

 

<form 태그>

폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이터는 웹 서버가 처리하고, 결과에 따른 또 다른

웹 페이지를 보여줍니다. 이번 글에서 우리가 모르는 폼의 내부적인 동작 과정부터 폼의 큰 틀을 구성하는

엘리먼트에 대해 알아보겠습니다.

 

1. 폼 태그 동작방법

1. 폼이 있는 웹 페이지를 방문합니다.

2. 폼 내용을 입력합니다.

3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.

4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.

5. 웹 프로그램은 폼 데이터를 처리합니다.

6. 처리결과에 따른 새로운 html페이지를 웹 서버에 보냅니다.

7. 웹 서버는 받은 html페이지를 브라우저에 보냅니다.

8. 브라우저는 받은 html페이지를 보여줍니다.

 

 

위 설명을 그림 1과 같이 표현할 수 있습니다.

2. 폼 태그 속성

- 폼 태그 속성에는 name, action, method, target 등이 있습니다. 폼 속성을 이용하여 전송할 때 어디로

  보내야 하는지 그리고 어떤 방법으로 보낼지 정합니다. 폼 태그 속성은 다음과 같습니다.

 

1. action : 폼 내부에 데이터를 보내는 주소 URL 지정한다.

2. name : 폼을 식별하기 위한 이름을 지정합니다.

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

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

5. method: 폼을 서버에 전송할 http 메서드를 정합니다.(POST / GET)이 있다.

6. enctype :  넘기는 Content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용한다.

                 multpart/form-data로 지정해서 사용한다. 

7. autocomplete : html5 양식의 자동완성 기능을 지정한다.

 

전송할 http메서드 종류인 get과 post는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만

방식은 다릅니다. get은 폼데이터를 URL끝에 붙여서 눈에 보이게 보내지만 post 방식은 내부적으로 보이지 않게

보냅니다.

폼을 구성하는 다양한 엘리먼트

 

(1) 폼 엘리먼트 그룹 <field>, <legend> 태그

fieldset - 폼 요소 들을 그룹화할 때 사용합니다. 

legend - fieldset 태그 하위에 legend 태그를 그룹화한 폼 요소들을 목적에 맞게 이름을 지정합니다.

 

fieldset / legend 태그

 

(2) 다양한 모양을 가진 <input> 태그

<input> 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.

속성에는 type, readonlay, maxlength 등이 있습니다. 자주 사용 되거나 알아두면 좋은 속성은 다음과 같습니다.

 

- type : 태그 모양을 다양하게 변경할 수 있습니다. type에는 text, radio, checkbox, password, button,

   hidden, fileupload, submit, reset 등을 지정할 수 있습니다.

- name : 태그 이름을 지정한다.

- readonly : 태그를 읽기 전용으로 합니다.

- maxlength :  최대 글자 수를 지정합니다.

- required :  해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지 않고, submit버튼을 누르면 에러메시지

  가 웹 브라우저에 출력됩니다.(html5 추가사항)

- autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다.(HTML5 추가사항)

- placeholder : 태그에 입력할 값에 대한 힌트를 줍니다.(HTML5 추가사항)

- pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용합니다.(HTML5 추가사항)

                - 요소의 값을 검사할 때 사용하는 정규표현식

                - 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있다.          

input 태그

주민번호 입력 칸은 HTML5에서 추가된 pattern속성을 사용하여 정규표현식에 맞는 정확한 값을 입력해야 합니다.

정규표현식을 지키지 않고 submit 버튼을 누르면 정확한 입력방법 설명이 나타납니다.

 

(3)목록 태그 <select>,<optergroup>,<option>

- select : 항목을 선택할 수 있는 태그 입니다.

            - size = 한 번에 표시할 항목수를 의미한다.

            - multiple = 다중선택을 허용할 것인지를 지정하는 속성입니다.

            - optgroup = <select> 태그 안에서 목록들을 그룹화 할 경우 사용됩니다.

                             (label 속성을 사용하여 그룹 이름을 지정합니다.)   

            - option = 목록을 나타내는 태그입니다.

- size : 한 번에 볼 수 있는 크기를 5개 목록으로 지정했습니다. 

          속성 기본값은 4입니다.

- multiple : 속성을 지정하여 여러 개를 선택한다.

- select : 태그를 사용하여 박스 안에서 다시 그룹으로 나뉘는 것을 확인할 수 있습니다.

 

(4) 여러 줄 글상자 <textarea>

- textarea : 여러 줄을 입력받는 태그입니다.

              속성 : 

              - rows = 가로줄을 표시 합니다.

              - cols = 한줄에 입력된 크기를 지정합니다.

- 위 그림은 rows와 cols 속성에 각각 5와 50을 지정했습니다.

- placeholder 속성은 어떤 내용을 입력하면 되는지 힌트를 줬습니다.

 

(4) 여러 줄 글상자 <textarea>

- textarea : 여러 줄을 입력받는 태그입니다. 

              속성 :

              - rows = 가로줄을 표시 합니다.

              - cols = 한 줄에 입력된 크기를 지정합니다.

- 위 그림은 textarea 태그를 사용하여 여러 줄을 입력받습니다.

- rows와 cols속성에 각각 5와 50을 지정했습니다.

 

https://www.nextree.co.kr/p8428/

HTML : 폼(form) 이해

폼(form) 참고하기