[HTML] Form 정리 (1)

.Form이란?

• 사용자가 정보를 입력, 선택할 때 사용되는 태그. 즉, 서버로 입력한 데이터를 전송 할 때 사용.

• 폼은 웹 페이지의 정보를 다른 페이지로 전송하는 역할.

• 단순히 텍스트의 내용만 보여 주는 페이지에는 필요 없지만 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 요소.

  ..form에서 사용되는 HTML 태그들
      <form>, <input>, <label>, <select>, <textarea>, <fieldset>, <legend> and <button>

  ..form 태그

  <form action="/my-handling-form-page" method="post">
  </form>

  ..form태그의 속성

  • action : 폼 내부에 데이터를 보내는 목적지 URL을 지정한다.
    -- action은 form 내부에 전송(submit)을 했을 때 데이터를 보내는 곳의 URL을 지정하게 된다.

      보통 input 태그의 submit type 으로 설정해서 클릭했을 때 데이터를 서버로 보내게 된다.

  • method : 폼을 서버로 전송하는 http 방식을 지정한다. POST 와 GET 이 있다.
    -- get 방식 :

      ```
        <form method = "get"> & 링크 & URL 직접 & 자바스크립트 등 URL의 끝에 데이터를 첨부해서 전송하는 방식
      ```
    
      --- 문제점
         1. 항상 노출이 된다. (보안에 중요한 데이터는 사용 금지)
         2. URL 최대 256자까지 (오버클로우 : 데이터 잘림)
         3. URL은 인코딩 방식이 base64(한글포함x)
         4. 되도록 영문과 숫자 정도만 전송

    -- post 방식

      - post 방식 : 
    
      ```
      <form method = "post"> 유일
      ```
    
      - 패킷의 본문 안에 데이터를 넣어서 전송하는 방식(FM 제대로 된 방식)
      - 데이터 노출이 없음(보안상 조금 더 안전)
      - 제한 크기 무제한
      - 한글 상관없이 전송
    
      ```
      <form action="action.jsp" id="frm" method="get">
          <div> 아이디 : <br/><input type="text" name="id" value=""></div>
          <div> 비밀번호 : <br/><input type="text" name="id" value=""></div>
          <div> <input type="button" id="btn" value="전송"></div>
      </form>
      ```

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

    • target의 값 두 개는 _self 와 _blank 이 있다. 기본은 _self 로 이벤트가 일어난 그 화면에서 action 에 지정한 스크립트가 열리게 된다. 반대로 _target 은 탭이나 팝업으로 별로의 창에서 열리게 된다.

      <form action="action.jsp" id="frm" method="post" target="_blank">
        <div> 아이디 : <br/><input type="text" name="id" value=""></div>
        <div> 비밀번호 : <br/><input type="text" name="id" value=""></div>
        <div> <input type="button" id="btn" value="전송"></div>
      </form>

   - actocomplete : HTML5에 추가되었으며 양식의 자동완성을 지정한다.
       - 자동완성 기능은 익스플로러나 크롬에서 검색을 위해 단어를 입력했을 때 추천단어를 보여 주는 것.
       - autocomplete 에 설정하는 값은 "on" 과 "off" 두가지.
       - autocomplete = "on" 이지만 보안을 위해 이 기능을 강제적으로 막고 싶을 때 off 로 설정 가능.
       - 예와 같이 form에 설정하면 포함되어 있는 모든 요소는 자동완성 기능을 막게 된다.

           ```
             <form action="action.jsp" id="frm" autocomplete="off">
           ```

       - 특정 요소에만 막고 싶다면 그 요소에만 autocomplete 를 입력해 준다.
           ```
           <input type="button" id="btn" value="전송" autocomplete="off">
           ```

   - accept-charset : 폼 전송에 사용될 문자 인코딩을 지정한다.
       - 폼으로 전송할 때 문자셋을 지정해 줄 수 있다.
       - 브라우저 문자셋과 서버의 문자셋이 틀리면 글자가 깨진다.
       - 기본적으로 웹 페이지 인코딩 정보가 가게 되는데, 서버에서 다른 인코딩이 필요하면 accept-charset 에 값을 세팅하여 보내야 한다.
       - 웹 페이지는 EUC-KR 이고 서버는 UTF-8 이라는 문제가 생긴다면 accept-charset 으로 UTF-8 세팅 후 보내면 된다.

       ```
       <form action="action.jsp" id="frm" method="post" accept-charset="UTF-8">
           <div> 아이디 : <br/><input type="text" name="id" value=""></div>
           <div> 비밀번호 : <br/><input type="text" name="id" value=""></div>
           <div> <input type="button" id="btn" value="전송"></div>
       </form>
       ```

   - enctype : 넘기는 Content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용, type은 "multipart/form-data"로 지정해서 사용한다.
       - 기본적으로 enctype 은 "application/x-www-form-urlencoded"이다.
       - 폼 데이터는 서버로 전송되기 전에 URL Encode 가 된다.
       - 파일을 넘기고 싶다면 타입을 "multipart/form-data" 변경해야 한다.
       - form의 전송방식에서 method는 POST로 지정해 줘야 한다.
       - 예제와 같이 input 박스에 선택한 파일을 넘기기 위해 form 타입을 "multipart/form-data" 지정해 줘야 한다.

       ```
       <form action="action.jsp" method="post" name="frm"
             enctype="multipart/form-data" >
       <input type="file" name="파일링크">
       </form>
       ```