폼 요소와 <form> 태그 개념

HTML에서 **폼(form)**은 사용자가 정보를 입력하고 제출할 수 있도록 구성된 다양한 UI 요소의 집합입니다.

폼이란 사용자가 상호작용하여 내용을 입력하는 UI를 말한다. 폼 요소에는 text, checkbox, radio, textarea 등이 있다.

폼 요소를 사용할 때는 <form> 태그 안에서 사용하는 것이 좋다. <form> 태그를 사용하지 않아도 동작은 하지만, <form> 태그를 사용할 때의 이점을 누리지 못하기 때문이다.

<form> 태그를 사용하면 좋은 점 요약

1. 시맨틱 웹 구조를 따를 수 있음(코드 보기 쉬워짐)
2. 웹 접근성을 지킬 수 있음
3. 따로 키 이벤트를 지정하지 않아도 enter를 누르면 폼이 제출됨
4. 자동으로 유효성 검사가 가능함

특히 2, 3번째 이점이 나한테 와닿았다.

웹 접근성을 지킬 수 있음

웹 접근성(Web Accessibility, 줄여서 A11y)은 모든 사용자가 어떤 환경에서도 웹사이트를 이용하는 데 불편함이 없도록 보장하는 것을 말한다. 예를 들어, 시각이 불편한 사람들을 위해 웹 페이지의 정보를 음성으로 출력해주는 것이 있다. <form> 태그를 사용하면 사용자가 웹 페이지에 접속한 후 입력창으로 바로 뛰어넘을 수 있고, 라벨을 눌러 폼 요소를 선택할 수 있는 등 웹 접근성을 더 잘 챙길 수 있다고 한다.

개발한 페이지가 웹 접근성을 잘 지키고 있는지 파악하기 위해, 크롬의 Lighthouse를 이용할 수 있다.

따로 키 이벤트를 지정하지 않아도 enter를 누르면 폼이 제출됨

이 때 까지 <form> 태그를 주로 사용하지 않은 나에게는 충격적인 정보였다. 필요할 때 마다 input마다 keyPress 이벤트를 달았었는데 그럴 필요가 없었기때문에… 좋은 정보를 알았다.🥲