본문 바로가기
Thymeleaf

10. Thymeleaf 템플릿 - 3

by leo2114 2024. 2. 24.
반응형

자동화된 HTML 폼 작성 (Auto-forms)

자동화된 HTML 폼은 Thymeleaf에서 제공하는 강력한 기능 중 하나입니다. 이번 챕터에서는 자동화된 HTML 폼에 대해 자세히 알아보겠습니다.

1. 자동화된 HTML 폼이란?

자동화된 HTML 폼은 Thymeleaf에서 제공하는 기능으로, 객체의 필드와 관련된 HTML 폼을 자동으로 생성해줍니다. 이를 통해 개발자는 수동으로 HTML 폼을 작성하는 번거로움을 줄일 수 있습니다.

2. 자동화된 HTML 폼의 장점

  • 간편한 사용: 자동으로 HTML 폼을 생성해주기 때문에 개발자는 복잡한 폼을 작성하는 과정을 간편하게 처리할 수 있습니다.
  • 유지보수 용이성: 객체의 필드가 변경되더라도 폼은 자동으로 갱신되므로 유지보수가 용이합니다.
  • 타임리프의 자연스러운 통합: 타임리프의 문법을 활용하여 동적 데이터를 쉽게 폼에 삽입할 수 있습니다.

3. 자동화된 HTML 폼 작성 방법

자동화된 HTML 폼을 생성하기 위해서는 Thymeleaf의 th:object 속성을 사용하여 폼에 바인딩할 객체를 지정해야 합니다. 그 후에는 객체의 필드를 참조하여 폼을 작성할 수 있습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Registration Form</title>
</head>
<body>
    <h2>User Registration Form</h2>
    <form th:object="${user}" th:action="@{/register}" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" th:field="*{username}" /><br/>

        <label for="email">Email:</label>
        <input type="email" id="email" th:field="*{email}" /><br/>

        <label for="password">Password:</label>
        <input type="password" id="password" th:field="*{password}" /><br/>

        <button type="submit">Register</button>
    </form>
</body>
</html>

 

위 예제에서 ${user}는 컨트롤러에서 모델에 추가된 User 객체를 참조합니다. th:field 속성을 사용하여 객체의 필드와 HTML 입력 요소를 바인딩합니다.

4. 코드 예제

다음은 자동화된 HTML 폼을 사용한 간단한 예제입니다.

// UserController.java
@GetMapping("/register")
public String showRegistrationForm(Model model) {
    model.addAttribute("user", new User());
    return "registration-form";
}

@PostMapping("/register")
public String processRegistration(@ModelAttribute("user") User user) {
    // Handle registration logic here
    return "registration-success";
}
// User.java
public class User {
    private String username;
    private String email;
    private String password;

    // Getters and setters
}

 

자동화된 HTML 폼은 폼을 작성하는 과정을 간편화하여 개발자의 생산성을 높여줍니다. 이를 통해 빠르고 효율적으로 사용자 입력을 처리할 수 있습니다.

반응형