티스토리 뷰

UI_UX/HTML & CSS

[HTML] 2. <form> 태그 GET 방식 & POST 방식

쟌쥰 2019. 12. 30. 17:48

Server <-> Client

 

form 태그를 이해하기 위해서는 우선 server와 client라는 개념을 알아야 한다. 

 

  • server 는 정보를 제공하는 쪽,
  • client 는 정보를 요청해 server로 부터 정보 제공받는 쪽 이다.

 

예를 들어 웹브라우저의 주소창에 google 홈페이지 도메인 주소인 https://www.google.com/ 을 입력하면 웹 브라우저는 이에 해당하는 서버에 컨텐츠를 요청한다. 그러면 해당 서버는 요청에 따른 컨텐츠를 웹 브라우저에 제공해 준다.

 

이 맥락을 다시 살펴보면 client는 웹브라우저를 통해 웹 서버에 원하는 정보를 요청하고, server는 요청에 따른 컨텐츠를 제공해 준다.

server와 client의 관계를 나타낸 그림

 

<form>

<form> 태그란?

 

form이란 사용자의 데이터를 서버에 전송하는 방법 이다. 

 

일반적으로 회원가입, 로그인, 게시글 작성 처럼 정보를 서버로 보내야 할 때 사용한다.

 

<form> 태그 문법

<form action="서버주소" method="메소드형식">
	보낼 정보
</form>

form 태그를 이용해 서버에 정보를 보낼 때에는 위와같이 <form>태그로 정보를 보낼 부분을 감싸 주어야 한다.

 

action 속성은 정보를 보낼 서버주소를 기입하는 속성이고,

method 속성은 데이터를 전송하는 방법 을 기입하는 곳으로 get방식, post방식 2가지가 있다.

 

GET방식 VS POST방식

GET 방식

 

GET방식은 client가 server에 있는 정보를 요청해서 가져오기 위해 설계되었다.

 

URL에 쿼리 스트링을 추가하여 데이터를 전송하는 방식이다.

 

240byte까지 전달할 수 있으며 QUERY.STRING 환경변수를 통해 전달된다.

 

URL노출로 보안성이 요구되는 경우에는 사용하면 안되며 검색엔진에서 검색단어 전송에 많이 이용한다.

 

** QUERY STRING : 입력한 데이터를 서버로 전달하는 방식으로 '?'로 시작한다. 데이터는 '이름=값'의 형식을 취하며 여러 데이터들이 있을 경우 '&'로 구분한다.

 

POST 방식

 

POST 방식은 server로 정보를 올리기 위해 설계되었다.

 

html header에 포함되어 전송되며 데이터크기의 제한은 없다.

 

URL에 파라미터가 표시되지 않는다.

 

<form> 태그 안의 <input> 태그들...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="/testw/product" method="post">
		<fieldset>
			<legend>납품자정보</legend>
			<ol>
				<li><label for="name">납품자명: </label> <input id="name" type="text" name="name" required="required" placeholder="name" autocomplete="name"></li>
				<li><label for="email">email: </label> <input id="email" type="text" name="email" required="required" placeholder="answs@naver.com" autocomplete="email"></li>
				<li><label for="homepage">홈페이지: </label> <input id="homepage" type="text" name="homepage" required="required" placeholder="http://" autocomplete="homepage"></li>
			</ol>
		</fieldset>
		
		<fieldset>
			<legend>납품정보</legend>
			<ul>
				<li><label for="parcelname">상품명: </label> <input id="parcelname" type="text" name="parcelname" required="required" autocomplete="parcelname"></li>
				<li>
					<label for="parcelcount">납품수량: </label> 
					<input id="parcelcount" type="text" list="list" name="parcelcount" required="required" placeholder="최소10" autocomplete="name">
					<datalist id="list">
						<option>10</option>
						<option>20</option>
						<option>30</option>
						<option>40</option>
						<option>50</option>
					</datalist>
				</li>
				<li><label for="parcelgrade">납품등급: </label> <input  id="parcelgrade" type="range" name="parcelgrade" min="1" max="10" step="1" value="6"></li>
				<li><label for="etc">기타사항: </label><textarea id="etc" name="etc" rows="5" cols="30"></textarea></li>
			</ul>
		</fieldset>
		<input type="submit" value="send message">
	</form>
</body>
</html>

 

'UI_UX > HTML & CSS' 카테고리의 다른 글

[CSS] 4. 단락  (0) 2020.01.25
[CSS] 3. Font  (0) 2020.01.25
[CSS] 1. 외부/내부 스타일시트(CSS) 적용방법  (0) 2020.01.25
[HTML] 3. HTML5 시맨틱 태그  (0) 2020.01.25
[HTML] 1. HTML 요소 정리  (0) 2019.12.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함