JS | new FormData() 와 <form> 의 차이?

💡 FormData와 <form>은 웹 프로그래밍에서 데이터를 전송하는 두 가지 다른 방법입니다.

<form>

<form action="/submit" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="Submit" />
</form>

• <form>은 HTML에서 사용되는 요소로, 웹 페이지에서 사용자로부터 데이터를 수집하고 제출하는 데 사용됩니다.
• <form> 요소는 HTML 폼을 생성하고, 사용자가 입력 필드(텍스트 상자, 라디오 버튼, 체크 박스 등)에 데이터를 입력하고 "제출" 버튼을 누르면 폼 데이터가 서버로 전송됩니다.
• 서버로 데이터를 전송할 때는 폼 요소 내에서 정의된 action 속성의 URL로 데이터가 전송되며, method 속성에 따라 HTTP GET 또는 POST 요청을 사용할 수 있습니다.

FormData 객체

// FormData 객체 생성
const formData = new FormData();

// 값 추가
formData.append('username', 'example');
formData.append('password', 'password123');

// 서버로 데이터 전송 (예: Fetch API 사용)
fetch('/submit', {
    method: 'POST',
    body: formData
});

• FormData는 JavaScript에서 사용되는 객체로, 웹 페이지에서 JavaScript를 사용하여 동적으로 폼 데이터를 수집하고 서버로 전송하는 데 사용됩니다.
• FormData 객체를 사용하면 <form> 요소의 각 입력 필드에 대한 값을 수동으로 수집하거나 수정할 수 있습니다.
• JavaScript를 사용하여 폼 데이터를 수집하고 XMLHttpRequest 또는 Fetch API와 함께 사용하여 서버로 데이터를 전송할 수 있습니다.

주요 차이점

• <form> 요소는 HTML에서 정적으로 정의되고 페이지 내에서 사용자 상호작용을 처리합니다. 반면 FormData는 JavaScript로 동적으로 생성되고 수정됩니다.
• <form> 요소는 폼을 정의하고 사용자 입력을 처리하는 데 사용됩니다. FormData는 데이터를 프로그래밍 방식으로 조작하고 서버로 전송하는 데 사용됩니다.
• <form> 요소는 기본적으로 페이지를 다시로드하지만 FormData를 사용하면 페이지를 다시로드하지 않고도 비동기적으로 데이터를 서버로 전송할 수 있습니다.