Form 태그의 이해

ㅇ 폼 태그의 역할

 

 : 입력된 데이터를 한 번에 서버로 전송하고, 전송한 데이터는 웹 서버가 처리하며, 결과에 따른 웹페이지를 보여줍니다.

 

 

ㅇ 폼 태그 동작 방법

1) 폼 내용 입력 후 제출

2) 모든 데이터를 웹 서버로 보내고 데이터 처리를 위해 웹 프로그램으로 넘김

3) 웹 프로그램은 데이터 처리 후 결과에 따른 HTML 페이지를 웹 서버에 보냄

4) 웹 서버는 받은 HTML 페이지를 브라우저에 전송

 

 

ㅇ 폼 태그 속성

: name, action, method, target 등의 폼 속성이 있는데, 전송할 때 어디로 보낼지에 대한 방법을 정합니다.

 

1) action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 ( 즉, 어디로 보낼지를 지정해주는 것입니다. )

2) name : 폼을 식별하기 위한 이름을 지정

3) accept-charset : 폼 전송에 사용할 문자 인코딩을 지정

4) target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

5) method : 폼을 서버에 전송할 http 메소드를 정함 ( GET or POST )

 

ex.

<form action="/login/new" method="post">

 

 

ㅇ GET / POST

1) GET : 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보내지는 것

 -> 보안적으로 취약하여 지정된 리소스에서 데이터를 읽을 때만 주로 사용

2) POST : 내부적으로 보냄으로써 눈에 보이지 않음

 -> 지정된 리소스에서 데이터를 처리할 경우 쓰기,수정,삭제할 때 사용

 

 

 

ㅇ <input> 태그

: 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.

속성에는 type, readonly, maxlength 등이 있습니다.

1) type : 태그 모양을 다양하게 변경 가능

 - text / radio / checkbox / password / button / hidden / submit / reset 등

2) name : 태그 이름을 지정

3) readonly : 태그 읽기 전용

4) maxlength : 해당 태그 최대 글자 수 지정

5) required : 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지않고 submit 하면 에러 출력

6) placeholder : 태그에 입력할 값에 대한 힌트 줍니다.

 

 

 

 

 

ㅇ 자세한 예제를 살펴보자

 

- html

<div class ="contatiner">
        <form action="/new" method="post">
            <div class="form-group">
                <label for="name"> 이름</label>
                <input type="text" id="name" name="name" placeholder="이름 입력하세요">
            </div>
            <button type="submit"> 등록 </button>
        </form>
    </div>

 

- MemberController.java

    @GetMapping("/new")
    public String New() {
        return "/Login/memberNew";
    }

    @PostMapping("/new")
    public String create(Form form) {
        Member member = new Member();
        member.setName(form.getName());
        return "redirect:/";
    }

 

 - [ form action = "/new" method ="post" ] , <input name="name"> 구동과정

     

1) 이 태그를 보면 form 에 사용자가 값을 입력하고 등록 버튼 누름

2) 그 값은 input name = "name" 을 통해 Form 클래스 내부에 있는 name 객체와 매칭이 되면서

     Form 클래스의 name 에 값이 들어감

2) /new 라는 주소를 post 해줌

3) controller 에서 PostMapping 을 통해 form 의 name 데이터를 받고 데이터 저장을 하든 뭘 하든 가공 처리를 한다.

4) 해야할 처리가 다 끝나면 이동할 주소를 return 해준다.