[HTML/CSS] GET/POST_WEB에서 정보전달 방법

2020. 12. 10. 00:43

728x90

1. <form> 안에서 속성 값으로 get/post 사용

[목차로 이동]

* <form> 안에 action은 submit을 했을 때 파라미터를 보낼 곳을 의미하고, method는 전송방법이다.
* get : url에 파라미터로 보내진 값이 ?뒤에 보여짐. 파라미터를 받을 때는 php에서는 $_GET['파라미터이름'] 으로 받는다. 보안에 취약하므로 북마크와 같이 보안이 중요하지 않은 곳에 사용
* post : url에 파라미터를 감춰서 전달하며 파라미터를 받을 때는 php에서는 $_POST['파라미터이름'] 으로 받는다.
* <input type="submit"> 은 <form>으로 감싸진 영역 내의 name 속성을 파라미터 이름으로 action에 파라미터를 전달

  <body>
    <div style="border : 1px solid; width : 250px; height : 200px; margin : 0px auto;">
      <form action="test.php" method="get">
        <div align="center" >
          <p><input type="text" name="textName" placeholder="textArea"></p>
          <p><textArea name="textAreaName"  rows="4" cols="20" > </textArea></p>
          <p><input type="submit" value="Submit"></p>
        </div>
      </form>
    </div>
  </body>

2. 함수 내에서 get/post 선언

[목차로 이동]

* <form> 속성에 따로 action과 method를 코딩하지 않고 button을 클릭하면 실행되는(onclick) 함수 내에 action과 method를 코딩해 사용할 수 있다.
* onclick="send(this.form)"에 있는 this.form은 send() 외부에 <form>내부에 있는 value를 파라미터로 전달
* function send( f ) {...} 스크립트 영역에서 전달 받은 파라미터의 유효성 체크를 하고 싶을 때는 f.textName.value / f.textAreaName.value 와 같은 형식으로 파라미터를 받아 유효성 체크를 할 수 있음

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      function send(f) {
        f.action = "test.php";
        f.method = "get";
        f.submit();
      }
    </script>
  </head>
  <body>
    <div style="border : 1px solid; width : 250px; height : 200px; margin : 0px auto;">
      <form action="test.php" method="get">

        <div align="center" >
          <p><input type="text" name="textName" placeholder="textArea"></p>
          <p><textArea name="textAreaName"  rows="4" cols="20" > </textArea></p>
          <p><input type="button" value="전송버튼" onclick="send(this.form);"></p>
        </div>
      </form>
    </div>
  </body>
</html>

728x90

저작자표시

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

[HTML/CSS] CSS 속성_폰트/폰트 적용, div 박스,리펙토링 (0)	2020.12.27
[HTML/CSS] 표 (0)	2020.11.28

코딩 기록