HTML5 - 폼 태그 및 GET 방식과 POST 방식
form
데이터베이스로 data를 전송하기 위한 태그
전체 구문
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get"> <!-- action="data가 전송될 주소", GET방식과 POST방식-->
이름 : <input type="text" name="uname" /><br /> <!-- "text" 텍스트가 입력된 , name은 해당 컬럼의 이름 -->
아이디 : <input type="text" name="uid" /><br />
비밀번호 : <input type="password" name="upw" /><br /> <!-- "password" **와 같이 비밀번호가 입력될 창 -->
연락처 : <input type="text" name="uphone1" size="5" /> - <!-- size는 창에 들어갈 문자수 -->
<input type="text" name="uphone2" size="5" /> -
<input type="text" name="uphone3" size="5" /><br />
사진 : <input type="file" name="upic"/> <br /> <!-- 파일을 선택할 수 있는 윈도우 창 -->
성별구분 : <input type="radio" name="gender" value="m">남,
<input type="radio" name="gender" value="w">여 <br /> <!--라디오 버튼, name은 같고 value 값으로 구분-->
사용언어 : <input type="checkbox" name="lan" value="kor" checked="checked" />한글, <!--checked 기본 체크되어 있는 항목-->
<input type="checkbox" name="lan" value="eng" />영어,
<input type="checkbox" name="lan" value="jap" />일어,
<input type="checkbox" name="lan" value="chi" />중국어<br /> <!--체크박스 버튼, name은 같고 value로 구분-->
자기소개 : <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br /> <!--글을 입력할 수 있는 창 크기-->
국적 : <select> <!--리스트목록-->
<option>KOREA</option>
<option>USA</option>
<option>JAPAN</option>
<option>CHINA</option>
</select><br />
좋아하는음식 : <select multiple="multiple"> <!--여러개 선택 가능한 리스트 목록-->
<option>김치</option>
<option>불고기</option>
<option>파전</option>
<option>비빔밥</option>
</select><br />
<input type="submit"/> <!-- 실제 데이터 전송, 클릭하면 action에 정의된 주소로 get 방식 또는 post 방식으로 전송 -->
</form>
</body>
</html>
구문 설명
action
data가 전송될 서버측의 주소
method
간단하다. 필요한 내용만 언급하겠습니다.
POST 방식과 GET 방식이 있다.
1) GET
브라우저 창의 주소 표시줄에 보이게 데이터를 전송하는 방식
default는 GET방식
2) POST
브라우저 창의 주소 표시줄에 보이지 않고 데이터를 전송하는 방식
위 사진과 같이 GET 방식은 도메인주소(http://example.com) 뒤에 ?data=20140410 이 온다.
?뒤에 data 변수에 Parameter로 20140410을 적용한 것이다.
3) GET 방식과 POST 방식의 차이
GET 방식은 URL 주소에 다 노출이 되고 POST 방식은 은닉화 처리가 되어 보이지 않게 된다.
GET 방식은 idempotent, POST 방식은 non-idempotent 이다.
idemptent란 멱등성으로서 수학적으로 연산을 여러번 적용하더라도 결과 값이 바뀌지 않는다는 성질입니다.
GET메소드를 사용해서는 여러번 적용하더라도 결과 값이 바뀌지 않는것을 개발하고 POST 메소드를 사용해서는 결과값이 바뀌는 유형의 개발이 적합하단 것입니다.
여러 블로그에서는 GET방식은 가져오다란 뜻이다, Select 용도의 개발을 해야한다는 정의가 많습니다.
Databases에서의 Select는 데이터를 변경하지 않고 가져오기때문에 idempotent 성질을 가지고 있기 때문입니다.
또한 GET방식은 URL 기반의 parameter을 기반으로 하기 때문에 데이터 변경등의 기능을 개발하게 되었을때 크롤링 봇등 예기치 못한 접근으로 인해 문제가 발생 할 여지가 있습니다.
마지막으로 GET방식은 POST방식보다 빠르다고 합니다.
바로 GET방식은 캐싱이 가능하고 POST방식은 캐싱이 불가능하기 때문입니다.
캐싱으로 인해 한 번 접근했던 정보에대해 다시 접근할때 빠르게 가져올 수 있기 때문에 POST방식 보다는 빠르다고 합니다.
'IT > 소프트웨어' 카테고리의 다른 글
| CSS3 - CSS 기본, 선택자 (0) | 2019.07.08 |
|---|---|
| HTML5 - 레이아웃 구성 태그 div, span 및 시멘택 태그 header, nav, section, footer (0) | 2019.07.08 |
| HTML5 - 멀티미디어 태그 (0) | 2019.07.08 |
| HTML5 - 태그 설명 (0) | 2019.07.08 |
| HTML5 - 시작 및 HTML5 표준 코딩 규칙 (2) | 2019.07.08 |
댓글