form 태그의 action 속성

설명에 앞서 redirect 사용시 302에러가 뜨는데... 에러코드 좀 공부해야겠다 ㅎㅎ

---

action

<form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.

 

 

들어가기 전에 알아야 될 것

1. 스프링부트 환경에서 view의 경로 최상단에는 resource/templates에서 시작한다.

 

---

//controller
@PostMapping("form")
    public String addMember(Member member) {
        memberRepository.save(member);
        return "redirect:members";
    }

@GetMapping("members")
    public String Member(Model model) {
        List<Member> members = memberRepository.findAll();
        model.addAttribute("members", members);
        return "members";
    }

//html
<form action="members"th:action method="post">
    <div>
        <label for="userName">닉네임</label>
        <input type="text" id="userName" name="userName" class="formcontrol" 
        placeholder="닉네임을 입력하세요">
    </div>
    <div class="col">
        <button class="button1" type="submit">회원 등록</button>
    </div>
</form>

 

form태그의 action속성은 서버로 보낼 때 데이터가 도착할 URL을 나타냅니다.

 

1. 닉네임을 입력하고 회원 등록을 누르면 redirect로 인해 데이터와 함께 localhost:8080/members로 이동하고

2. @GetMapping("members")이하 메소드가 다시 실행됩니다.

 

---

<form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.

이미지로 다시 한 번 보며 action을 이해해보자.

 

 

1. 등록할 아이디를 만들고 회원 등록을 누릅니다.

 

2. 등록을 누르면 localhost:8080/members로 이동하고 데이터도 보냅니다. 

 

3. 데이터도 보냅니다.

---

<form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.

<form action="members"th:action method="post">
    <div>
        <label for="userName">닉네임</label>
        <input type="text" id="userName" name="userName" class="formcontrol" 
        placeholder="닉네임을 입력하세요">
    </div>
    <div class="col">
        <button class="button1" type="submit">회원 등록</button>
    </div>
</form>

 

 

위 웹 페이지에서도 볼 수 있듯 localhost:8080/members 에 테스트용아이디라는 데이터가 도착한 것을 볼 수 있다.

 

action = "members" 라는 의미는 members URI 로 데이터를 보낸다는 의미

정리하면 action 은 데이터를 보낼 url를 적는 곳이다.