웹 HTML 입문 공부 9. form 데이터 전송, fieldset

form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그입니다. 

여기에서 서버란, 정보를 제공하는 호스트(host)를 말합니다. 

 

가령, 우리가 티스토리 홈페이지를 열고자 할 때, 티스토리의 서버에 html 페이지를 요청하면

서버에서 html 문서로 이루어진 웹 페이지를 응답으로 보내줍니다. 

그리고 우리의 웹 브라우저에 홈페이지가 오픈되는 것이에요. 

 

즉, 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공합니다.
클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있습니다. 

(아이디가 다르다던가, 비밀번호가 다르면 로그인을 거절하는 응답을 보낼 수도 있습니다.) 

 

form 

여기에서 form은 입력 요소들을 감싸는 형태이며, 입력 값을 서버 측으로 제출(submit)하는 역할을 합니다. 

입력 데이터들을 서버 측으로 제출하는 형태예요. 

 

submit

form 의 내용이자 입력 값을 제출하기 위해서 input 태그의 type 중 submit 타입을 사용할 수 있습니다.

button 대신에 입력하면 전송이 되고 한 번 새로고침이 되는 것을 볼 수 있어요. (데이터를 보낸 후 새롭게 로딩) 

버튼을 누르면 입력된 값이 서버로 전송되고(요청)

서버측에서 데이터를 처리한 결과를 클라이언트에게 보내줍니다.(응답) 

 

form 의 속성

그럼 이제 form의 속성에 대해서 알아볼게요. 

form의 기본 구성은 다음과 같습니다.

 

<form action = "exmaple.php" method = "POST">
</form>

 

action : 입력값을 전송할 서버의 url 을 입력합니다.  즉 서버 측 주소를 지정하는 속성입니다. 
method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST) 를 결정합니다. 

　　　　즉 데이터 전송 방식을 지정하는 속성입니다. 
　　　　get 데이터를 가져다가 쓰고 싶을 때 
　　　　POST 데이터를 서버에 주기만 하고 싶을 때 

 

위 예제에서는 example.php 의 서버 프로그램으로 입력 값을 전송해서 응답을 요청하는 것이고

POST 방식으로 전송한다는 것입니다. 

그럼 get과 POST는 이후에 조금 더 알아볼 것이니 간단하게 개념만 확인할게요. 

GET 은 서버에 요청을 보내서 응답을 받아낸다는 것이고, 서버로부터 가져오겠다고 하는 성격의 요청입니다. 

POST는 서버에 요청을 보내서 작업을 수행하겠다는 것이고, 서버에 있는 데이터를 추가, 수정, 삭제한 후에 응답을 받아내는 것으로 서버의 정보를 조작하겠다는 성격의 요청입니다. 

 

폼을 어떻게 활용하는지 아래 예제로 같이 볼게요. 

    <h2> 로그인 폼 흉내내기 </h2>
<form action="#" method="post" onsubmit="return false;""> 
    <!-- #은 프론트엔드에서 id를 뜻하는 기호 입니다. -->

    <label> ID <input type="text" name="id"> </label>
    <br>
    <label> PW <input type="password" name="pw"></label>
    <br>
    <hr>
    <input type="submit" value="로그인"> <!-- butten 과 외형은 같지만 전송을 위한 type-->

</form>

<form action="#" method="post" onsubmit="return false;""> 를 살펴보면 우리가 아직 배우지 못한 것들이 있는데요. 

 

● 우선 action 에는 전송할 서버를 입력해야하지만 이것은 샘플이기 때문에 비워두어야 합니다. 

그렇게 하기 위해서 빈 자리를 #으로 표시하는데, 이것은 프론트엔드에서 id를 뜻하는 기호로 현재에는 어떠한 역할도 하지 않습니다. 

● method 에는 데이터를 서버로 전송한다는 의미의 POST 가 작성되어 있습니다. 

● onsubmit 는form 태그 안에서 form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 태그예요. 

form 은 클릭하는 순간 submit 제출을 실행하는데, 만약 여기에서 return false 를 입력하면 submit 제출을 하지 않습니다.

 

자세한 것은 이후에 조금 더 html 을 배우면서 살펴볼게요. 

 

fieldset 

다음으로 영역을 표시하는 fieldset 에 대해서 알아보겠습니다. 

fieldset은 어떤 영역에 대해 가시적인 블록을 형성해서 해당 영역을 표시하는 기능을 수행합니다. 

필드셋을 활용하면 블록이 형성되기 때문에 별도로 <br>을 작성하지 않아도 됩니다. 

 

작성 예제는 다음과 같습니다. 

 

<fieldset>
    <label> ID <input type="text" name="id"> </label>
</fieldset>

 

아래는 실행한 결과예요. 

 

ID의 둘레를 감싸고 있는 박스가 표시한 fieldset의 영역입니다. 

여기에서 조금 더 활용을 해서 fieldset의 종속적인 기능으로 <legend>를 사용할 수 있습니다. 

<legend>는 범례(팻말) 라는 뜻으로 범례를 씌우면 아래와 같이 표시 됩니다. 

<h2> 로그인 폼 조금 더 보기 좋게 흉내내기 </h2>
<form action="#" method="post" onsubmit="return false;""> 
    
<fieldset>
    <legend>ID </legend>
    <label> <input type="text" name="id"> </label>
</fieldset>

 

범례를 씌울 부분을 사이에 끼워넣고 출력을 합니다. 

 

field 위에 팻말처럼 문자열이 들어가 있습니다. 

 

이처럼 form은 입력 요소(input, select, textarea 등)를 감싸고, 데이터를 제출(submit)합니다.

이후에는 지금까지 배운 입력요소들을 바탕으로 예제를 작성해볼게요! 

수고하셨습니다.