input type="submit"
및 button
태그 그들은 교환 할 수있다? 또는 차이점이 있다면 언제 사용 input type="submit"
하고 언제 button
?
그리고 차이가 없다면 왜 같은 목적으로 두 개의 태그가 있습니까?
button
하고 value
IE의 일부 버전의 속성은, input
당신이, IE의 일부 버전은 잘 재생되지 않습니다 기대했던 보낼 것 button
들.
input type="submit"
및 button
태그 그들은 교환 할 수있다? 또는 차이점이 있다면 언제 사용 input type="submit"
하고 언제 button
?
그리고 차이가 없다면 왜 같은 목적으로 두 개의 태그가 있습니까?
button
하고 value
IE의 일부 버전의 속성은, input
당신이, IE의 일부 버전은 잘 재생되지 않습니다 기대했던 보낼 것 button
들.
답변:
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
BUTTON 요소로 만든 단추는 INPUT 요소로 만든 단추와 같은 기능을하지만 더 풍부한 렌더링 가능성을 제공합니다. BUTTON 요소에는 내용이있을 수 있습니다. 예를 들어, 이미지를 포함하는 BUTTON 요소는 기능이 유사하며 유형이 "image"로 설정된 INPUT 요소와 유사 할 수 있지만 BUTTON 요소 유형은 컨텐츠를 허용합니다.
따라서 기능성 만 교환 가능합니다!
( type="submit"
의 기본값은로 설정되어 button
있으므로 잊지 마십시오 !)
type="submit"
위해 기본으로, 버튼 type
입니다 submit
.
type
default가 인 경우를 보았습니다 button
. 브라우저 불일치를 피하기 위해 각 속성을 명시 적으로 선호합니다.
<input type = "button"..> 대신 <button> 태그를 사용하십시오 . 부트 스트랩 3에서 권장되는 방식입니다.
http://getbootstrap.com/css/#buttons-tags
"크로스 브라우저 렌더링
가장 좋은 방법은 가능한 크로스 브라우저 렌더링을 보장하기 위해 가능하면 <button> 요소를 사용하는 것이 좋습니다.
무엇보다도 <input> 기반 버튼의 행 높이를 설정하여 Firefox의 다른 버튼 높이와 정확하게 일치하지 않는 Firefox 버그가 있습니다. "
button
훨씬 더 명확하고 aria
접근성 기능 과 함께 제공되며 훨씬 쉽게 스타일을 지정할 수 있습니다. HTML5이므로 앞으로도 생각할 수 있습니다.
두 요소 모두 기능적 으로 동일한 결과를 제공하지만 * 다음을 사용하는 것이 좋습니다<button>
.
input
컨트롤이 편집 가능 하거나 사용자가 편집 할 수 있음을 제안합니다 . button
그것이 제공하는 목적의 관점에서 훨씬 더 명백하다input[type="submit"]
경우에 따라 올바르게 표시되지 않는 단점이 있습니다.POST
/ GET
요청 의 값 을 서버에 제출할 때 IE의 동작이 매우 심각 합니다.* 기본적으로 지정된 동작이없는 것을 제외하고 .<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' />
.
<input type="submit" value="Log In" />
<button>
새로운 것을 선호하여 더 이상 사용되지 않을 것 입니다. 나중에 특정 시점에서 변경 될 수 있기 때문에 답변에 특정 태그를 언급해서는 안된다는 의미 입니까? 답변이 그들의 상황에 어떻게 적용되는지 결정하기 위해 독자에게 연습으로 남겨두기를 원합니다. 정보가 독자에게 가치가있는 한, 정보를 포함시키는 데 문제가있는 것은 아닙니다.
나는 이것이 오래된 질문이라는 것을 알고 있지만 mozilla.org에서 이것을 발견하고 적용한다고 생각합니다.
버튼은 제출, 재설정 또는 버튼의 세 가지 유형이 될 수 있습니다. 제출 단추를 클릭하면 양식의 데이터를 요소의 action 속성으로 정의 된 웹 페이지로 보냅니다.
재설정 버튼을 클릭하면 모든 양식 위젯이 즉시 기본값으로 재설정됩니다. UX 관점에서 이것은 나쁜 습관으로 간주됩니다.
버튼을 클릭해도 아무 효과가 없습니다! 어리석게 들리지만 JavaScript로 사용자 정의 버튼을 만드는 것이 놀랍도록 유용합니다.
<button type="button">
는 슬라이더 / 회전 목마를 다음 슬라이드로 진행하기 위해 a 를 코딩 할 수 있습니다 .
다른 답변이 중대하고 질문에 대답하는 동안 사용할 때 고려해야 할 한 가지가있다 input type="submit"
및 button
. 으로 input type="submit"
는 사용할 수 없습니다 입력에 CSS 의사 요소를하지만 당신은 할 수있는 버튼에!
이것이 button
스타일링과 관련하여 입력보다 요소 를 사용하는 한 가지 이유 입니다.
이것이 버그인지 또는 기능인지는 모르겠지만 매우 중요한 차이 <input type="submit">
가 있습니다. 요청에서 키 페어를 생성 <button type="submit">
하지만 그렇지 않습니다. Chrome 및 Safari에서 테스트되었습니다.
당신은 그래서 여러는 양식에 전송 버튼 하나 클릭 한 알고 싶어 - 사용하지 않는 button
, 사용 input type="submit"
대신에.