양식을 제출하지 않는 HTML 버튼

양식이 있습니다. 그 양식 외에는 버튼이 있습니다. 다음과 같은 간단한 버튼 :

<button>My Button</button>

그럼에도 불구하고 클릭하면 양식이 제출됩니다. 코드는 다음과 같습니다.

<form id="myform">
    <input />
</form>
<button>My Button</button>

이 버튼은 JavaScript 만 있으면됩니다. 그러나 위 코드 에서처럼 보일지라도 양식을 제출합니다. 태그 버튼을 스팬으로 변경하면 완벽하게 작동합니다. 그러나 불행히도 버튼이어야합니다. 해당 버튼이 양식을 제출하지 못하도록 차단할 수있는 방법이 있습니까? 예를 들어

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

나는 이것이 HTML의 가장 성가신 작은 특성이라고 생각합니다 ... 제출하지 않으려면 그 버튼은 "button"유형이어야합니다.

<button type="button">My Button</button>

: 5 2 월 2019 업데이트 당으로 HTML 생활 표준 (또한 HTML 5 사양 ) :

결 측값 기본값 및 유효하지 않은 값 기본값 은 제출 단추 상태입니다.

return false;onclick 핸들러 끝에서 작업을 수행합니다. 그러나 JavaScript를 추가하지 않아도 올바르게 작동하는 방식으로 추가 type="button"하는 것이 좋습니다 <button>.

Dave Markle이 맞습니다. 에서 W3School의 웹 사이트 :

항상 버튼의 유형 속성을 지정하십시오. Internet Explorer의 기본 유형은 "버튼"이며 다른 브라우저 (및 W3C 사양)에서는 "제출"입니다.

즉, 사용중인 브라우저가 W3C의 사양을 따릅니다.

기본적으로 html 버튼은 양식을 제출합니다.

이는 양식 외부에있는 단추조차도 제출자 역할을하기 때문입니다 (W3Schools 웹 사이트 : http://www.w3schools.com/tags/att_button_form.asp 참조 ).

즉, 버튼 유형은 기본적으로 "제출"입니다

<button type="submit">Button Text</button>

따라서이 문제를 해결하는 쉬운 방법은 버튼 유형 을 사용하는 것 입니다.

<button type="button">Button Text</button>

다른 옵션으로는 버튼을 클릭했을 때 또는 <input> 태그를 대신 사용하는 onclick 또는 다른 핸들러 의 끝에 false 반환

자세한 내용을 보려면 단추에서 Mozilla Developer Network의 정보를 확인하십시오. https://developer.mozilla.org/en/docs/Web/HTML/Element/button

<Button>태그 를 사용하지 않는 것이 좋습니다 . <Input type='Button' onclick='return false;'>대신 태그를 사용하십시오 . ( "false return"을 사용하면 실제로 양식을 보내지 않아야합니다.)

일부 참고 자료

접근성의 이유로 여러 type=submit버튼으로 끌어낼 수 없었습니다 . 유일한 A를 기본적으로 작업에 방법 form여러 버튼 만 만 부딪 치기 형태로 제출할 수있는 하나의 Enter열쇠는 그들 만 하나입니다 보장하는 type=submit다른 사람들이 같은 다른 유형에있는 동안 type=button. 이러한 방식으로 키보드 지원 측면에서 브라우저에서 양식을 처리 할 때 더 나은 사용자 경험을 활용할 수 있습니다.

나를 위해 일한 또 다른 옵션은 onsubmit = "return false;"를 추가하는 것이 었습니다. 양식 태그에.

<form onsubmit="return false;">

의미 적으로 아마도 버튼 유형을 변경하는 위의 방법만큼 좋은 해결책은 아니지만 제출하지 않는 양식 요소를 원한다면 옵션 인 것처럼 보입니다.