ABOUT ME

chanho Yoon
chyoon0512@gmail.com


깃허브


블로그 이사!

이 블로그로 이사했어요!!


Today
-
Yesterday
-
Total
-
  • HTML5 FORM 태그
    Programming/HTML5 - CSS3 2017. 7. 7. 16:36
    반응형

    FORM 태그

    • HTML 문서에서 사용자의 입력을 서버로 전달하는 기능을 담당한다 




    FORM 태그에서 지원하는 속성

    • action : 사용자의 입력 데이터를 보내는 목적지 URL을 지정

    • method : 사용자의 데이터를 넘겨주는 방식을 지정, GET과 POST 방식 두 가지가 있다.

    GET 방식 : url을 통해서 데이터를 보내는 방식

    POST 방식 : url이 아닌 다른 방법으로 숨겨져 보내는 방식

    • name : form을 식별하기 위한 이름을 지정

    • target : action 에서 지정한 스크립트 파일이 현재나 다른 위치에서 열리도록 지정

    • accept-charset : 폼 전송에 사용될 문자 인코딩을 지원




    FORM 태그 실습

    1
    2
    3
    4
    5
    6
    7
        <body>
            <form action="http://localhost/html.php" method="GET">
                <p>ID : <input type="text" name="id"></p>
                <p>PASSWORD : <input type="password" name="pwd"></p>
                <input type="submit" value="전송">
            </form>
        </body>




    action 은 form 내부에 전송(submit) 을 했을 때 데이터를 보내는 곳의 url을 지정 

    현재 http://localhost/html.php 로 보내고 있다


    method 는 get 방식과 post 방식이 있는데 차이점은

    GET 방식으로 보냈을 경우 <form action="http://localhost/html.php" method="GET">

    넘겨지는 값이 보이기 때문에 보얀에 취약



    POST 방식으로 보냈을 경우 <form action="http://localhost/html.php" method="POST">

    노출이 되지 말아야 할 데이터들은 POST로 전송




    FORM 태그 target 속성으로 페이지 여는 방식 지정

    • _self : 이벤트가 일어난 페이지에서 열리게 됨

    1
    <form action="http://localhost/html.php" target="_self" method="POST">
    cs

    • _blank : 새로운 탭이나 팝업으로 별도의 창에서 열림

    1
    <form action="http://localhost/html.php" target="_blank" method="POST">
    cs


    accept-charset 속성으로 데이터의 문자셋 변경해서 전송하기

    FORM으로 전송할 때 문자셋이 지정 가능 합니다.  이 속성이 필요한 이유는 브라우저 문자셋과 서버의 문자셋이 틀릴 경우 글자가 깨지게 됩니다. 만약 웹 페이지가 EUC-KR 이고 서버는 UTF-8 이라면 accept-charset 으로 UTF-8을 지정해주면 됩니다.


    1
    <form action="http://localhost/html.php" target="_blank" method="GET" accept-charset="UTF-8">
    cs


    'Programming > HTML5 - CSS3' 카테고리의 다른 글

    HTML5 META 태그  (0) 2017.07.09
    HTML5 UPLOAD  (0) 2017.07.08
    HTML5 테이블 태그 <table>, <td>, <tr>, <thead>, <tbody>, <tfoot>  (0) 2017.07.07
    HTML5 <p>태그 , <br>태그  (0) 2017.07.07
    HTML5 태그와 요소, 속성  (0) 2017.07.07

    댓글

Designed by Tistory.