form에 대해

Jinny·2021년 10월 30일

html

HTML 기초

목록 보기

11/13

form이란?

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

서버란? 정보를 제공하는 호스트(host)이다!

서버와 클라이언트

클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다!
1. 클라이언트 : (네이버 홈페이지 주소를 입력) 네이버 홈페이지 보여주세요!(요청)
2. 서버 : 네. 홈페이지 html문서를 보내드릴테니 보세요!
(응답으로 네이버 웹페이지를 보냄)
3. 클라이언트 : 네!! 제 웹 브라우저에 네이버 홈페이지가 오픈됐어요! 감사합니다~

클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있다!

로그인 예시

클라이언트 : 로그인 시켜주세요! 로그인버튼 클릭!(요청)
서버 : 네! 앗! 근데 비밀번호가 틀려요!(응답)
클라이언트 : 앗 그렇군요!

로그인 양식은 세 개의 입력 요소(아이디, 비밀번호, 로그인버튼)로 구성되어 있으며, 입력 데이터는 form을 통해 서버로 전송(submit)된다!

form태그

form은 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있다.

<form>
    <input type="text" placeholder="아이디">
    <br>
    <input type="text" placeholder="비밀번호">
</form>

form값 서버로 보내기

form의 내용(입력값)을 보내기 위해 input 태그의 submit 타입 사용 가능!

<form>
    <input type="text" placeholder="아이디">
    <br>
    <input type="text" placeholder="비밀번호">
    <br>
    <input type="submit" placeholder="로그인">
</form>

'로그인'버튼을 누르면 입력된 아이디와 비밀번호가 서버로 전송되고(요청)
서버 측에서 데이터를 처리한 결과를 클라이언트에게 보내준다(응답)

form의 속성

action : 입력값을 전송할 서버의 URL
method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지
(GET or POST)

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

위 예시코드는 example.php라는 서버 프로그램으로 입력값을 POST방식으로 전송할 것이다. 라는 내용이다.

GET VS POST

GET : 서버에 요청을 보내어 응답을 받아낸다.
서버로부터 정보를 '가져오겠다'는 성격의 요청이다.
POST : 서버에 요청을 보내어 작업을 수행한다.
서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.
서버의 정보를 '조작하겠다'는 성격의 요청이다.

GET은 값을 URL끝에 붙여 이동하고
POST는 BODY에 값을 담아 이동해 URL에 보이지 않는다!
-GET : url에 값이 보여 보안이 좋지 않아 단순요청을 할 때 사용
-POST : url에 값이 안보여 보안이 좋아 서버의 정보를 조작할때 사용