답변:
<button></button>).<button></button> (힌트 : IE6)사용할 때 또 다른 IE 문제 <button />:
그리고 우리가 IE에 대해 이야기하는 동안 버튼 너비와 관련된 몇 가지 버그가 있습니다. 스타일을 추가하려고 할 때 신비하게 패딩을 추가합니다. 즉, 제어하기 위해 작은 해킹을 추가해야합니다.
<button />또한 form특성 (및 관련 특성)이 있으므로 문서 본문의 다른 부분에있는 양식에 링크 될 수 있습니다.
보조 메모와 마찬가지로 <button>암시 적으로 제출하므로 제출하지 않고 양식에서 버튼을 사용하려는 경우 문제가 발생할 수 있습니다. 이에 따라, 또 다른 이유는 사용 <input type="button">(또는 <button type="button">)
편집 - 자세한 내용
유형이 없으면의 유형을 button암시 적으로받습니다submit . 양식에있는 제출 단추 또는 입력의 수는 중요하지 않습니다. 제출시 명시 적으로 또는 암시 적으로 제출로 입력 된 단추 중 하나가 양식을 제출합니다.
버튼에는 3 가지의 지원되는 유형이 있습니다
submit || "submits the form when clicked (default)"
reset || "resets the fields in the form when clicked"
button || "clickable, but without any event handler until one is assigned"submit양식의 99.9 %가 많은이 기본적으로 button가진 하나 submit ?!
인용문
중요 사항 : HTML 양식에서 button 요소를 사용하면 브라우저마다 다른 값을 제출합니다. Internet Explorer는 사이에있는 텍스트 제출
<button>및</button>다른 브라우저는 value 속성의 내용을 제출하면서, 태그를. 입력 요소를 사용하여 HTML 양식으로 단추를 작성하십시오.
: http://www.w3schools.com/tags/tag_button.asp
올바르게 이해하면 브라우저에서 브라우저로의 호환성 및 입력 일관성이 정답입니다.
앵커, 입력 및 버튼의 차이점 기사를 인용하겠습니다. .
앵커 (<a> 요소)는 사용자가 브라우저에서 탐색하거나 다운로드 할 수있는 리소스 인 하이퍼 링크를 나타냅니다. 사용자가 새 페이지로 이동하거나 파일을 다운로드 할 수있게하려면 앵커를 사용하십시오.
입력 ( <input>) 데이터 필드를 나타내는 : 당신이 서버로 전송하는 것을 의미 일부 사용자 데이터 있도록. 버튼과 관련된 몇 가지 입력 유형이 있습니다.
<input type="submit"><input type="image"><input type="file"><input type="reset"><input type="button">예를 들어 " file "은 파일 을 업로드하는 데 사용되고 " reset "은 양식을 지우고 " submit "은 서버로 데이터를 보냅니다. MDN 또는 W3Schools 에서 W3 참조 확인 .
버튼 ( <button>)요소는 매우 다양합니다 :
::before와 ::after유사 요소;disabled속성을 지원 합니다. 이를 통해 쉽게 켜고 끌 수 있습니다.다시, MDN 또는 W3Schools의<button> 태그 에 대한 W3 참조를 확인하십시오 .
<button>vs.
<input type='button'>-
최신 브라우저에서는 CSS로 두 요소를 쉽게 스타일 button지정할 수 있지만 대부분의 경우 내부 HTML 및 의사 요소로 더 스타일을 지정할 수 있으므로 요소가 선호됩니다.
CSS 스타일링에 관한 한 <button type="submit" class="Btn">Example</button>CSS :before와 의사 클래스 를 사용할 수있는 기능이 더 좋습니다.:after 도움을 줄 수 .
인해 행 <input type="button">내지 An 다른 시각적 렌더링 <a>또는<span> 특정 상황에서 클래스와 스타일 때이를 피하기.
그것은 주목할 매우 가치가 현재의 최고 응답 있도록 일 현재 관심 2009 년 IE6로 작성되었다되지 <button type="submit">Wins</button>내 눈에 일관성을 스타일링하는 것은 정상에 온다.
jQuery를 사용하는 경우 큰 차이가 있습니다. jQuery는 버튼에서보다 입력에서 더 많은 이벤트를 인식합니다. 버튼에서 jQuery는 '클릭'이벤트 만 인식합니다. 입력에서 jQuery는 'click', 'focus'및 'blur'이벤트를 인식합니다.
필요에 따라 언제든지 이벤트를 버튼에 바인딩 할 수 있지만 jQuery가 자동으로 인식하는 이벤트는 다릅니다. 예를 들어, 페이지에 'focusin'이벤트가있을 때마다 실행되는 함수를 만든 경우 입력이 함수를 트리거하지만 버튼은 작동하지 않습니다.
<button>HTML을 포함 할 수 있다는 점에서 융통성이 있습니다. 또한 CSS를 사용하여 스타일을 지정하는 것이 훨씬 쉽고 스타일링은 실제로 모든 브라우저에 적용됩니다. 그러나 Internet Explorer (Eww! IE!)와 관련하여 몇 가지 단점이 있습니다. Internet Explorer는 태그의 내용을 값으로 사용하여 값 속성을 올바르게 감지하지 못합니다. 단추의 클릭 여부에 관계없이 양식의 모든 값이 서버 측으로 전송됩니다. 이것은 그것을 <button type="submit">까다 롭고 고통스럽게 사용합니다.
<input type="submit">반면에 가치 나 감지 문제는 없지만 HTML과 같은 HTML을 추가 할 수는 없습니다 <button>. 스타일링도 어렵고 스타일링이 모든 브라우저에서 항상 제대로 반응하는 것은 아닙니다. 이것이 도움이 되었기를 바랍니다.
또한 차이점 중 하나는 라이브러리 제공 업체와 이들이 코딩하는 내용에서 비롯 될 수 있습니다. 예를 들어 여기에서는 모바일 각도 UI와 함께 cordova 플랫폼을 사용하고 있으며 input / div / etc 태그는 ng-click과 잘 작동하지만 버튼으로 인해 Visual Studio 디버거가 프로그래머에 의해 발생하는 차이로 인해 충돌 할 수 있습니다. MattC 답변은 동일한 문제를 지적하고 jQuery는 lib 일뿐이며 공급자는 한 요소에서 일부 기능을 생각하지 않았으며 다른 요소에서 제공하는 기능은 생각하지 않았습니다. 따라서 라이브러리를 사용하는 경우 한 요소에 문제가 발생할 수 있으며 다른 요소에는 직면하지 않습니다. 그리고 단순히 인기있는 input것보다 더 인기가 많기 때문에 대부분 고정 된 것입니다.
이것은 매우 오래된 질문이며 더 이상 관련이 없을 수 있지만 <button>태그에 사용 되었던 대부분의 문제는 더 이상 존재하지 않으므로 사용하는 것이 좋습니다.
여러 가지 이유로 그렇게 할 수없는 경우 액세스 가능성을 기준으로 태그에 role =”button”속성을 추가해야합니다. 이 기사는 매우 유익합니다 : https://www.deque.com/blog/accessible-aria-buttons/
<button>.