입력 유형 = "제출"Vs 버튼 태그는 서로 호환됩니까?

입력 유형 = "제출"Vs 버튼 태그는 서로 호환됩니까?

---

input type="submit"및 button태그 그들은 교환 할 수있다? 또는 차이점이 있다면 언제 사용 input type="submit"하고 언제 button?

그리고 차이가 없다면 왜 같은 목적으로 두 개의 태그가 있습니까?

---

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

BUTTON 요소로 만든 단추는 INPUT 요소로 만든 단추와 같은 기능을하지만 더 풍부한 렌더링 가능성을 제공합니다. BUTTON 요소에는 내용이있을 수 있습니다. 예를 들어, 이미지를 포함하는 BUTTON 요소는 기능이 유사하며 유형이 "image"로 설정된 INPUT 요소와 유사 할 수 있지만 BUTTON 요소 유형은 컨텐츠를 허용합니다.

따라서 기능성 만 교환 가능합니다!

( type="submit"의 기본값은로 설정되어 button있으므로 잊지 마십시오 !)

---

은 <input type="button">단지 버튼이며, 그 자체로 아무것도하지 않습니다. <input type="submit">, 클릭하면 양식 요소 내부 양식을 제출 때.

또 다른 유용한 '특별한'버튼은 <input type="reset">양식을 지우는 것입니다.

---

<input type = "button"..> 대신 <button> 태그를 사용하십시오 . 부트 스트랩 3에서 권장되는 방식입니다.

http://getbootstrap.com/css/#buttons-tags

"크로스 브라우저 렌더링

가장 좋은 방법은 가능한 크로스 브라우저 렌더링을 보장하기 위해 가능하면 <button> 요소를 사용하는 것이 좋습니다.

무엇보다도 <input> 기반 버튼의 행 높이를 설정하지 못하게하여 Firefox의 다른 버튼 높이와 정확히 일치하지 않는 Firefox 버그가 있습니다. "

---

두 요소 모두 기능적 으로 동일한 결과를 제공하지만 * 다음을 사용하는 것이 좋습니다<button> .

• 훨씬 더 명확하고 읽기 쉽습니다. input컨트롤이 편집 가능 하거나 사용자가 편집 할 수 있음을 제안합니다 . button그것이 제공하는 목적의 관점에서 훨씬 더 명백하다
• CSS 스타일을 쉽게; 위에서 언급했듯이 FIrefox 및 IE에는 input[type="submit"]경우에 따라 올바르게 표시되지 않는 단점이 있습니다.
• 예측 가능한 요청 : POST/ GET요청 의 값 을 서버에 제출할 때 IE의 동작이 매우 심각 합니다.
• 마크 업 친화적; 버튼 안에 항목 (예 : 아이콘)을 중첩시킬 수 있습니다.
• HTML5, 미래 지향적 사고; 개발자가 공식화되면 새로운 사양을 채택하는 것이 우리의 책임입니다. HTML5는 현재 1 년 넘게 공식적으로 운영되어 왔으며 많은 경우에 SEO 를 강화하는 것으로 나타났습니다 .

* _{기본적으로 지정된 동작이없는 것을 제외하고 .<button type="button">}

요약하면을 사용하지 않는 것이 좋습니다<input type="submit" /> .

---

<input type='submit' />자체 닫는 단일 태그이기 때문에 HTML을 지원하지 않습니다. <button>반면, 태그 쌍이기 때문에 HTML, 이미지 등을 지원합니다 <button><img src='myimage.gif' /></button>. <button>CSS 스타일링과 관련하여 더 유연합니다.

단점은 <button>이전 브라우저에서 완전히 지원하지 않는다는 것입니다. 예를 들어, IE6 / 7은 올바르게 표시되지 않습니다.

특별한 이유가 없다면,를 지키는 것이 가장 좋습니다 <input type='submit' />.

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 mozilla.org에서 이것을 발견하고 적용한다고 생각합니다.

버튼은 제출, 재설정 또는 버튼의 세 가지 유형이 될 수 있습니다. 제출 단추를 클릭하면 양식의 데이터를 요소의 action 속성으로 정의 된 웹 페이지로 보냅니다.

재설정 버튼을 클릭하면 모든 양식 위젯이 즉시 기본값으로 재설정됩니다. UX 관점에서 이것은 나쁜 습관으로 간주됩니다.

버튼을 클릭해도 아무 효과가 없습니다! 어리석게 들리지만 JavaScript로 사용자 정의 버튼을 만드는 것이 놀랍도록 유용합니다.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

---

<button>보다 최신이며 <input type="submit">,보다 의미적이고, 쉽게 스타일을 지정하고 HTML을 지원합니다.

---

다른 답변이 중대하고 질문에 대답하는 동안 사용할 때 고려해야 할 한 가지가있다 input type="submit"및 button. 으로 input type="submit"는 사용할 수 없습니다 입력에 CSS 의사 요소를하지만 당신은 할 수있는 버튼에!

이것이 button스타일링과 관련하여 입력보다 요소 를 사용하는 한 가지 이유 입니다.

---

이것이 버그인지 또는 기능인지는 모르겠지만 매우 중요한 차이점 <input type="submit">이 있습니다. 요청에 키 페어를 생성 <button type="submit">하지만 그렇지 않습니다. Chrome 및 Safari에서 테스트되었습니다.

So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.

---

If you are talking about <input type=button>, it won't automatically submit the form

if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.

Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">

참고URL : https://stackoverflow.com/questions/7117639/input-type-submit-vs-button-tag-are-they-interchangeable