form

form

html의 form태그는 입력받은 데이터를 서버로 전송할 때 사용하는 양식이다

form태그의 내부 속성에는 action과 method가 있다

• action

action은 데이터를 보내줄 장소를 지정해주는 곳이라고 생각하면 쉽다

    <form action="https://www.naver.com">
        <button>button</button>
    </form>

여기서 button은 눌렀을 때 받은 데이터를 전송하는 실행 장치라고 생각하면된다

form을 submit했을 때 action에 적힌 주소로 이동하는 것을 볼 수 있다

action을 생략하면 현재 페이지에 데이터를 전송한다

• method

  method는 입력받은 데이터를 전송하는 방식을 설정하는 속성이다

  입력 값은 get과 post가 있다

  1. get

         get은 받은 파라미터를 url에 담아서 그대로 전송시킨다

         url에 데이터를 담아서 전송시키기 때문에 용량에 제한이 있으며 딱히 전송하는 데이터가 없기 때문에 body가 비어있다

         주로 데이터를 조회하기 위해 사용한다

  2. post

         post는 받은 파라미터를 url에 노출하지 않고 body에 담아서 전송한다

         그렇기 때문에 데이터 용량에 제한이 없고 최소한의 보안은 유지되어있다

         주로 서버의 데이터를 수정하거나 추가할 때 사용한다

get방식을 사용한 네이버 백과사전

주소창에 보이는 ?까지가 url의 끝, 그 뒤는 쿼리스트링이라고 불리는 페이지의 정보가 담겨있는 데이터 값이다

input

input은 사용자의 데이터를 입력받는 공간이다

label

label은 input태그의 속성 값은 아니지만 항상 같이 다니는 태그이다

input의 공간을 설명하는 표지?라고 생각하면 쉽다

사용방법을 보자

    <label for="username">name</label>
    <input type="text" id="username">

label의 for는 누구의 표지인지를 나타내는데 input의 id와 값이 같으면 연동된다

이렇게 연동된 label태그의 name을 클릭하면 input 공간에 입력할 수 있게 파란 불이 들어온다

연동되지 않았다면 클릭해도 아무일도 일어나지 않는다

type

type 속성은 input의 설정값인데

예시로 보는게 이해가 쉽다

    <label for="username"></label>
    <input type="text" id="username">

    <label for="password"></label>
    <input type="password" id="password">

placeholder

    <div class="username">
        <label for="username">name</label>
        <input type="text" id="username" placeholder="Enter name">
    </div>
    <div class="password">
        <label for="password">password</label>
        <input type="password" id="password" placeholder="Enter password">
    </div>

보는 것 처럼 비어있는 input박스에 쓰면 지워지는 내용을 넣는 것

name

name은 입력받은 데이터의 key값을 설정하는 속성이다

그 name의 input으로 입력받은 당연히 키의 value가 된다

       <input type="text" id="range" name="range">
       <input type="text" id="query" name="query">

말도 안되는 날조 예시지만 이런 input박스 두개에 'all'과 '기'를 입력했다면 제일 첫 그림에서 본

위에서 본 get방식의 url

이런 url가 나올 것이다

button

form 태그 안에서 button태그로 버튼을 만들어서 누르면 그 값을 action의 주소로 보낸다

<form>
    <div class="username">
        <label for="username">name</label>
        <input type="text" id="username" name="username" placeholder="Enter name">
    </div>
    <div class="password">
        <label for="password">password</label>
        <input type="password" id="password" name="password" placeholder="Enter password">
    </div>
    <button>button</button>
</form>

아이디에 1111

비밀번호에 22222를 써서 버튼을 누르면

form에 action값을 주지않았기 때문에 default값인 get방식으로 데이터가 넘어가서 url에 내가 입력한 데이터가 고스란히 보이게된다

이로써 보안이 어느정도 필요한 페이지나 데이터값은 get이 아닌 post방식을 이용해야한다