HTML 폼 내부 요소들의 name 속성

Q1.

SpringBoot를 기반으로 한 MVC 패턴의 프로젝트를 하나 작성하려고 해. 이때, View로 쓰일 HTML 파일에 들어갈 태그들에 작성해줄 name 속성들은, 백엔드로서 기능할 Java기반의 Spring에서 인식하기 위한 값들인가?

 

 

 

A1.

결론부터 이야기하자면, HTML 폼 요소들에 사용되는 name 속성은 Spring MVC에서 백엔드 단으로 데이터를 바인딩하기 위한 중요한 매개체이다.

 

Spring MVC나 일반적인 서버 사이드 렌더링 기반 웹 프레임워크에서, 클라이언트의 <form> 태그 안에 있는 <input>, <select>, <textarea> 등의 폼 요소에 name 속성이 지정되어 있으면, 폼이 제출될 때 해당 name 속성에 매칭되는 key-value 형태의 파라미터가 서버로 전송된다. 이 때 서버(Spring MVC 컨트롤러)는 이러한 폼 데이터의 name과 값(value)을 기반으로, 컨트롤러 메소드의 파라미터나 Model 객체, 또는 DTO/Command 객체의 필드에 데이터를 매핑(바인딩)하게 된다.

 

즉, 다음과 같은 상황을 생각해볼 수 있다.

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

 

위와 같이 name="username", name="password" 속성이 지정된 경우 폼이 submit되면, Request Parameter로 username과 password라는 이름의 값들이 서버에 전달된다. Spring Controller에서 다음과 같이 매개변수를 받을 수 있다.

@PostMapping("/register")
public String register(@RequestParam String username, 
                       @RequestParam String password) {
    // 여기서 username과 password는 위 HTML 폼의 name과 매칭되어
    // 해당 값들이 주입된다.
    // 이후 서비스 로직을 수행
    return "redirect:/home";
}

 

또는 아래와 같이 DTO/Command 객체를 사용하여 한번에 매핑할 수도 있다. 

public class UserForm {
    private String username;
    private String password;
    // 게터/세터
}

@PostMapping("/register")
public String register(UserForm form) {
    // form.getUsername()과 form.getPassword()에 폼 데이터가 바인딩됨
    return "redirect:/home";
}

 

이 모든 과정은 HTML 폼 요소에 지정된 name 속성 값과 서버 단의 파라미터 혹은 객체 필드 이름을 매칭하는 과정을 통해 이루어진다. 따라서 name 속성은 단순한 문서적 표기가 아니라, 백엔드 컨트롤러가 클라이언트로부터 넘어온 데이터를 식별하고 적절한 곳에 매핑하기 위해 반드시 필요한 약속된 명명 규칙이라 할 수 있다.

 

 

 

Q2.

백엔드로 데이터를 전송하기 위해서, HTML의 name 속성은 존재하는 것인가?

 

 

 

A2.

 

그렇다. HTML 폼에서 데이터를 전송할 때 name 속성은 필수적으로 사용되는 요소라고 할 수 있다.

HTML의 <form> 내에 있는 <input>, <select>, <textarea>와 같은 폼 요소들은 name 속성을 통해 해당 필드의 "이름(key)"을 부여받는다. 폼이 제출되면 브라우저는 각 폼 필드의 name과 해당 필드에 입력된 값을 쌍으로 묶어 서버로 전송한다. 이 때 서버는 전달받은 파라미터를 name을 기반으로 식별하고, 그에 해당하는 값을 읽어들이게 된다.

만약 name 속성이 없다면, 해당 필드에 입력된 값은 서버로 전송되지 않거나, 혹은 전송되더라도 서버 측에서 필드를 특정할 수 없게 된다. 따라서 백엔드에서 폼 데이터를 식별하고 처리하기 위해선 name 속성이 꼭 필요하다.

 

 

폼 요소 -> Form 태그 안에 들어가있는 요소들.