[spring blog]3. 로그인하기

Mar 15, 2024
[spring blog]3. 로그인하기

form 태그

<form> 태그는 HTML에서 사용되는 중요한 요소 중 하나입니다. 이 태그는 사용자로부터 정보를 수집하는 데 사용되며, 다양한 입력 요소와 버튼을 포함할 수 있습니다. 주로 웹 양식(form)을 생성하는 데에 쓰입니다.
간단한 <form>의 구조는 다음과 같습니다:
<form action="서버로 전송할 경로 또는 파일" method="전송 방식(GET 또는 POST)"> <!-- 입력 요소들과 버튼들이 여기에 들어갑니다 --> </form>
여기서 중요한 속성은 다음과 같습니다:
  • action: 양식(form)이 서버로 전송될 때 데이터가 전송될 URL 또는 파일 경로를 지정합니다.
  • method: 데이터를 서버로 전송하는 방식을 지정합니다. 주로 사용되는 값은 "GET"과 "POST"입니다. "GET"은 주로 데이터를 URL에 포함시켜 전송하며, "POST"는 요청 본문에 데이터를 담아 전송합니다.
<form> 태그 내부에는 다양한 입력 요소들이 들어갈 수 있습니다. 몇 가지 주요한 입력 요소는 다음과 같습니다:
  • <input>: 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼 등 다양한 형태의 입력을 생성하는 데 사용됩니다.
  • <textarea>: 여러 줄의 텍스트를 입력받을 때 사용됩니다.
  • <select>: 드롭다운 목록을 생성하는데 사용되며, <option> 태그를 사용하여 각 항목을 정의합니다.
  • <button>: 버튼을 생성하는데 사용됩니다.
예를 들어, 간단한 로그인 양식을 만들기 위한 HTML 코드는 다음과 같을 수 있습니다:
<form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <button type="submit">Login</button> </form>
이것은 사용자에게 아이디와 비밀번호를 입력받아 서버로 전송하는 기본적인 로그인 양식입니다.
input 태그
<input> 태그는 HTML에서 다양한 형태의 입력 요소를 생성하는 데 사용됩니다. 이 태그는 여러 속성을 사용하여 다양한 유형의 입력을 처리할 수 있습니다.
간단한 <input> 태그의 예는 다음과 같습니다:
<input type="text" name="username" id="username" placeholder="Enter your username">
여기서 사용된 주요 속성은 다음과 같습니다:
  • type: 입력 필드의 유형을 정의합니다. 일반적인 유형에는 "text", "password", "checkbox", "radio" 등이 있습니다.
  • name: 입력 필드의 이름을 지정합니다. 이 이름은 서버로 데이터를 전송할 때 사용됩니다.
  • id: 입력 필드의 고유한 식별자(ID)를 지정합니다. CSS 스타일링이나 JavaScript에서 특정 입력 필드를 참조할 때 사용됩니다.
  • placeholder: 입력 필드에 사용자에게 힌트를 제공하는 임시 텍스트를 지정합니다.
몇 가지 다양한 type 속성을 사용한 <input> 태그의 예를 살펴보겠습니다:
  1. 텍스트 입력 필드:
    1. <input type="text" name="username" id="username" placeholder="Enter your username">
  1. 비밀번호 입력 필드:
    1. <input type="password" name="password" id="password" placeholder="Enter your password">
  1. 체크박스:
    1. <input type="checkbox" name="subscribe" id="subscribe" checked> <label for="subscribe">Subscribe to newsletter</label>
  1. 라디오 버튼:
    1. <input type="radio" name="gender" id="male" value="male"> <label for="male">Male</label> <input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label>
  1. 숨겨진 입력 필드(hidden):
    1. <input type="hidden" name="user_id" value="123">
이 외에도 다양한 type 속성을 사용하여 날짜, 이메일, 숫자 등 다양한 형태의 입력 필드를 만들 수 있습니다. <input> 태그는 사용자와 상호작용하는 다양한 웹 양식을 만들 때 핵심적인 역할을 합니다.
 

컨트롤러에서 클라이언트 정보 받기(방법3사용)

방법 1
UserController
@PostMapping("/login") public String login(String username, String password){ return null; }
 
방법2
UserController
@PostMapping("/login") public String login(HttpServletRequest request){ String username = request.getParameter("username") String password = request.getParameter("password") return null; }
 
방법3
클라이언트가 서버측으로 전송하는 데이터
UserController
@Data public Static class LoginDTO { String username; String password; }
@PostMapping("/login") public String login(UserRequest.LoginDTO requestDTO){ return null;
 
값 받아보기
notion image
 
form태그 input에 value값이 없을 때
notion image
form태그 name값이 없을 때
notion image
Share article

Essential IT