2021.06.26
43번째 포스팅
입사 110일차.
6일차에 만든 로직은 SELECT를 이용해서 DB에 저장되어 있는 특정 데이터를 가져와서 View에 표시하는 내용이었다. 오늘은 form태그, input태그를 이용하여 DB에 원하는 데이터를 INSERT 하는 방법을 알아보려고 한다.
아래에 작성하는 내용들은 6일차까지 똑같이 작성했다는 전제가 깔려있다.
1. <input> 태그
① <input type="종류" id="" name="" placeholder="" value=""/>
② 각각의 속성을 채워주면 아래와 같이 표시되는 것을 확인할 수 있다.
|
1
|
<input type="text" id="inputID" name="inputName" placeholder="여기에 입력해주세요" maxlength="5" required />
|
cs |
- type="text" : 입력창으로 화면에 표시
- id = "" : id를 부여 ( 한가지에만 기능을 줄때, PK처럼 사용 )
- name = "" : 파라미터명. 스크립트의 대상으로 지정할때도 사용
- placeholder = "" : input창에 아무것도 입력되지 않았을 때, 표시되는 문자열
- maxlength = "" : 최대로 입력할 수 있는 문자열의 갯수
- required : 빈칸이면 경고창 표시
※ 여러가지 더 많은 속성들이 있다. 나머지 속성들은 직접 확인해보는 것이 좋다.
③ input창에 입력한 문자열은 value="" 로 입력된다.
2. <form> 태그
① <form method="" action='"> ... </form>
② <form>태그 안의 값( 이하 value )들을 action속성에 작성한 URI의 파라미터로 전달한다.
③ form 태그는 속성을 입력해도 눈으로 확인할 수 없다.
- method = "" : 전달방식을 GET, POST 중에 하나로 정할 수 있다.
※ RequestMethod의 GET방식과 POST방식에 대한 이해가 선행되어야 합니다.
- action = "" : form태그안의 데이터를 전달할 URI를 입력한다.
3. <button> 태그
① <button type=""> 버튼이름 </button>
② <button> 태그는 반드시 <form> 태그 안에 작성해야 한다.
③ <button> 태그는 크게 2가지 type으로 나뉜다.
<form> 태그를 이용할 경우, button type="submit"
$.ajax({})를 이용할 경우, button type="button" 으로 type의 속성을 작성해준다.
|
1
2
3
4
5
|
<!-- <form>태그를 사용하는 경우 -->
<button type="submit">Submit 버튼</button>
<!-- $.ajax를 사용하는 경우 -->
<button type="button">Button 버튼</button>
|
cs |
4. <Input>태그에 작성한 value를 Controller로 전달하기
① <form>태그를 먼저 작성한 후, <Input>태그를 <form>태그 안에 작성한다.
※ method = "POST" : 파라미터를 전달하여 INSERT하므로, POST를 사용
나머지 속성들은 아래의 태그와 이미지를 보고 확인해주세요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<form method="POST" action="/insertTableInfo">
<input type="text" name="name01" placeholder="이름은 3글자까지 입력하실 수 있습니다." maxlength="3" required />
<button type="submit">전송!</button>
</form>
</div>
</body>
</html>
|
cs |
② 이제 Controller에 URI를 매핑하고 메소드를 만들면 연결이 된다.
다음포스팅의 주제
[프로젝트/JAVA] 7일차 - form태그를 활용한 INSERT - 2
2021.06.28 44번째 포스팅 입사 112일 차. View에서 Controller로 input에 입력한 값을 전달할 준비가 되었다. 이제 View에서 전달된 parameter를 Controller에서 어떻게 받는지 확인해보자. 아래에 작성하는 내용.
limreus.tistory.com
'포트폴리오 > CCS' 카테고리의 다른 글
| [프로젝트/JAVA] 7일차 - form태그를 활용한 INSERT - 3 (0) | 2021.07.06 |
|---|---|
| [프로젝트/JAVA] 7일차 - form태그를 활용한 INSERT - 2 (0) | 2021.06.28 |
| [프로젝트/JAVA] 6일차 - Controller, View (0) | 2021.06.25 |
| [프로젝트/JAVA] 6일차 - Service, Repository(DAO) (2) | 2021.06.20 |
| [프로젝트/JAVA] 6일차 - MyBatis(Mapper.xml) (2) | 2021.06.16 |
댓글