❓왜 HTML 폼 <form>은 PUT, DELETE 요청을 직접 보낼 수 없을까? - HTTP는 지원하지만, HTML은 제한한다?


✅ 1. 기본 개념: HTML <form>의 method 속성

HTML의 <form> 태그는 서버로 데이터를 전송할 때 사용하는 기본 요소입니다.

<form action="/users" method="post">
  <input type="text" name="username">
  <button type="submit">등록</button>
</form>

여기서 method는 전송 방식(HTTP 메서드)을 의미합니다.


📌 2. HTML에서 지원하는 method는 단 2개뿐

HTML 사양(HTML5 기준)에서는 <form> 태그의 method 속성에 다음 2가지만 허용합니다:

지원되는 method 의미
GET 조회 요청
POST 데이터 전송 요청

🔒 PUT, DELETE, PATCH는 명시적으로 허용되지 않음!
즉, 브라우저는 <form method="put"> 같은 걸 이해하지 못함


 

💡 왜 PUT과 DELETE는 <form>에서 지원되지 않을까?

📍 이유 1. HTML 표준의 역사적 제약

HTML은 처음부터 웹 폼을 간단한 데이터 입력용으로 설계했습니다.
초기 웹은 단순한 문서 공유 중심이었기 때문에 GET과 POST만으로 충분했습니다.
PUT, DELETE는 비교적 후대의 RESTful API 설계에서 더 중요하게 다뤄짐


📍 이유 2. 브라우저 구현 간의 호환성

  • 모든 브라우저에서 GET과 POST는 기본 동작으로 구현되어 있음
  • PUT, DELETE는 브라우저에서 직접 폼 요청으로 처리하지 않음
    → HTML 폼과 브라우저가 지원하지 않기 때문

🔄 3. 그렇다면 PUT/DELETE 요청은 어떻게 보낼까?

✅ 방법 1: JavaScript + Fetch / Axios

fetch('/users/1', {
  method: 'DELETE'
});

 

✔ 클라이언트에서 JS 코드로 명시적 요청 가능


✅ 방법 2: _method 파라미터와 서버측 변환 (Spring 방식)

Spring MVC 등에서는 HiddenHttpMethodFilter를 사용하여 POST 요청을 PUT, DELETE로 변환할 수 있습니다.

<form action="/users/1" method="post">
  <input type="hidden" name="_method" value="delete">
  <button type="submit">삭제</button>
</form>
// Spring Boot 설정에서 자동 등록됨
@Bean
public HiddenHttpMethodFilter hiddenHttpMethodFilter() {
    return new HiddenHttpMethodFilter();
}

✔ 서버가 이 hidden 필드를 보고 DELETE로 내부 처리함
✔ HTML 폼의 제한을 우회하는 대표적인 전략


🔧 4. Spring MVC 예시

@DeleteMapping("/users/{id}")
public String deleteUser(@PathVariable Long id) {
    userService.delete(id);
    return "redirect:/users";
}

위처럼 서버는 DELETE 매핑을 하고,
HTML은 POST 방식으로 보내되 hidden 필드로 _method=delete를 전송합니다.


📌 요약 정리

항목 설명
HTML <form>이 지원하는 method GET, POST 만 가능
PUT, DELETE가 안 되는 이유 HTML 표준 제한 + 브라우저 미지원
우회 방법 1 JavaScript로 요청 (fetch, axios 등)
우회 방법 2 _method 파라미터 + 서버 필터 사용 (Spring 등)
실제 권장 방식 REST API는 JS 요청, 폼 기반 앱은 _method 전략 사용

✅ 마무리

HTML 폼은 간단한 입력 처리를 위해 만들어졌기 때문에
HTTP 전체 메서드를 직접 지원하지 않습니다.
하지만, RESTful 설계를 지키기 위해
Spring과 같은 프레임워크는 이를 보완할 수단을 제공합니다.

 

실무에서는 HTML 폼으로는 POST까지만,
그 외 HTTP 메서드는 JS 기반 요청이나 서버 필터 우회 전략을 사용하세요. 💡

'백엔드' 카테고리의 다른 글

객체지향 프로그래밍(OOP)  (0) 2024.12.03

+ Recent posts