[Jsp Study]값 받아오기

Noah97·2022년 5월 18일
CSShtmljsp
0

JspStudy

목록 보기
7/18
post-thumbnail

First.html 코드

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>Form Design</title>
<style>
body {
	background-color: black;
}

.container {
	margin: 0 auto;
	width: 250px;
	height: 320px;
	background-color: #262F40;
	border-radius: 1%;
}

.box1 {
	position: relative;
	top: 20px;
	left: 10px;
}

.box1 label {
	color: #CED4E1;
	font-weight: bold;
	font-size: 1.1em;
}

.box1 input {
	position: relative;
	top: 5px;
	width: 225px;
	height: 30px;
	background-color: #4C5564;
	border: none;
	outline: none;
	border-radius: 5px;
	color: #9DA7B3;
	font-weight: bold;
	font-size: 1.1em;
}

.box2 {
	position: relative;
	top: 120px;
	left: 10px;
}

.box2 label {
	color: #CED4E1;
	font-weight: bold;
	font-size: 1.1em;
}

.box2 input {
	position: relative;
	top: 5px;
	width: 225px;
	height: 30px;
	background-color: #4C5564;
	border: none;
	outline: none;
	border-radius: 5px;
	color: #9DA7B3;
	font-weight: bold;
	font-size: 1.1em;
}

.box3 {
	position: relative;
	top: 135px;
	left: 10px;
}

.box3 label {
	color: #CED4E1;
	font-size: 1.3em;
}

.box3 select {
	background-color: #4C5564;
	border: none;
	outline: none;
	color: #9DA7B3;
	width: 50px;
	height: 30px;
	border-radius: 5px;
}
</style>
</head>

<body>
	<form action="Second.jsp" method="post">
		<div class="container">
			<div class="box1">
				<label for="name">Full Name</label><br> <input type="text"
					name="name" id="name" placeholder="e.g.John Doe"><br>
			</div>
			<div class="box2">
				<label for="number">Phone</label><br> <input type="text"
					name="number" id="number" placeholder="(+1)598 ____ ____"><br>
			</div>
			<div class="box3">
				<label for="csc">csc</label><br> <select name="combobox">
					<option value="korean">+82</option>
					<option value="usa">+1</option>
					<option value="china">+86</option>
				</select> <input type="submit" value="전송">

			</div>
		</div>
	</form>
</body>

</html>

Second.jsp 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="join" class="join.JoinName" scope="page"></jsp:useBean>
<jsp:setProperty name = "join" property = "*" />
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      background-color: black;
    }

    .container {
      margin: 0 auto;
      width: 250px;
      height: 360px;
      background-color: #262F40;
      border-radius: 1%;
    }
    p {
      position: relative;
      left: 10px;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      top:5px;
    }
    .box1 {
      position: relative;  
      left: 10px;
    }

    .box1 label {
      color: #CED4E1;
      font-weight: bold;
      font-size: 1.1em;
    }

    .box1 input {
      position: relative;
      top:5px;
      width: 225px;
      height: 30px;
      background-color: #4C5564;
      border: none;
      outline: none;
      border-radius: 5px;
      color: #9DA7B3;
      font-weight: bold;
      font-size: 1.1em;
    }
    .box2 {
      position: relative; 
      left: 10px;
      top:10px;
    }
    .box2 label {
      color: #CED4E1;
      font-weight: bold;
      font-size: 1.1em;
    }
    .btn { 
      position: relative;
      right: 5px;
      outline: none;
      border: none;
      border-radius: 5px;
      width: 35px;
      height: 20px;
    } 
    .btn:active {
      border: 2px solid white;
    }
    .box3 {
      position: relative;
      top:10px;
      left: 10px;
    }

    .box3 label {
      color: #CED4E1;
      font-weight: bold;
      font-size: 1.1em;
    }

    .box3 input {
      position: relative;
      top:5px;
      width: 225px;
      height: 30px;
      background-color: #4C5564;
      border: none;
      outline: none;
      border-radius: 5px;
      color: #9DA7B3;
      font-weight: bold;
      font-size: 1.0em;
    }
    .box4 {
      position: relative;
      top:15px;
      left: 10px;
    }

    .box4 label {
      color: #CED4E1;
      font-weight: bold;
      font-size: 1.1em;
    }

    .box4 input {
      position: relative;
      top:5px;
      width: 225px;
      height: 30px;
      background-color: #4C5564;
      border: none;
      outline: none;
      border-radius: 5px;
      color: #9DA7B3;
      font-weight: bold;
      font-size: 1.1em;
    }
  </style>
</head>

<body>
  <div class="container">
    <p>Personal</p>
    <div class="box1">
      <label for="name">Full Name</label><br>
      <input type="text" name="name" id="name" placeholder="e.g.John Doe" value = "<%=join.getName() %>"><br>
    </div>
    <div class="box2">
      <label for="color">What is your favorite color?</label><br>
      <div class="btnbox">
        <button class="btn" style="background-color: #31C48D;"></button>
        <button class="btn" style="background-color: #FBCA13;"></button>
        <button class="btn" style="background-color: #3E84F7;"></button>
        <button class="btn" style="background-color: #E74694;"></button>
        <button class="btn" style="background-color: #8E60F7;"></button>
        <button class="btn" style="background-color: #F05252;"></button>
      </div>
    </div>
    <p>Account</p>
    <div class="box3">
      <label for="email">Email</label><br>
      <input type="text" name="email" id="email" placeholder="e.g.johndoe@gmail.com"><br>
    </div>
    <div class="box4">
      <label for="pass">Password</label><br>
      <input type="password" name="password" id="password"  placeholder="************"><br>
    </div>
  </div>
</body>

</html>

자바빈 클래스 작성 부분

package join;

public class JoinName {
	private String name;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

✍️ 결과 화면


profile
Noah97
안녕하세요 반갑습니다😊
이전 포스트

[JSP Study]액션 태그

다음 포스트

[JSP Study] 자바빈(JavaBean)

0개의 댓글