JSP 폼으로 결과 값 여러 개 받기

- hobby_form.jsp, result.jsp

- css 파일 각각 1개씩

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/hobby_form_style.css">
</head>

<body>
    <section>
        <div class="form_wrapper">
            <h1>폼 예제</h1>
            <form action="result.jsp" method="post">
                <div class="namefiled">
                    <label for="username">Username : </label>
                    <input type="text" id="username" name="username" required="required">
                </div>
                
                <ul>
                    <li>
                        <label>취미를 선택하세요. (중복체크 가능)</label>
                    </li>
                    <li>
                        <input type="checkbox" id="hobby1" name="hobbies" value="축구"> 
                        <label for="hobby1">축구</label>
                    </li>
                    <li>
                        <input type="checkbox" id="hobby2" name="hobbies" value="농구"> 
                        <label for="hobby2">농구</label>
                    </li>
                    <li>
                        <input type="checkbox" id="hobby3" name="hobbies" value="독서">
                        <label for="hobby3">독서</label>
                    </li>
                    <li>
                        <input type="checkbox" id="hobby4" name="hobbies" value="코딩"> 
                        <label for="hobby4">코딩</label>
                    </li>
                </ul>
                
                <ul>
                    <li>
                        <label>좋아하는 색을 선택하세요.</label>
                    </li>
                    <li>
                        <input type="radio" id="color1" name="favoriteColor" value="빨강" >
                        <label for="color1">빨강</label>
                    </li>
                    <li>
                        <input type="radio" id="color2" name="favoriteColor" value="파랑">
                        <label for="color2">파랑</label>
                    </li>
                    <li>
                        <input type="radio" id="color3" name="favoriteColor" value="초록">
                        <label for="color3">초록</label>
                    </li>
                </ul>
         
                <button type="submit">제출</button>

            </form>
        </div>
    </section>

</body>

</html>

@charset "utf-8";

*{
    padding: 0;
    margin: 0;
}

ul,ol{
    list-style: none;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    /* body height 전체로 감싸야 align-items : center이 작동한다. */
    height: 100vh;
    background-color: #eee;
}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vh;
    height: 80vh;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.form_wrapper{
    padding-bottom: 20px;
}

h1{
    padding: 15px 0 ;
    text-align: center;
}

.namefiled{
    padding-bottom: 20px;
}

ul{
    padding-bottom:  25px;
}

li{
    padding: 2px 0;
}

button{
    padding: 1px 5px;
    font-weight: bold;
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/result_style.css">

</head>

<body>
	<section>
		<div class="form_wrapper">
			<h1>폼 제출 결과 확인</h1>

			<%
			String username = request.getParameter("username");
			String[] hobbies = request.getParameterValues("hobbies");
			String faColor = request.getParameter("favoriteColor");
			%>

			<form action="" method="post">
				<div class="namefiled">
					<p>
						Username :
						<%=username%></p>
				</div>

				<%
				if (hobbies != null) {
				%>


				<ul>
					<li>
					<p>선택한 취미</p>
						<%
						for (String myHobby : hobbies) {
						%>
						<p>
							
							<%=myHobby %></p> <%
 }
 %>
					</li>
				</ul>
				<%
				} else {
				%>
				<p>선택한 취미가 없습니다.</p>
				<%
				}
				%>

				<%
				if (faColor != null) {
				%>
				<ul>
					<li><label>좋아하는 색상</label></li>
					<li><%=faColor%></li>
				</ul>
				<%
				} else {
				%>
				<p>선택한 색상이 없습니다.</p>
				<%
				}
				%>

				<a href="hobby_form.jsp">돌아가기</a>

			</form>
		</div>
	</section>

</body>

</html>

@charset "utf-8";

*{
    padding: 0;
    margin: 0;
}

ul,ol{
    list-style: none;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    /* body height 전체로 감싸야 align-items : center이 작동한다. */
    height: 100vh;
    background-color: #eee;
}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vh;
    height: 50vh;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.form_wrapper{
    padding-bottom: 20px;
}

h1{
    padding: 20px 0 ;
    text-align: center;
}

.namefiled{
    padding-bottom: 20px;
}

ul{
    padding-bottom:  25px;
}

li{
    padding: 2px 0;
}

a{
    text-decoration: none;
    display: block;
    color:  #a1a1a1;
}

a:hover{
    color: red;
}

실수한 것

처음에 input 태그에 value 값을 주지 않았더니 선택되었다는 on값만 출력되었다.

받아온 값 개발자 도구로 확인하기

for each 구문 복습

for(type 변수명 : iterate){
	body-of-loop
}

// iterate --> 루프 돌릴 객체
// iterate 객체에서 한 개씩 순차적으로 변수명에 대입되어 for문이 수행된다.
// iterate에 사용할 수 있는 자료형은 루프를 돌릴 수 있는 자료형인
// 배열이나 ArrayList 등만 가능하다.
// 변수명의 type(자료형)은 iterate 객체에 포함된 자료형과 일치해야 한다.

'Java > 시나리오 코드' 카테고리의 다른 글

파일전송 (0)	2024.08.01
JSP 세션 무효화 (0)	2024.07.07
JSP 구구단 (0)	2024.07.07
JSP를 이용한 inch 변환기 (0)	2024.07.03
연습 - 로또 게임 (0)	2024.04.19

HJ's 개발 일지

JSP 폼으로 결과 값 여러 개 받기

'Java > 시나리오 코드' 카테고리의 다른 글

티스토리툴바

JSP 폼으로 결과 값 여러 개 받기

'Java > 시나리오 코드' 카테고리의 다른 글

관련글

티스토리툴바