HTML의 form 태그의 submit을 위한 적절한 태그가 무엇이 있을까요.
3가지 정도의 태그와 타입 속성을 지정할 수 있습니다.
1. input type="submit"
2. input type="button"
3. button type="submit"
우선 첫 번째 input type="submit"은 form 태그 내부에 작성하면
submit 이벤트로 연결이 됩니다.
그리고 3번의 button type="submit" 도 마찬가지입니다.
하지만 2번의 케이스는 submit 이벤트가 연동이 되지 않습니다.
그렇다면 1번과 3번 중 어떤 것을 쓰는 것이 괜찮을까요.
사실 여러 사람들의 코드를 보다 보면 둘 다 많이 쓰기는 합니다.
하지만 개인적으로는 button type="submit"이 더 나은 것 같습니다.
왜냐하면 input type="submit" 내부에는 이미지를 추가시킬 수 없지만
(input 태그는 self-closing/empty 태그로서 내부에 태그를 추가시킬 수 없습니다.)
버튼 태그 내부에는 img 태그 추가가 가능합니다.
그리고 조금 더 semantic 하고 확장 가능성 있다고 구글링 하면서 알게 되었습니다.
사소한거지만 다시 한번 체크하고 button type의 기본 속성도 submit 이라는 것을 알게 되었습니다.
(그래서 코드를 보다보면 button type 속성으로 button을 명시한 것이 많습니다.)
당연하다고 생각되는 것도 다시 한번 짚어보고 되돌아봐야겠습니다.
반응형
'Aaron[에런] > Trouble Shootings' 카테고리의 다른 글
[Trouble Shootings #8] HTTP/DB - HTTP 메소드 관련 DELETE vs. PUT/PATCH (1) | 2022.09.23 |
---|---|
[Trouble Shootings #7] React - input의 여러 state 처리 (2) | 2022.09.23 |
[Trouble Shootings #5] CSS - list style 및 인덴트 (0) | 2022.09.22 |
[Trouble Shootings #4] React - label과 input 연동 (0) | 2022.09.22 |
[Trouble Shootings #3] React - module scss 이용 시 component prop으로 custom className을 넘겼을 때의 처리 (2) | 2022.09.21 |
댓글