공부노트/HTML

[HTML]Form

Reload0213 2021. 8. 20. 00:09

 Form : 데이터를 전송하기 위한 인터페이스를 태그 형식으로 제공해주는 기능들의 영역

             - form 태그 안에 input 태그들이 있는 형태가 가장 기본적인 형식

             - 로그인, 회원가입, 검색 등 사람들이 데이터를 입력해서 색인, 수정, 삭제, 생성을

               할 수 있는 인터페이스를 제공할 때 사용한다.

 

※ Form 태그에는 여러가지 속성이 있으며 주요 속성은 다음과 같다.

 

             name : 폼의 이름을 지정한다. DOM(Document Object Model)에서 form을

                        접근할 떄 한 페이지 내 다수의 폼을 구분하기 위한 용도로 사용

              ● action : 이동하고자 하는 url 경로 혹은 html 파일 경로를 표시할 때 사용(a태그의 href와 동일)

              ● target : 이동하고자 하는 페이지를 어디에서 열 것인가를 지정(a 태그의 href와 동일)

              ● method : form 안에 들어있는 데이터들을 어떤 방식으로 전송할 것인지를 결정하는

                          속성 크게 GET과 POST로 나뉜다.

                 - GET : HTTP 호출을 통해 데이터를 전송 시 URL뒤에 데이터를 붙여 전송할 경우

                          사용하는 방식이다. 데이터는 URL 주소 뒤에 ?를 붙여 이 뒤의 데이터의

                          이름=값을 나열하는 형식으로 데이터를 정의하며 이름은 input 태그에서

                          정의한 name이라는 속성의 값을 그대로 가져온다. 만약 복수의 값을 가져올

                          경우에는 동일한 name이 연속적으로 나올 수 있다.

                 - POST : HTTP 호출을 통해 데이터를 전송 시 URL 뒤가 아닌 HTTP BODY의 Form Data

                           라는 영역에 데이터를 실어 보낼 경우 사용하는 방식이다. HTTP BODY쪽에 

                           데이터를 실어 보내기 떄문에 기존보다 큰 데이터를 실어 보내기 적합하다.

 

※ GET과 POST를 써야하는 시점

 

●  GET은 접근이 용이한 페이지에 주로 사용된다. 예를들면 쇼핑몰 사이트와 같이 특정

                    상품을 다른 사람에게 접근하게 도와주려고 할 경우 GET을 이용하게 되면 상품의

                    일련 번호까지 전부 지정하여 보내기 떄문에 많은 사람들에게 해당 페이지를

                    공유할 수 있는 이점이 있으므로 이럴 경우 GET 방식을 사용한다.

<form action="#" method="GET">
<label for="text3">search</label>
<input type="search" id="text3" name="text3" value="검색란" readonly>
</form>

                

                 POST는 개인의 프라이버시가 보호받아야 하는 영역 혹은 접근을 하기 위해 권한이

                    필요한 사이트의 경우 외부에서 무분별하게 접근을 하면 안되기 때문에 이럴 경우

                    POST를 쓰며 주로 MyPage나 로그인을 해야지 접근이 가능한 페이지일 경우 POST 방식을

                    쓰는 경우가 많다.

<form action="#" method="POST">
     <ul>
      	<li>
            <label for="text1">text</label>
            <input type="text" id="text1" name="text1" size="12" autocomplete="off">
        </li>
         <li>
             <label for="text2">password</label>
             <input type="password" id="text2" name="text2" maxlength="8">
        </li>
    </ul>
</form>