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>
태그의 예를 살펴보겠습니다:- 텍스트 입력 필드:
<input type="text" name="username" id="username" placeholder="Enter your username">
- 비밀번호 입력 필드:
<input type="password" name="password" id="password" placeholder="Enter your password">
- 체크박스:
<input type="checkbox" name="subscribe" id="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>
- 라디오 버튼:
<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>
- 숨겨진 입력 필드(hidden):
<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;
값 받아보기

form태그 input에 value값이 없을 때

form태그 name값이 없을 때

Share article