★★ ★★ ★★떤떤것 ?을 용? ???떤떤것 ?을 용? ???떤떤것 ?을 용? ???

대부분의 사이트(SO 포함)에서 다음을 사용합니다.

<input type="button" />

다음 대신:

<button></button>

• 둘 사이의 주요 차이점은 무엇입니까?
• 둘 중 하나를 사용해야 하는 타당한 이유가 있나요?
• 조합해서 사용하는 타당한 이유가 있나요?
• 용용을 <button>호환성의 문제가 있는 경우는, 그다지 널리 사용되고 있지 않습니다.

• 여기 차이점을 설명하는 페이지가 있습니다(기본적으로 html은<button></button>)
• 그리고 왜 사람들이 이 일을 피하는지 설명하는 또 다른 페이지.<button></button> (영어: IE6)

'IE'를 사용할 의 또 <button />:

그리고 IE에 대해 이야기할 때 버튼 폭과 관련된 몇 가지 버그가 있습니다.스타일을 추가하려고 할 때 신기하게도 패딩을 추가할 수 있습니다. 즉, 상황을 통제하기 위해 작은 해킹을 추가해야 합니다.

붙접 just just just just just just just just just just just just just 。<button>은 암묵적으로 송신하기 때문에, 송신하지 않고 폼의 버튼을 사용하는 경우는 문제가 발생할 수 있습니다.또 .<input type="button"> (오류)<button type="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"

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

페이지부터:

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

버튼 요소 - W3C

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

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

이 이 입니다.<input>★★★★★★ 。

견적서

HTML 값이 됩니다.HTML 형식으로 버튼 요소를 사용하는 경우 브라우저마다 다른 값이 전송됩니다. Explorer 간에 합니다.<button> ★★★★★★★★★★★★★★★★★」</button>다른 브라우저는 값 속성의 내용을 전송합니다.HTML을 사용합니다.

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

제가 제대로 이해했다면, 정답은 호환성과 브라우저 간 입력 일관성입니다.

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

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

입력(<input>.)는 데이터 필드를 나타냅니다.따라서 서버에 송신하는 사용자 데이터도 있습니다.버튼과 관련된 몇 가지 입력 유형이 있습니다.

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

파일 업로드, 폼 클리어, 서버로의 데이터 송신 등, 각각에 의미가 있습니다.MDN 또는 W3 Schools에서 W3 참조를 확인합니다.

버튼(<button>)요소는 매우 다용도입니다.

• 이미지, 단락, 헤더 등의 요소를 버튼 내에 중첩할 수 있습니다.
• 단추는 또한 다음을 포함할 수 있습니다.::before ★★★★★★★★★★★★★★★★★」::after
• 은 「」를 서포트하고 있습니다.disabled끌 수 요.이것에 의해, 간단하게 온/오프 할 수 있습니다.

에서 W3을 합니다.<button>MDN 또는 W3 Schools에 태그를 붙입니다.

에 더이 없을 , 이 문제는 이 문제가 .<button>태그는 더 이상 존재하지 않으므로 사용하는 것이 좋습니다.

여러 가지 이유로 할 수 없는 경우에는 태그에 접근성을 고려하여 role="button" 속성을 추가합니다.이 기사는 매우 유익합니다.https://www.deque.com/blog/accessible-aria-buttons/

HTML 매뉴얼의 [폼(Forms)]페이지를 인용합니다.

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

양식에 단추를 만들려면 입력 요소의 단추를 사용하십시오.또한 액션에 대한 버튼을 만들려면 버튼 태그를 사용하십시오.

<button>

• 기본적으로 "type="syslog" 특성이 있는 것처럼 동작합니다.
• 폼뿐만 아니라 폼 없이도 사용할 수 있습니다.
• 텍스트 또는 html 콘텐츠 허용
• css 의사 요소 허용(예: 이전)
• 태그 이름은 보통 단일 형식에 고유합니다.

대.

<input type='button'>

• 송신 요소로서 동작하려면 , 타입을 「submiting」으로 설정할 필요가 있습니다.
• 양식에서만 사용할 수 있습니다.
• 텍스트 콘텐츠만 허용
• no css 의사 요소
• 대부분의 폼 요소와 동일한 태그 이름(필수)

두 모두 로 쉽게 할 수 css로 스타일링할 수 있습니다.button html 및 하여 보다 을 할 수 됩니다.

한 CSS 에 관한 한<button type="submit" class="Btn">Example</button>는 CSS CSS를 할 수 있기 에 더 .:before ★★★★★★★★★★★★★★★★★」:after 도움이 될 수 있는 유사 클래스입니다.

이문 the due<input type="button">으로 표현하다<a> ★★★★★★★★★★★★★★★★★」<span>특정 상황에서 수업과 함께 스타일링될 때 나는 그것들을 피한다.

현재의 상위 정답은 2009년에 작성되었다는 것을 주목할 필요가 있습니다.IE6는 요즘 관심사가 아니기 때문에<button type="submit">Wins</button>눈에 스타일링의 일관성이 가장 위에 있어요.

여기 있는 나머지 대답에 뭔가를 더하고 싶을 뿐이에요.입력 요소는 빈 요소 또는 비활성 요소로 간주됩니다(다른 빈 요소는 area, base, br, col, hr, img, input, link, meta 및 param).여기서도 확인할 수 있습니다). 즉, 콘텐츠를 가질 수 없습니다.빈 요소에는 콘텐츠가 없을 뿐만 아니라 ::: after, :: before 등의 의사 요소를 포함할 수 없습니다.이것은 큰 단점이라고 생각합니다.

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

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

<button>는 HTML을할 수 CSS를이 훨씬 브라우저에 됩니다.게다가 CSS를 사용하여 스타일링을 하는 것이 훨씬 쉬우며 스타일링은 모든 브라우저에 적용됩니다., 、 Internet Explorer （ Ew !IE ! ） 。Internet Explorer가 태그의 내용을 값으로 사용하여 값 속성을 제대로 감지하지 못합니다.단추 클릭 여부에 관계없이 양식의 모든 값이 서버 측으로 전송됩니다. 하면, 을 「아, 아, 아」로수 있게 됩니다.<button type="submit">까다롭고 골칫거리죠

<input type="submit">문제는 의 을 수 .<button>스타일링도 어렵고, 모든 브라우저에서 스타일링이 잘 반응하는 것은 아닙니다.츠키노

각도 동안 버튼이 을 일으킬 수 .lib일 입니다.각도의 ui, cordova, "/div/etc" ng-click ", "visual studio" 입니다.때, 수 , 예를 들면 도서관이나 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관, 도서관 등 여러 가지 가 있을 수 있습니다.다른 요소에 대해 제공하는 기능을 생각하지 않았기 때문에 라이브러리를 사용할 때 다른 요소에 대해 직면하지 않는 하나의 요소에 대해 문제가 발생할 수 있습니다.또한 일반적인 요소에 대해서도 마찬가지입니다.input더 인기가 있기 때문에, 대부분 고정된 것이 될 것입니다.

disabled Atribute가 ios-safari 버튼에서는 제대로 기능하지 않는 것도 주의할 필요가 있습니다(@ Khris Vandal 코멘트도 참조).저도 이런 일이 있었어요.

언급URL : https://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use