<버튼> vs. <입력 유형 =“버튼” />. 어느 것을 사용해야합니까?

StackOverflow https://stackoverflow.com/questions/469059

문제

대부분의 사이트를 볼 때 (SO 포함) 대부분은 사용합니다.

<input type="button" />

대신에:

<button></button>
  • 둘 사이의 주요 차이점은 무엇입니까?
  • 상대방 대신에 하나를 사용해야 할 유효한 이유가 있습니까?
  • 결합을 사용해야 할 유효한 이유가 있습니까?
  • 사용합니다 <button> 호환성 문제가있어서 널리 사용되지 않는다고 생각하십니까?
도움이 되었습니까?

해결책

사용시 또 다른 IE 문제 <button />:

우리가 IE에 대해 이야기하는 동안 버튼 너비와 관련된 몇 가지 버그가 있습니다. 스타일을 추가하려고 할 때 신비하게 추가 패딩을 추가 할 것입니다. 즉, 물건을 제어 할 수 있도록 작은 해킹을 추가해야합니다.

다른 팁

부수적 인 것처럼 <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"

이 기사 차이에 대한 꽤 좋은 개요를 제공하는 것 같습니다.

페이지에서 :

버튼 요소로 생성 된 버튼은 입력 요소로 생성 된 버튼과 마찬가지로 더 풍부한 렌더링 가능성을 제공합니다. 버튼 요소에는 내용이있을 수 있습니다. 예를 들어, 이미지가 포함 된 버튼 요소는 유형이 "이미지"로 설정된 입력 요소와 유사하지만 버튼 요소 유형은 컨텐츠를 허용합니다.

버튼 요소 -W3C

내부 a <button> 텍스트 나 이미지와 같은 내용을 넣을 수 있습니다.

<button type="button">Click Me!</button>

이것은이 요소와로 생성 된 버튼의 차이입니다. <input> 요소.

인용하다

중요 : 버튼 요소를 HTML 양식으로 사용하는 경우 다른 브라우저가 다른 값을 제출합니다. Internet Explorer는 다음 사이에 텍스트를 제출합니다 <button> 그리고 </button> 태그, 다른 브라우저는 값 속성의 내용을 제출합니다. 입력 요소를 사용하여 HTML 양식으로 버튼을 만듭니다.

에서 : http://www.w3schools.com/tags/tag_button.asp

올바르게 이해하면 대답은 브라우저에서 브라우저로의 호환성 및 입력 일관성입니다.

인용 양식 페이지 HTML 매뉴얼에서 :

버튼 요소로 생성 된 버튼은 입력 요소로 생성 된 버튼과 마찬가지로 더 풍부한 렌더링 가능성을 제공합니다. 버튼 요소에는 내용이있을 수 있습니다. 예를 들어, 이미지가 포함 된 버튼 요소와 같은 기능을 수행하고 유형이 "이미지"로 설정된 입력 요소와 유사하지만 버튼 요소 유형은 컨텐츠를 허용합니다.

입력 요소에서 버튼을 사용하여 양식으로 버튼을 만들려면 버튼을 사용하십시오. 조치를 위해 버튼을 만들려면 버튼 태그를 사용하십시오.

기사를 인용하겠습니다 앵커, 입력 및 버튼의 차이:

앵커 (그만큼 <a> 요소) 하이퍼 링크를 나타내고, 사람이 브라우저에서 탐색하거나 다운로드 할 수있는 리소스. 사용자가 새 페이지로 이동하거나 파일을 다운로드하도록 허용하려면 앵커를 사용하십시오.

an 입력 (<input>)는 데이터 필드를 나타냅니다. 따라서 일부 사용자 데이터는 서버로 전송하는 것을 의미합니다. 버튼과 관련된 몇 가지 입력 유형이 있습니다. <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
그들 각각은 의미가 있습니다.파일"파일을 업로드하는 데 사용됩니다."초기화"양식을 지우고"제출하다"데이터를 서버로 보냅니다. W3 참조 확인 MDN에서 또는 W3Schools에서.

그만큼 단추 (<button>) 요소는 매우 다재다능합니다.

  • 이미지, 단락 또는 헤더와 같은 버튼 내에서 요소를 중첩 할 수 있습니다.
  • 버튼도 포함 할 수 있습니다 ::before 그리고 ::after 의사 원소;
  • 버튼을 지원합니다 disabled 기인하다. 이를 통해 쉽게 켜고 끄는 것이 가능합니다.

다시 W3 참조를 확인하십시오 <button> 꼬리표 MDN에서 또는 W3Schools에서.

