Form 태그

Form 태그

: 사용자 입력을 수집하고 서버로 전송하는 데 사용

속성 :
    - action : 데이터가 전달될 주소값 지정
        ex)결과.html

    - method : 폼 데이터 전송 방식 지정
        1. get : 작성한 내용을 URL에 전송, 표시
            1) 보안에 취약함. 길이 제한이 있음(2048자)
            2) 검색할 때 많이 사용됨

        2. post : 본문을 통해 데이터를 전송. URL에 표시하지않고 전송
            1) get 보다 안전
            2) 데이터 길이 제한 x
            3) 주로 jQuery, Ajax에서 사용
            4) 회원가입, 아이디/비밀번호 찾기 등 로그인 관련에 사용

    - enctype : 폼 데이터의 인코딩 방식을 지정
        파일 업로드를 진행할 때 주로 사용
        multipart/form-data : 파일 업로드 시 사용

    - target : 폼 데이터가 제출될 때의 응답을 표시할 창이나 프레임을 지정
        target"_self" (현재 창에서 이동하기)
        target"_blank" (새 창에서 이동하기)

    - accept-charset : UTF-8 url 주소값 한글 깨짐 방지를 위해 문자 인코딩 사용

    - autocomplete : 자동 완성기능 설정
        기본값 = on, 사용 중지 = off

 

Form 안에 작성된 input, textarea 태그

form 안에 작성된 input과 textarea는 작성된 내용이 어느 부분에 해당하는지 식별할 때 name 속성을 사용해서 전달

 

 

의도한 값이 아닐 때 이동이나 실행 방지

preventDefault() : 이벤트 기본 동작을 방지하기 위해 사용
    html 태그의 기본 동작을 중지시켜 개발자가 원하는 동작을 구현할 수 있도록 유도

form에서는 submit 이벤트가 발생하면 폼 데이터를 서버로 전송하고 페이지를 새로고침함
    -> 이 기능을 막아버림

 

URL Search Params

" new URLSearchParams(window.location.search); "  

-  URL 주소에 작성된 곳에서 사용자가 입력한 데이터를 가져와서 화면에 표시할 수 있음
-  url이란, https://와 같은 주소적 의미
-  window.location.search = 현재 html의 url을 가리킴.
    -> url에서 "?" 글자 부터 시작해서 끝까지 작성된 부분을 전달

    ex) url = https://www.khT.com/?이름=홍길동
    window.location.search는 "?이름=홍길동" 을 반환

    ex) url = https://www.khT.com/?이름=홍길동&나이=40
    window.location.search는 "?이름=홍길동&나이=40" 을 반환

    -> new URLSearchParams(?이름=홍길동&나이=40);
    -> new 안에 들어간 이름과 나이를 선택해서 가져오는 것.
    -> get을 이용해서 가져옴.