[목차]
1. JSP 입력 폼(form) 구성 소개
2. 글 입력 및 전송 영역 : <form> 태그
2-1. <form> 태그란?
2-2. 기본 코드 형식
3. <label> 태그
3-1. <label> 태그란?
3-2. 코드 예시
4. <input> 태그
4-1. <input> 태그란?
4-2. 코드 예시
5. <textarea> 태그
5-1. <textarea> 태그란?
5-2. 코드 예시
6. 최종 코드 정리
1. JSP 입력 폼(form) 소개
지난 글에서는 게시판의 전체 화면을 구역별로 나누기 위해 <div> 태그를 활용하는 방법을 살펴보았습니다.
<div> 태그가 게시판 화면의 틀을 만들어 주는 역할을 한다면,
이번 글에서 다룰 입력 폼(form)은 그 틀 안에 실제 데이터를 입력하고 전송하는 기능을 담당합니다.
예를 들어, 게시판에 글을 작성할 때 필요한 요소들을 떠올려봅시다.
- 글 제목을 입력하는 칸
- 작성자를 입력하는 칸
- 글 내용을 적는 칸
- 작성한 글을 등록하는 버튼
이 외에도 다양한 입력 요소들이 필요할 수 있습니다.
하지만 단순히 화면에 입력 칸과 버튼이 보이기만 해서는 충분하지 않습니다.
사용자가 작성한 값이 실제로 서버에 전달되고 데이터베이스에 저장되어야만 게시판 목록에 새로운 글이 표시될 수 있습니다.
따라서 게시판 작성 화면을 구현할 때는 입력값을 서버로 전송할 수 있는 구조가 반드시 필요합니다.
이 역할을 하는 것이 바로 <form> 태그입니다.
이렇게 값을 서버로 넘겨서 데이터베이스에 저장하기 위해 사용하는 것이 바로 <form> 태그입니다.
2. 글 입력 및 전송 영역 : <form> 태그
2-1. <form> 태그란?
<form> 태그는 사용자가 입력한 값을 서버로 전송하기 위한 영역을 정의할 때 사용합니다.
따라서 게시판 작성 화면에서 서버로 값을 전송해야 하는 제목, 작성자, 글 내용 등의 입력 요소들은 반드시 <form> 태그 안에 포함되어야 합니다.
<form> 태그에는 일반적으로 다음과 같은 속성이 사용됩니다.
1. action
- 입력된 데이터를 전송할 서버 경로 (URL)
2. method
- 데이터 전송 방식 (GET / POST)
3. name
- 폼의 이름 (자바스크립트 혹은 다른 코드에서 접근할 때 필요)
특히 게시판 작성 기능처럼 새로운 데이터를 데이터베이스에 저장해야 하는 경우에는 보안상 POST 방식을 사용하는 것이 일반적입니다.
2-2. 코드 예시
아래는 <form> 태그의 기본 구조 예시입니다.
<form action="요청경로" method="post">
<!-- 이 안에 label, input, textarea 등의 입력 요소가 들어갑니다 -->
</form>
이제 이 <form> 안에 들어갈 각각의 태그들을 하나씩 살펴보겠습니다.
3. <label> 태그
3-1. <label> 태그란?
<label> 태그는 입력 칸에 이름을 붙이는 역할을 합니다.
예를 들어, 작성자 이름을 입력하는 칸이 있다면 그 앞에는 "작성자"라는 안내 문구가 있어야 사용자가 무엇을 입력해야 할지 알 수 있습니다.
단순히 글자를 표시하는 것뿐만 아니라, for 속성을 통해 특정 입력 요소와 연결할 수 있다는 점이 중요합니다.
💡 for 속성이란?
- <label> 태그에서 사용되는 속성
- 특정 입력 요소와 연결하기 위한 역할
- for="아이디값" 으로 지정하면, 동일한 id를 가진 입력 요소와 짝을 이룰 수 있음
3-2.코드 예시M
<label for="userNm">작성자</label>
<input type="text" name="userNm" id="userNm" required>
💡 <label for="userNm">작성자</label>
- "작성자" 라는 안내 문구를 화면에 표시함
- for="userNm" 속성은 동일한 id를 가진 <input> 태그와 연결됨
- 따라서 사용자가 "작성자" 글자를 클릭해도 자동으로 입력 칸이 선택됨
위 코드를 실행한 화면은 다음과 같습니다.
<input> 태그를 지우면 좌측의 "작성자"라는 문구만 남습니다.
4. <input> 태그
4-1. <input> 태그란?
<input> 태그는 사용자로부터 실제 데이터를 입력받는 가장 기본적인 태그입니다.
텍스트, 라디오 박스, 셀렉트 박스 등 다양한 형태로 확장할 수 있으며,
종료 태그 없이 한 줄로 작성하는 것이 특징입니다.
4-2. 코드 예시
<input type="text" name="userNm" id="userNm" required>
1. type = "text"
- 일반 텍스트 입력 칸을 만듦
2. name = "title"
- 입력된 데이터가 서버로 전송될 때, name 속성이 데이터의 이름이 됨
3. id="title"
- 해당 입력 칸을 식별하기 위한 고유 이름 (label의 for와 연결할 때 필요)
3. required
- 사용자가 필수로 입력해야하는 요소임을 의미함
5. <textarea> 태그
5-1. <textarea> 태그란?
<textarea> 태그는 여러 줄의 텍스트를 입력할 수 있는 입력 영역을 만들어줍니다.
많은 내용을 입력할 때 주로 사용되며,
<input type="text">와 달리 줄바꿈이 가능하다는 점이 특징입니다.
즉, 한 줄짜리 입력 칸이 필요한 경우에는 <input>을,
긴 글이나 여러 줄을 입력해야 하는 경우에는 <textarea>를 사용합니다.
5-2. 코드 예시
<textarea name="content" id="content" rows="10" required></textarea>
1. name="content"
- 서버로 전송될 데이터의 이름
2. id="content"
- label의 for 속성과 연결할 때 사용
3. rows="10"
- 기본으로 보여줄 줄(row)의 개수를 지정
4. required
- 필수 입력 항목으로 지정
💡 <textarea>는 <input>과 달리 여는 태그와 닫는 태그가 모두 필요합니다.
그 사이에 글자가 들어가면 기본 값으로 표시됩니다.
예)
<div class="board_group">
<label for="content">내용</label>
<textarea name="content" id="content" rows="30" required>기본 내용</textarea>
</div>
위 내용을 실행하면, 입력 칸 안에 "기본 내용"이 미리 들어간 상태로 표시됩니다.
💡 우측 하단에 노란색으로 칠해진 부분을 드래그하면 입력 칸의 크기를 자유롭게 바꿀 수 있습니다.
6. 최종 코드 정리
지금까진 배운 내용들을 모두 합쳐 게시판 글쓰기 화면의 최종 코드인 write.jsp의 코드를 보면 다음과 같습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>글쓰기</title>
</head>
<body>
<div class="container">
<h2 style="text-align: center;">글쓰기</h2>
<form action="${pageContext.request.contextPath}/visit/write" method="post">
<div class="board_group">
<label for="userNm">작성자</label>
<input type="text" name="userNm" id="userNm" required>
</div>
<div class="board_group">
<label for="userPw">비밀번호</label>
<input type="text" name="userPw" id="userPw" required>
</div>
<div class="board_group">
<label for="title">제목</label>
<input type="text" name="title" id="title" required>
</div>
<div class="board_group">
<label for="content">내용</label>
<textarea name="content" id="content" rows="30" required></textarea>
</div>
<div class="board_actions" style="margin-top: 20px;">
<button type="submit" class="btn btn-submit">등록</button>
<a class="btn btn-cancel" href="${pageContext.request.contextPath}/visit/list">취소</a>
</div>
</form>
</div>
</body>
</html>
이번 글에서는 게시판 글쓰기 화면에서 폼 태그와 입력 요소들을 살펴보았습니다.
여기까지 수고 많으셨습니다.
감사합니다.
📌 참고
https://silverji.tistory.com/265
[JAVA]14. 게시판 작성 화면 구현 : 영역 나누기(div)
[ 목차 ]1. 글쓰기 화면 (write.jsp) 1-1. 글쓰기 화면의 역할 1-2. 글쓰기 화면에서 작성할 내용2. 화면 영역 나누기 : 태그 2-1. 태그란? 2-2. 코드 예시 2-3. 적용된 화면3. 마무리 1. 글쓰기 화면이전 글에
silverji.tistory.com
'개발 실습 > CRUD 게시판 만들기' 카테고리의 다른 글
| 17. 게시판 백엔드 기초 : BoardVo.java로 데이터 객체 이해하기 (12) | 2025.10.25 |
|---|---|
| 16. 게시판 상세보기 화면 구현 : 버튼, 삭제, 필수입력(required), 강조(strong) 활용 (8) | 2025.10.18 |
| [JAVA]14. 게시판 작성 화면 구현 : 영역 나누기(div) (20) | 2025.08.24 |
| [JAVA]13. 게시판 작성 화면 구현 : 테이블 구조 수정 (34) | 2025.08.16 |
| [JAVA]12. 게시판 목록 화면 구현 : 테이블과 forEach를 활용한 게시글 출력 (22) | 2025.08.10 |