jQuery를 사용하는 경우 큰 차이가 있습니다. jQuery는 버튼보다 입력에 대한 더 많은 이벤트를 알고 있습니다. 버튼에서 jQuery는 '클릭'이벤트 만 알고 있습니다. 입력에서 jQuery는 '클릭', '포커스'및 '블러'이벤트를 알고 있습니다.

필요에 따라 항상 버튼에 이벤트를 바인딩 할 수 있지만 jQuery가 자동으로 알고있는 이벤트가 다릅니다. 예를 들어, 페이지에 'Focusin'이벤트가있을 때마다 실행 된 함수를 만든 경우 입력이 함수를 트리거하지만 버튼은 그렇지 않습니다.

<button>
  • 기본적으로 "type ="제출 "속성이있는 것처럼 동작합니다.
  • 양식뿐만 아니라 양식없이 사용할 수 있습니다.
  • 텍스트 또는 HTML 컨텐츠가 허용됩니다
  • CSS 유사 요소 허용 (예 : 전)
  • 태그 이름은 일반적으로 단일 양식에 고유합니다

vs.

<input type='button'>
  • 유형은 제출 요소로 행동하려면 '제출'으로 설정해야합니다.
  • 형태로 만 사용할 수 있습니다.
  • 텍스트 내용 만 허용됩니다
  • CSS 의사 요소가 없습니다
  • 대부분의 양식 요소 (입력)와 동일한 태그 이름

--
현대식 브라우저에서는 두 요소 모두 CSS와 쉽게 스타일을 지정할 수 있지만 대부분의 경우 button 내부 HTML 및 의사 요소로 더 많은 스타일링 할 수 있으므로 요소가 선호됩니다.

CSS 스타일링에 관한 한 <button type="submit" class="Btn">Example</button> CSS를 사용할 수있는 능력을 제공하므로 더 좋습니다. :before 그리고 :after 의사 수업 도움이 될 수 있습니다.

인해 <input type="button"> 시각적으로 다른 렌더링 <a> 또는 <span> 특정 상황에서 수업으로 스타일을 지정할 때 나는 그들을 피합니다.

주목할 가치가 있습니다 현재 최고 답변 2009 년에 작성되었습니다. IE6은 오늘날 걱정하지 않습니다. <button type="submit">Wins</button> 내 눈의 스타일 일관성이 맨 위에 나옵니다.

<button> HTML을 포함 할 수 있다는 점에서 유연합니다. 또한 CSS를 사용하여 스타일이 훨씬 쉽고 스타일이 실제로 모든 브라우저에 적용됩니다. 그러나 Internet Explorer (EWW! IE!)와 관련하여 몇 가지 단점이 있습니다. Internet Explorer는 태그의 내용을 값으로 사용하여 값 속성을 올바르게 감지하지 않습니다. 버튼을 클릭할지 여부에 관계없이 양식의 모든 값은 서버 측로 전송됩니다. 이것은 그것을 a로 사용합니다 <button type="submit"> 까다 롭고 고통.

<input type="submit"> 반면에 가치 나 탐지 문제는 없지만 할 수는 없지만 HTML을 추가 할 수는 없습니다. <button>. 스타일이 더 어렵고 스타일이 모든 브라우저에서 항상 잘 반응하지는 않습니다. 이것이 도움이 되었기를 바랍니다.

여기에 나머지 답변에 무언가를 추가하고 싶습니다. 입력 요소는 빈 또는 공허 요소로 간주됩니다 (다른 빈 요소는 영역,베이스, BR, COL, HR, IMG, 입력, 링크, 메타 및 매개 변수입니다. 또한 확인할 수도 있습니다. 여기),, 그들은 콘텐츠를 가질 수 없다는 것을 의미합니다. 콘텐츠가없는 것 외에도 빈 요소 :: after and :: 이전과 같은 의사 요소를 가질 수 없습니다., 나는 큰 단점을 고려합니다.

또한, 차이점 중 하나는 라이브러리 제공 업체와 코드 코드에서 나올 수 있습니다. 예를 들어 여기서 나는 모바일 각도 UI와 함께 Cordova 플랫폼을 사용하고 있으며 입력/div/etc 태그는 NG 클릭과 잘 작동하지만 버튼으로 인해 프로그래머가 발생한 차이점에 의해 비주얼 스튜디오 디버거가 충돌 할 수 있습니다. MATTC 답변은 같은 문제를 가리키며, jQuery는 단지 lib이며, 제공자는 한 요소에서 일부 기능을 생각하지 않았으며 다른 요소에 제공하는 기능을 생각하지 않았습니다. 따라서 라이브러리를 사용할 때는 한 요소와 관련하여 문제가 발생할 수 있습니다. 그리고 단순히 인기있는 것과 같은 것입니다 input, 더 인기가 있기 때문에 대부분 고정 된 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top