form 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • form 태그
    07 입력 양식 태그
    form 태그

    HTML 입력 양식을 사용하려면 가장 먼저 <form> 태그를 사용해야 합니다. <form> 태그는 하나의 신청서 종이라고 생각하시면 이해하기 쉽습니다.

    위와 같이 <form> 태그로 묶으면 그 안에는 질문, 선택사항, 답변 작성 공간 등이 배치된다는 것을 알 수 있습니다.


    form 태그의 다양한 속성


    form태그와 사용할 수 있는 속성은 매우 다양하지만, 그 중 action과 method 속성은 필수로 사용해야 하는 아주 중요한 속성입니다.

    먼저 action 속성은 데이터를 보낼 URL을 지정합니다. 즉, 해당 데이터를 처리할 웹 서버 URL을 값으로 가지고 있죠. URL과 관련된 내용이 기억나지 않으신다면 <a> 태그 강의 중 '웹사이트의 경로와 주소' 강의를 다시 읽어보시기 바랍니다.

    다음으로 method 속성은 보내는 방식을 지정합니다. get 또는 post를 값으로 가지며, GET 방식과 POST 방식의 기능은 동일합니다. 두 기능 모두 브라우저에서 사용자가 양식에 입력한 데이터를 서버로 보내는 역할을 수행합니다.


    GET과 POST 


    GET과 POST는 동일한 역할을 수행하지만 보내는 방식에 차이가 있습니다. 사용자가 서버로 데이터를 전송할 때 데이터는 HTTP Request Message라는 특별한 메세지에 담겨 보내집니다. (HTTP Request Message에 대한 내용은 아직은 모르셔도 되니 넘어가겠습니다)

    쉽게 말하자면 데이터를 정해진 메세지에 적어 보낸다는 뜻인데, 이 메세지는 크게 Header와 Body 두 부분으로 나뉩니다.

    메세지의 Header에는 데이터의 목적지가 되는 서버의 URL이 작성됩니다.

    이때 GET 방식의 경우 사용자가 입력한 데이터를 서버URL 말미에 이어 붙여 숨김 없이 보냅니다. 

    마치 엽서 카드와 같이 주소와 내용을 한 페이지에 보이도록 붙이는 것이죠. 이처럼 GET 방식은 주소와 데이터를 함께 서버로 보냅니다.

    이와 다르게 POST 방식은 데이터를 URL 끝에 붙이지 않고 데이터의 내용을 메세지의 Body 부분에 숨겨 보냅니다.

    GET 방식을 엽서 카드에 비교했다면 POST는 일반적인 편지와 같습니다. 보통 편지는 내용을 적은 편지지를 편지 봉투로 밀봉하여 보냅니다. 이처럼 POST 방식은 받는 서버 주소에 데이터를 적지 않고 편지 봉투 내부, 즉 메세지의 Body에 숨겨 보냅니다.


    GET과 POST를 따로 사용하는 이유


    왜 GET 방식과 POST 방식과 같이 동일한 역할을 수행하는 키워드가 여러 개일까요? "데이터는 당연히 비밀로 보내야 하는 거 아닌가?"라는 생각이 드실 겁니다. 하지만, GET 방식과 POST 방식은 그 특징으로 인해 쓰임과 목적에 차이를 갖고 있습니다.

    GET 방식은 get이란 말 그대로 '받다'라는 뜻으로, 주로 서버에 데이터를 요청하고 데이터를 받아오는 역할을 수행합니다. 즉, 데이터 조회를 목적으로 할 때 주로 쓰이죠. GET 방식을 사용하는 가장 적합한 예시는 바로 검색입니다. 검색 창에 검색을 해보면 주소창에 사용자가 검색한 검색어가 그대로 노출됩니다. 만약 주소창에 적힌 검색어를 바꾸어 접속하면 바뀐 검색어로 검색된 결과가 노출됩니다.

    이때문에 우리가 검색한 결과를 다른 사람에게 쉽게 전달할 수 있고, 즐겨찾기 또한 가능합니다.

    반면, POST 방식은 post란 말 그대로 '게시하다'는 뜻을 가지며 서버에 있는 데이터를 쓰거나 수정, 삭제할 때 주로 사용합니다. 대표적인 예시 중 하나가 바로 게시물 작성입니다. 만약 게시물 작성, 수정 혹은 삭제가 GET으로 이루어진다면 의도치않게 주소만으로 게시물이 삭제가 되거나, 본인의 것이 아닌 계정으로 로그인을 하는 등의 문제가 발생할 수 있습니다. 따라서 로그인이나 게시물 작성, 회원가입 등 데이터에 대한 보안이 필요한 경우 POST 방식을 이용합니다.

    method 속성의 값으로 GET, POST 중 어떤 방식을 선택해야 하는지 그 기준과 용도를 반드시 알아두어야 합니다. 우리는 이번 실습을 통해 회원가입 형식을 만드는 것이 목적이기에 본래 method 속성 값으로 POST 방식을 사용해야 하지만, 데이터가 주소로 넘어가는 것을 눈으로 확인하기 위해 실습에 한하여 GET 방식을 이용하겠습니다.

    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)