[HTML] Chapter 09. 데이터 전송

1. 개요: 사용자 데이터를 취하는 방식 

◍ Get 방식: form을 통해 지정한 양식으로 데이터를 추출하고 jsp를 거쳐 Database에 저장한다. 

 

◍ Post 방식: Server의 post 변수에 데이터를 저장한다. 도메인 위치에 정보가 보이지 않아 보안에 이점이 있으나 해당 방식을 사용하려면 Server가 필요하다.

 

1.1. Get 방식과 Post 방식의 비교

 

1.2. 데이터 전송 방식의 차이

 

2. 데이터 입력과 전송을 위한 포함: <form></form>

폼은 사용자가 입력한 데이터를 전송하기 위해 사용하는 태그로, 서버에 정보를 전달하고 저장하는 기능을 한다.

또한 해당 정보를 기반으로 서버에서 해당하는 페이지를 찾고, 다른 웹 페이지를 보여준다.

기본적으로 input과 select를 통해 데이터를 입력받을 수 있다.

 

 

2.1. form 의 속성 

분류	내용
action	폼을 전송할 서버의 스크립트 파일을 지정한다.
name	폼을 식별하기 위한 이름을 지정한다.
accept-charset	폼 전송에 사용할 문자 인코딩을 지정한다.
target	action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
method	폼을 서버에 전송할 http 메소드를 정한다. (대부분 get 또는 post를 사용한다.)

 

2.2. 다음 페이지의 데이터 분류: name=”개발자 지정 타입” 

<input type=”text” name=”none”>과 같이 name을 지정하면 해당 input에 입력된 정보와 name의 이름을 조합하여 get 방식으로 다음 페이지에 전송한다.

예를 들어, 해당 input 데이터에 12345를 입력한다면 “?none=12345” 라는 데이터가 url에 포함되고, 해당 정보가 다음 페이지로 전송하는 것이다. (정확히는 정보를 저장하는 Server, Database) input 타입에 따라 표시되는 정보가 상이하고 checkbox나 radio, date(날짜)

정보 또한 get 방식으로 전송이 가능하다. 

 

2.3. form에 입력한 데이터를 ‘action’으로 이동: <input type=”submit”>

 form에 입력한 데이터를 지정한 method와 action으로 이동시키기 위해서는 submit을 이용하여야 한다.

만약 submit이 없으면 해당 데이터가 Server로 전달되지 않는다.

때문에 반드시 form안에 submit 기능을 포함하여야 함을 기억하자.

또한 value로 출력될 submit의 값을 지정할 수 있다. default 값은 ‘제출’이다.

 

2.4.  form에 입력한 데이터를 초기화: <input type=”reset”>

 form에 입력한 데이터를 초기화하는 기능을 한다.

해당 submit와 동일한 모양으로 버튼이 생성되며, 클릭시 초기화가 진행된다. 또한 value로 출력될 reset의 값을 지정할 수 있다. default 값은 ‘초기화’이다.

 

<form method="get" action="test.html">
  <fieldset>
    <legend>
    	사용자 정보
    </legend>
    <ul>
      <li>
        <labe for="uid">
        	아이디
        </labe>
        <input type="text" id="uid">
      </li>
      <li>
        <label for="umail">
       		이메일
        </label>
        <input type="text" id="umail" pattern="^[a-zA-Z0-9]+@[a-zA-Z0-9]+$">
      </li>
      <li>
        <label for="pwd1">
        	비밀번호
        </label>
        <input type="password" id="pwd1">
      </li>
      <li>
        <label for="pwd2">
        	비밀번호 확인
        </label>
        <input type="password" id="pwd2">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend
    	>이벤트와 새로운 소식
    </legend>
    <input type="radio" name="mailing" id="mailing_y">
    <label for="mailing_y">
    	메일 수신
    </label>
    <input type="radio" name="mailing" id="mailing_n" checked>
    <label for="mailing_n">
	    메일 수신 안 함
    </label>
  </fieldset>
  <input type="submit" value="가입하기">
  <input type="reset" value="취소">
</form>

 

2.5. 전송할 데이터를 감추는 동작: <input type=”hidden”> 

디자인 요소 혹은 사용자에게 공개하지 않을 정보를 전송할 때 사용한다.

type을 hidden으로 지정하고 value 등으로 전송한다.

사용자에 따라 다르게 정보가 전송되기 위해 JavaScript를 사용하고 있다.

 

예를 들어 쇼핑몰에서 특정 고객이 블랙리스트라면 해당 정보에 따라 공개해야하는 상품이나 가격 정보가 상이할 것이다.

때문에 이러한 정보를 Server에 전송하기 위해서는 Get 혹은 post를 통해 전달이 필요한데, 이 정보를 웹에서 전달할 때 해당 정보를 감추는 역할을 하는 것이다.

만약 이러한 hidden이 없다면 사용자는 자신에게 주어진 블랙리스트라는 정보를 알게 될 것이다.