type - w3school html button




<button> 대<input type="button"/>. 어떤 것을 사용합니까? (10)

CSS 스타일링에 관한 한, <button type="submit" class="Btn">Example</button> 는 CSS :before:after 가상 클래스 를 사용할 수있게 해 <button type="submit" class="Btn">Example</button> 더 좋습니다.

특정 상황에서 클래스로 스타일을 지정할 때 <a> 또는 <span> 과 시각적으로 다르게 렌더링되는 <input type="button"> 때문에 피할 수 있습니다.

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

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

<input type="button" />

대신에:

<button></button>
  • 이 둘의 주요 차이점은 무엇입니까?
  • 다른 대신 하나를 사용해야하는 타당한 이유가 있습니까?
  • 합당한 이유가 있을까요?
  • <button> 사용하는 데 호환성 문제가 있습니까?

HTML 설명서에서 양식 페이지 인용 :

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


또한 차이점 중 하나는 라이브러리 제공 업체와 개발자가 작성한 것입니다. 예를 들어 여기서는 mobile angular UI와 함께 cordova 플랫폼을 사용하고 있고 input / div / etc 태그는 ng-click으로 잘 작동하지만 버튼을 사용하면 Visual Studio 디버거가 프로그래머가 발생시킨 차이점에 의해 충돌 할 수 있습니다. MattC가 동일한 문제를 지적한 점에 주목하자. jQuery는 단지 lib이며, 공급자는 한 요소에서 다른 기능을 제공하지 않는다. 그래서 당신이 라이브러리를 사용할 때 하나의 요소에 문제가 발생할 수 있습니다. 단순히 대중적인 것이기 때문에 단순히 input 과 같이 대중적인 것이 대부분 고정 된 것입니다.


보조 메모처럼 <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"

여기 나머지 답변에 뭔가를 추가하고 싶습니다. 입력 요소는 빈 요소 나 빈 요소로 간주됩니다 (다른 빈 요소는 영역, 기본, br, col, hr, img, input, link, meta 및 param이며 here 확인할 수도 here ). 빈 엘리먼트 에는 내용이없는 것 외에도 :: after 및 :: before와 같은 의사 요소가 없어야 하는데, 이는 큰 결점이라고 생각합니다.


인용문

중요 : HTML 양식에서 button 요소를 사용하면 브라우저마다 다른 값이 전송됩니다. Internet Explorer는 <button></button> 태그 사이에 텍스트를 제출하고 다른 브라우저는 value 속성의 내용을 제출합니다. input 요소를 사용하여 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 또는 W3School의 W3 참조 확인하십시오.

버튼 ( <button>) 요소는 매우 다양합니다.

  • 이미지, 단락 또는 헤더와 같은 버튼 내의 요소를 중첩시킬 수 있습니다.
  • 버튼에는 ::before::after pseudo-elements가 포함될 수 있습니다.
  • 버튼은 disabled 속성을 지원합니다. 이렇게하면 쉽게 켜고 끌 수 있습니다.

다시 말하지만, MDN 이나 http://www.w3schools.com/tags/tag_button.asp <button> 태그 대한 W3 참조를 확인하십시오.


이 기사 는 차이점에 대한 개요를 제공하는 것으로 보인다.

페이지에서 :

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

버튼 요소 - W3C


<button> 은 HTML을 포함 할 수 있다는 점에서 융통성이 있습니다. 또한 CSS를 사용하여 스타일을 적용하는 것이 훨씬 쉬우 며 실제로 모든 브라우저에서 스타일이 적용됩니다. 그러나 Internet Explorer (Eww! IE!)와 관련하여 몇 가지 단점이 있습니다. Internet Explorer에서 태그의 내용을 값으로 사용하여 값 특성을 제대로 검색하지 못합니다. 양식의 모든 값은 단추를 눌렀는지 여부에 관계없이 서버 측으로 보내집니다. 이것은 이것을 <button type="submit"> 까다 롭고 고통스럽게 사용합니다.

반면에 <input type="submit"> 에는 값이나 검색 문제가 없지만 <button> 과 같이 HTML을 추가 할 수는 없습니다. 스타일을 지정하기가 더 어려워서 스타일이 모든 브라우저에서 항상 잘 응답하지는 않습니다. 희망이 도움이되었습니다.


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

<input type='button'>
  • submit 엘리먼트로 행동하기 위해 type을 'submit'로 설정해야합니다.
  • 양식에서만 사용할 수 있습니다.
  • 텍스트 콘텐츠 만 허용됨
  • CSS는 의사 요소가 없습니다.
  • 대부분의 forms 요소와 동일한 태그 이름 (입력)

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







html-input