form data 전송

프론트에서 DB에 값을 저장하려 할 때 POST 방식으로 전송을 하게 된다.
form으로 전송하는 경우,
file이 포함되지 않았다면,
enctype이 application/x-www-form-urlencoded
file이 포함되었다면,
multipart/form-data로 지정 해줘야 한다.

1. form

1-1. name

• form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송

1-2. action

• form이 전송되는 서버 url또는 html 링크

1-3. method

• 전송 방법 설정, GET or POST 등

<form action="./result.html" name="loginForm" method="get">
    <p>id: <input type="text" name="id" /></p>
    <p>password: <input type="password" name="password" /></p>
    <input type="submit" value="log in" />
</form>

// /result.html?id=asdf&password=1234

get방식이나 post방식이나 보안솔루션을 마련하지 않으면 보안에 취약한 것은 똑같음

1-4. autocomplete

• 자동 완성
• on 으로 설정하면 form 전체에 자동 완성 허용

1-5. enctype : 인코딩 유형

• 브라우저에서 서버에 데이터를 다시 게시 하는데 사용하는 인코딩 유형

1-5-1. application/x-www-form-urlencoded

• 양식 데이터는 이름/값 쌍으로 인코딩됩니다. 표준 인코딩 형식입니다.(default)

1-5-2. multipart/form-data

• 양식 데이터는 페이지의 각 컨트롤에 대 한 별도의 파트를 포함 하는 메시지로 인코딩됩니다.

1-5-3. text/plain

• 양식 데이터는 컨트롤이 나 서식 지정 문자가 없는 일반 텍스트로 인코딩됩니다.

2. input

2-1. type:file

• multiple 속성을 추가해야 다중 선택이 가능해짐

참고 문헌

• 파일 업로드, form 방식
• HtmlForm.Enctype 속성
• HTML form 정리
• multipart-form-data-upload
• form GET방식으로 전송
• MDN sending and retrieving form data
• input 파일 다중 선택
• node.js FormData 객체 전송

나중에 볼 문서들

• MDN input file