카테고리 없음

[JSP] <form> 태그로 요청 입력값 받아오기

jnnjnn 2024. 4. 18. 15:18

<form> 태그란?

사용자로부터 입력을 받고 서버로 전송하기 위해 사용된다

[ 속성(attribute) ]

  • action : 사용자의 요청을 전송할 파일의 경로를 지정합니다. 생략할 경우 현재 페이지에 데이터를 전송한다
  • method : 입력받은 데이터의 전송방식을 결정한다 get 방식과 post 방식이 있다
    • get 방식
      받은 파라미터를 url의 쿼리 문자열에 담아 서버로 전송한다
      데이터가 url에 노출되어 보안에 취약하다
      주로 데이터를 조회하기 위해 사용한다
    • psot 방식
      파라미터를 HTTP 요청 본문에 담아 서버로 전송한다
      URL이 노출되지 않아 보안에 이점이 있다
      많은 양의 데이터를 보낼 수 있다
      로그인 폼 제출, 회원가입 등의 요청에 사용된다

form 내의 <input type=submit>이나 <button> 태그를 통해서 해당 태그 내의 데이터를 한꺼번에 전송할 수 있다

 

입력 방식

<input>

입력값을 받기 위한 태그이다. 타입에 따라 여러 모습으로 변형된다

 

[ 속성 ]

name

 

입력된 파라미터(value)의 이름(key)을 지정하는 데 사용한다

 

type

 

✅ text

type의 기본값으로 텍스트 형식의 데이터를 받는데 사용한다

<input type="text">

 

✅ name

숫자 형식의 데이터를 받는데 사용

<input type="number">

 

✅ date

날짜 형식의 데이터를 받는데 사용

<input type="date">

 

✅ datetime-local

날짜+시간 형식의 데이터를 받는 데 사용

<input type="datetime-local">

 

✅ file

파일 형식의 데이터를 받는데 사용

<input type="file">

 

✅ password

password 형식의 데이터를 받는데 사용

<input type="password">

 

✅ radio

같은 이름을 가진 radio 하나만 선택 가능

<div>
    <input type="radio" name="food">
    바나나
</div>
<div>
    <input type="radio" name="food">
    커피
</div>
<div>
    <input type="radio" name="food">
    피자
</div>

 

✅ checkbox

같은 이름의 checkbox 여러 개 선택 가능

@RequestParam을 배열 형식으로 받아온다

<div>
    <input type="checkbox" name="food">
    Lorem.
</div>
<div>
    <input type="checkbox" name="food">
    Ab?
</div>
<div>
    <input type="checkbox" name="food">
    Dolor!
</div>

value

기본값을 주는 데 사용

<input type="text" value="jordan">

 

readonly

지정된 value값을 변경할 수 없다

<input type="text" value="messi" readonly>

 

maxlength

입력값의 길이를 제한할 수 있다

<input type="text" maxlength="5">

 

min, max

type=number에서 입력되는 값의 최소값과 최대값을 지정할 수 있다

 

<%-- 10부터 20까지 입력 --%>
<input type="number" min="10" max="20">

 

mutiple

여러개를 선택할 수 있다

<input type="file" multiple>

 

placeholder

입력값의 힌트를 줄 수 있다

<input type="text" placeholder="입력값 힌트 주기">

 

<textarea>

여러 줄의 문자열을 받아올 때 사용한다

<textarea></textarea>

 

<select><option>

<select> 태그 내에 <option> 태그 목록을 선택할 수 있다

<select name="" id="">
    <option value="">Lorem.</option>
    <option value="">Inventore.</option>
    <option value="">Maxime!</option>
</select>

 

 

사용예제

<form>으로 아이디와 비밀번호를 입력받아 만약 아이디와 비밀번호가 같으면 로그인되는 화면 출력하기

 

@GetMapping("sub3")
public void sub3() {
    // login form 있는 jsp (view)로 forward
}

@PostMapping("sub4")
public String method4(String id, String password, RedirectAttributes rttr) {
    // 로그인 성공 시
    // 성공 후 보여주는 페이지로 이동
    boolean ok = id.equals(password);

    if (ok) {
        rttr.addAttribute("type", "login");

        return "redirect:/main22/sub5";
    } else {
        // 로그인 실패 시
        // 로그인 form 있는 페이지로 이동

        rttr.addAttribute("type", "fail");
        return "redirect:/main22/sub3";
    }
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%-- 아이디와 비밀번호가 일치하지 않으면 띄우기 --%>
<c:if test="${param.type eq 'fail'}">
    <div style="padding: 20px; background-color: pink">
        아이디와 패스워드를 확인하세요
    </div>
</c:if>
<%-- 아이디와 비밀번호 입력받기 -- %>
<form action="/main22/sub4" method="post">
    <div>
        id
        <input type="text" name="id">
    </div>
    <div>
        pw
        <input type="text" name="password">
    </div>
    <div>
        <input type="submit" value="로그인">
    </div>
</form>
</body>
</html>