이번 포스팅에서는 중요한 개념인 폼의 기능에 대해서 알아보겠습니다.
먼저 GET 방식과 POST 방식이 있는데요, form 요소를 쓸때는 action과 method를 기재하는것은 form에 관함 포스팅에서 알아보았습니다.
그렇다면 이 안에 method는 어떤것이 있느냐에 대해 알아보겠습니다.
GET, POST 말고도 PUT이나 DELETE가 추가적으로 있지만 대표적인 GET과 POST를 먼저 알아보겠습니다.
먼저 로그인 화면을 구성해보도록 하겠습니다.
이런식의 로그인화면을 마크업 하는건 쉽게 할 수 있습니다.
form 요소안에 fieldset을 기재하고 그 안에는 legend요소와 input 요소 그리고 button을 추가하면 되는 간단한 마크업입니다.
본론으로 들어가서 get과 post에서 알아보자면 소스코드의 주석을 통해 설명을 드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폼의 기능에 대하여</title>
</head>
<body>
<!--
클라이언트에서 서버로 넘어가는 데이터 : 파라미터
파라미터가 넘어가는 방식 : GET, POST (PUT, DELETE)
GET 방식
- 주소 뒤에 &xxx=yyy&aaa=bbb... 이런식(쿼리스트링) 으로
파라미터가 넘어가는 방식
- 장점 : 어디서든 똑같은 페이지를 볼 수 있음
- 단점 : 용량제한 / 파라미터가 주소창에 노출됨
POST 방식
- 파라미터가 주소창에 노출되지 않음(HTTP 프로토콜의 body로 넘어감)
- 그렇다고 보안성이 좋다는게 아님(HTTP 프로토콜 body에 노출, 패킷을 훔칠 수 있음)
- HTTP -> HTTPS (보안성이 좋아짐) 최근 프로토콜
- 장점 : 용량이 제한없음 / 주소창에 노출되지 않음
- 단점 : 복사 붙여넣기 해도 결과가 다름
-->
<h1>로그인</h1>
<form action="test" method="get">
<fieldset>
<legend>로그인 폼</legend>
<label>이메일<input name="id" id="in" type="email" placeholder="이메일 입력"></label>
<!-- label을 쓰는 방법 1 -->
<label for="pwd">비밀번호</label>
<!-- label을 쓰는 방법 2 -->
<input name="pass" id="pwd" type="password" placeholder="비밀번호 입력">
<button type="submit">로그인</button>
</fieldset>
</form>
<label><input type="checkbox">이 약관에 동의합니다.</label>
<!--
label 요소 : input 요소에 제목을 붙이는 요소
-->
</body>
</html>
다음과 같은 화면을 구성하는 소스 코드 및 설명입니다. 사진으로 추가적 설명을 드리겠습니다.
이런식으로 다음과 같이 기재한다고 예를 들어보겠습니다.
이런식으로 작성을 하게되면 get방식부터 보게되면
1. GET 방식
주소창을 보면 test? id=qwe22~ pass= hello 라고 출력된 화면이 보이시나요 ?
이런식으로 전송한 파라미터가 넘어가는게 주소창에 바로 보입니다. 보안성이 엄청나게 떨어지게되는거죠
로그인 form을 구현할때는 그래서 반드시 get방식은 삼가해야합니다. 비밀번호를 입력하는 input요소의 type 속성이 password로 안보일지라도
주소창에는 나오게됩니다.
그렇다면 ! POST 방식은 어떻게되는지 한번 볼까요 ?
2. POST 방식
주소창을 보게되면 아까와 다르게는 파라미터들이 보이지 않습니다. 아 ! GET 방식처럼 파라미터가 넘어가는 저 글자를 '쿼리스트링' 이라 합니다.
POST 방식은 쿼리스트링이 넘어가지 않기때문에 GET방식과 다르게 줄이 길어지지 않고 용량에 제한이 없습니다. 주소창에 다 표시가 되기때문에 용량이 제한이 있습니다.
그래서 ! 둘 중에는 물론 POST 방식이 보안성도 좋고 용량도 제한이 없으니 파일업로드를 하고 전송을 할때는 좋겠구나 하겠지만
보안성이 GET 방식보다는 좋다는 뜻이지 완전히 좋다는게 아닙니다.
POST방식 같은 경우에는 우리가 입력한 그 데이터들이 HTTP 프로토콜에 남아있고 Form Data를 보면 확인할 수 있습니다.
F12 개발자 도구를 통해서 확인을 해보면
이런식으로 데이터가 보입니다. 결코 보안성이 좋다곤 할 수가 없겠죠, 그래서 최근 보안성이 좋아진 https 프로토콜을 사용하게됩니다.
get 방식과 post 방식 어느정도 이해가 되셨길 바랍니다.
마지막으로 label에 대해 간단히 설명을 드리겠는데요
label 은 쓰는 방법이 2개가 있습니다. 코드에 방법 1과 2를 기재해보았습니다.
그렇다면 이 label 요소는 어떤 기능을 하나 한번 보면
파랗게 동그라미친 부분의 글자를 클릭하면 바로 이메일 입력 혹은 비밀번호 입력을 할 수 있는 input 요소로 이동이 됩니다.
굳이 input 요소를 클릭하지 않아도 같이 묶게되면 작동을 하는거죠
아주 간단하지만 전체를 label로 감싸는 방법도 있고 input 요소에 id를 주어 label 에 for 속성 값을 id로 주는 방법도 있습니다.
이번 포스팅에서는 정말 중요한 get,post 방식에 대해 알아보았습니다.
이제 html 이 거의 막바지에 달했습니다! 다음 포스팅에서 기재하겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 11. 여러가지 입력요소들 (회원가입 폼) (0) | 2018.08.08 |
|---|---|
| 10. 복습 예제 (0) | 2018.08.01 |
| 8. 테이블(table) 예제 (0) | 2018.07.31 |
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |
| 7. Font Awesome (0) | 2018.07.25 |