form 데이터 submit 시 어떤 정보가 전달되는가?

게시판 구현하다 알게 된 정보이다.

 

submit 기능을 구현하면 form 안에 있는 모든 정보가 넘어가는 것이 아니라, form 안에 있는 특별한 정보만 전송되게 된다.

 

1. 폼 데이터: 사용자가 입력한 데이터가 포함됩니다. 이는 <input>, <textarea>, <select> 등의 HTML 요소에서 입력된 값을 포함합니다. 각 요소의 name 속성이 서버로 전송될 때의 키가 됩니다.

 

아래는 예시이다.

 

전송되는 내용은 주석으로 표시하였다.( // ★ 전송내용)

 

// form : search-from
    // 검색기능 구현 시(submit 시) form 안에 포함되어 있는 input과 select(name) 값이 전송된다.
// action : /board/free-list.do 로 정보 전달
// method : post 방식
<form id="search-form" action="/board/free-list.do" method="post">
	// ★ 전송내용
    <input type="hidden" name="pageNum" value="${page.cri.pageNum}">
	// ★ 전송내용
    <input type="hidden" name="amount" value="${page.cri.amount}">
    <div class="row">
        <div class="col-3">
        // name : searchCondition (전체, 제목, 내용, 작성자 중 선택)
        		// ★ 전송내용
            <select class="form-select" name="searchCondition">
                <option value="all"
                        <c:if test="${searchMap == null || searchMap.searchCondition == 'all'}">
                            selected
                        </c:if>>전체</option>
                <option value="title"
                        <c:if test="${searchMap.searchCondition == 'title'}">
                            selected
                        </c:if>>제목</option>
                <option value="content"
                        <c:if test="${searchMap.searchCondition == 'content'}">
                            selected
                        </c:if>>내용</option>
                <option value="writer"
                        <c:if test="${searchMap.searchCondition == 'writer'}">
                            selected
                        </c:if>>작성자</option>
            </select>
        </div>
        <div class="col-9">
            <div class="row">
                <div class="col-11">
                        // name : searchKeyword (검색창)
                        	// ★ 전송내용
                    <input type="text" class="form-control w-100" name="searchKeyword" value="${searchMap.searchKeyword}">
                </div>
                <div class="col-1 d-flex align-items-center">
                // search-icon : 돋보기 모양
                    <i class="bi bi-search" id="search-icon"></i>
                        // button : 검색버튼
                    <button type="submit" id="btnSearch">검색</button>
                </div>
            </div>
        </div>