[HTML] form 태그 외부에서 button submit으로 form 제출하기

문제 상황

템플릿 적용 때문에 버튼을 form 내부에 넣으면 원하는 레이아웃이 나오지 않아서 버튼을 외부로 빼야했다.

해결 방법

• form 태그에는 id 속성 부여
  <form id=”updateForm”>
• submit 버튼에는 form 속성 부여
  <button type="submit" form="updateForm">Submit</button>

사용 예시

<form id="updateForm" th:action="@{/update}" method="post" th:object="${board}">
    <input type="hidden" id="id" th:field="*{id}">
    <input type="hidden" id="createdAt" th:field="*{createdAt}">

    <div class="form-floating">
        <input type="text" class="form-control" id="name" th:field="*{name}" readonly>
        <label for="name">Name</label>
    </div>

    <div class="form-floating">
        <input type="text" class="form-control" id="title" th:field="*{title}" required>
        <label for="title">Title</label>
        <div class="form-text" th:if="${#fields.hasErrors('title')}" th:errors="*{title}"></div>
    </div>

    <div class="form-floating">
        <textarea class="form-control" id="content" th:field="*{content}" style="height: 12rem" required></textarea>
        <label for="content">Content</label>
        <div class="form-text" th:if="${#fields.hasErrors('content')}" th:errors="*{content}"></div>
    </div>

    <div class="form-floating">
        <input type="password" class="form-control" id="password" th:field="*{password}" required>
        <label for="password">Password for verification</label>
        <div class="form-text" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
    </div>
    <br />
</form>
<!-- Submit Button-->
<div class="button-group">
    <button class="btn btn-primary text-uppercase" id="submitButton" type="submit" form="updateForm">Submit</button>
    <a th:href="@{/list}" class="btn btn-success text-uppercase" id="listButton">List</a>
</div>