<button>대<input type="button" /> . 어느 것을 사용할 것인가?</button>

질문자 :Aron Rotteveel

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

 <input type="button" />

대신에:

 <button></button>

• 둘 사이의 주요 차이점은 무엇입니까(있는 경우)?
• 다른 것 대신에 하나를 사용해야 하는 타당한 이유가 있습니까?
• 이들을 결합하여 사용해야 하는 타당한 이유가 있습니까?
• <button> 사용하면 호환성 문제가 발생하는데 널리 사용되지 않습니까?

• 다음은 차이점을 설명하는 페이지입니다 (기본적으로 html을 <button></button> 넣을 수 있음).
• <button></button> 피하는 이유를 설명하는 또 다른 페이지 (힌트: IE6)

<button /> 사용할 때의 또 다른 IE 문제:

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

Tamas Czinege

참고로 <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"

Travis J

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

페이지에서:

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

버튼 요소 - W3C

Noldorin

<button> 요소 안에 텍스트나 이미지와 같은 콘텐츠를 넣을 수 있습니다.

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

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

Santhosh

인용하다

중요: HTML 양식에서 버튼 요소를 사용하는 경우 브라우저마다 다른 값을 제출합니다. <button> 및 </button> 태그 사이의 텍스트를 제출하는 반면 다른 브라우저는 value 속성의 내용을 제출합니다. input 요소를 사용하여 HTML 형식의 버튼을 만듭니다.

출처 : http://www.w3schools.com/tags/tag_button.asp

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

user54579

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

앵커 ( <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 참조를 확인하십시오.

Attilio

HTML 매뉴얼의 Forms 페이지 인용:

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

gimel

양식에 버튼을 생성하려면 입력 요소의 버튼을 사용하십시오. 그리고 액션에 대한 버튼을 생성하려면 버튼 태그를 사용하십시오.

nickomarsa

<button>

• 기본적으로 "type="submit" 속성이 있는 것처럼 작동합니다.
• 양식뿐만 아니라 양식에도 사용할 수 있습니다.
• 텍스트 또는 HTML 콘텐츠 허용
• CSS 의사 요소 허용(예:before)
• 태그 이름은 일반적으로 단일 양식에 고유합니다.

대

 <input type='button'>

• 제출 요소로 작동하려면 유형을 '제출'로 설정해야 합니다.
• 형식에서만 사용할 수 있습니다.
• 텍스트 콘텐츠만 허용
• CSS 의사 요소 없음
• 대부분의 양식 요소(입력)와 동일한 태그 이름

--
최신 브라우저에서는 두 요소 모두 CSS로 쉽게 스타일을 지정할 수 있지만 대부분의 경우 내부 html 및 의사 요소로 더 많은 스타일을 지정할 수 있으므로 button

Sergey Sklyar

이것은 아주 오래된 질문이고 더 이상 관련이 없을 수도 있지만, <button> 태그가 가지고 있던 대부분의 문제는 더 이상 존재하지 않으므로 사용하는 것이 좋습니다.

여러 가지 이유로 그렇게 할 수 없는 경우 접근성을 위해 태그에 role=”button” 속성을 추가하는 것을 염두에 두십시오. 이 기사는 매우 유익합니다: https://www.deque.com/blog/accessible-aria-buttons/

Nasia Makrygianni

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

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

현재 최고의 답변 이 2009년에 작성되었다는 점은 주목할 가치가 있습니다. IE6은 요즘 문제가 아니므로 내 눈에는 <button type="submit">Wins</button>

jnowland

jQuery를 사용하면 큰 차이가 있습니다. jQuery는 버튼보다 입력에서 더 많은 이벤트를 인식합니다. 버튼에서 jQuery는 '클릭' 이벤트만 인식합니다. 입력에서 jQuery는 '클릭', '포커스' 및 '흐림' 이벤트를 인식합니다.

필요에 따라 항상 이벤트를 버튼에 바인딩할 수 있지만 jQuery가 자동으로 인식하는 이벤트는 다르다는 점에 유의하십시오. 예를 들어 페이지에 'focusin' 이벤트가 있을 때마다 실행되는 함수를 만든 경우 입력은 함수를 트리거하지만 버튼은 그렇지 않습니다.

MattC

나는 여기 나머지 답변에 뭔가를 추가하고 싶습니다. 입력 요소는 비어 있거나 무효 요소로 간주됩니다(다른 빈 요소는 area , base , br , col , hr , img , input , link , meta 및 param 입니다. 여기에서 확인할 수도 있습니다). 즉, 내용을 가질 수 없습니다. 내용이 없는 것 외에도 빈 요소 는 ::after 및 ::before와 같은 의사 요소를 가질 수 없습니다 .

Roumelis George

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

<input type="submit"> <button> 와 같이 HTML을 추가할 수는 없습니다. 또한 스타일을 지정하기가 더 어렵고 스타일이 모든 브라우저에서 항상 잘 반응하는 것은 아닙니다. 도움이 되었기를 바랍니다.

Moh S.

또한 차이점 중 하나는 라이브러리 제공자와 코드에서 올 수 있습니다. 예를 들어 여기에서는 모바일 각도 UI와 함께 cordova 플랫폼을 사용하고 있으며 input/div/etc 태그가 ng-click과 잘 작동하는 동안 버튼은 프로그래머가 유발한 차이로 인해 Visual Studio 디버거가 충돌하게 할 수 있습니다. MattC 답변은 동일한 문제를 가리키고 jQuery는 단지 라이브러리이며 공급자는 한 요소에서 다른 요소에서 제공하는 일부 기능을 생각하지 않았습니다. 따라서 라이브러리를 사용할 때 한 요소에서 문제에 직면할 수 있지만 다른 요소에서는 직면하지 않습니다. input 과 같이 인기 있는 것은 더 인기가 있기 때문에 대부분 고정된 것입니다.

deadManN

출처 : http:www.stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use