form 태그는 왜 사용하나요?

리액트 책을 따라 하다가 form 태그가 나왔는데 이 태그는 왜 사용하는 건가요?

책에서는 ~~ 형태로 쓰였습니다

전통적인 서버사이드 웹에서는 get 이외의 메소드로 요청을 보내기 위해 필수적인 태그였습니다.

문서 이동 없이 ajax로 요청을 보내는 요즘의 spa 개발에서는 아주 필수적인 태그는 아니고, 선택에 따라 안써도 됩니다.

하지만 저는 입력양식 형태의 인터페이스를 만들어야 할때 개인적으로 선호하는 편인데,

  1. 확인버튼을 누르거나 엔터키를 치는, submit 행동을 잡기가 편합니다. 그냥 form 에서 onSubmit 이벤트를 잡으면 돼요
  2. 사용자 브라우저의 자동완성 기능이나, 브라우저에 설치된 자동완성 관련 플러그인이 form 태그를 인식해서 양식을 알맞게 잘 채워줄 확률을 올릴 수 있습니다. 자동완성 기능이 잘 작동하는건 브라우저/플러그인 개발자의 몫이긴 하지만, 맥락에 맞는 태그 하나 잘 써서 내 서비스를 이용하는 이용자의 ux가 좋아지는거라면 충분히 해볼 일이라고 생각합니다.

단 주의사항이 있습니다.

  1. onSubmit 이벤트는 페이지 이동 또는 페이지 새로고침을 유발합니다. 그 반응을 하는게 표준적인 브라우저 기본 행동입니다. spa에선 이게 도움이 안되는 행동이기 때문에 preventDefault 를 해줘야합니다.
  2. form 태그 안에 있는 모든 버튼 태그는, 타입이 명시되지 않는다면 항상 타입이 submit이 됩니다. 따라서 button 태그의 type을 button 으로 명시해줄 필요가 있습니다.
6개의 좋아요