inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

초보자를 위한 HTML 기초

HTML Forms 소개

자바스크립트를 이용할 때 button type 지정에 관한 궁금증

193

윤슬기

작성한 질문수 2

1

안녕하세요! 자바스크립트를 사용하여 정보 전송을 제어할 때, 전송 button의 type을 "button"으로 지정하라는 부분과 관련해 궁금한 점이 있습니다.

button의 type을 submit으로 지정할 경우, 해당 버튼 클릭, 엔터키 입력 그리고 스페이스바 입력 등 form에 대한 모든 submit 이벤트를 유발하는 동작이 유효해지더라구요. 그래서 저는 종종 button의 type을 submit으로 지정하고, form의 submit 이벤트에 event.preventDefault 메서드로 본래의 동작을 막은 후 원하는 자바스크립트 코드를 실행시키고는 합니다(아래 예시). 이 경우에 어떤 문제가 있을 수 있을까요?

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  // 원하는 동작을 수행하는 코드
})

HTML/CSS

답변 1

2

조은

안녕하세요.

해당하는 경우라면 form 내에서 submit 을 목적으로 button을 사용한 것이니,
button 요소의 type을 submit으로 사용하시는 게 옳은 판단이 맞습니다.

button에서 type="button" 을 사용하는 케이스는,
예를 들어, 버튼을 눌렀을 때 modal 을 띄운다는 등 다른 JavaScript 동작을 시키는 경우에만 해당합니다.

섹션5 노션링크 는 따로 없나요?

0

11

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

15

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

13

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

16

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

37

2

claude plugin 방법 자세히 부탁드려요

0

39

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

34

2

최근 코테, 과제 테스트 트렌드

0

56

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

36

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

36

2

Gemini로 진행가능 여부 궁금합니다.

0

58

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

25

2

프롬프트 11 진행 완료

0

41

2

파트3 수급 부분

0

39

2

input 과 label 의 작성 순서

0

698

1

a 링크의 href 속성

0

817

2

리액트에서 picture 사용법

0

226

0

section 내에서 여러요소를 그룹핑해야 되는 상황에 대해 질문드립니다.

0

472

2

dialog 미지원 브라우저를 위한 fallback 관련 질문입니다

0

470

4

React의 컴포넌트 개발과 시맨틱 구조 작성의 연관성에 대해 궁금한 점이 있어 질문드립니다.

0

276

1

tr 요소 내에 th, td 혼용 관련 질문입니다

0

321

1

시맨틱 구조 관련해서 질문있습니다.

0

244

1

details 엘리먼트의 이점에 대해

0

251

1

address 요소 설명 중 궁금한 것이 있어서 질문드립니다.

0

383

3