어떤 단점이 있습니까?

어떤 단점이 있습니까?

---

http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/ 와 같은 진단 CSS 스타일 시트를 사용하기 시작했습니다 .

제안 된 규칙 중 하나는 제출 유형이있는 입력 태그를 강조 표시 <button>하고 더 의미있는 솔루션 으로 사용하도록 권장합니다 . <button>유형 제출 (예 : 브라우저 호환성) 의 장점 또는 단점은 무엇입니까 ?

명확하게 말하면의 사양을 이해합니다 <button>. 정의 된 시작과 끝이 있으며 다양한 요소를 포함 할 수 있지만 입력은 단일 항목이며 항목을 포함 할 수 없습니다. 내가 근본적으로 알고 싶은 것은 그것이 고장 났는지 아닌지입니다. 현재 버튼이 얼마나 사용 가능한지 알고 싶습니다. 아래의 첫 번째 대답은 불행히도 형태 외부를 제외하고는 사용하기 위해 깨 졌다는 것을 암시하는 것 같습니다.

2015 년 편집

풍경이 바뀌 었습니다! 지금은 6 년 이상의 버튼 처리 경험이 있으며 브라우저는 IE6 및 IE7에서 다소 옮겨졌습니다. 그래서 제가 알아 낸 것과 제가 제안한 것을 자세히 설명하는 답변을 추가하겠습니다.

---

ASP.NET 관점에서 응답.

이 질문 과 ModernButton 컨트롤에 대한 코드를 발견했을 때 흥분했습니다 <button>.

그래서 저는 모든 종류의 버튼을 추가하기 시작 <img />했습니다. 그 안에 태그로 장식하여 돋보이게했습니다. 그리고 그것은 모두 훌륭하게 작동했습니다 ... Firefox와 Chrome에서.

그런 다음 IE6을 시도하고 "잠재적으로 위험한 Request.Form 값이 감지되었습니다"라는 메시지를 받았습니다. IE6은 내 경우에는 html 태그가있는 버튼 내부에 html을 제출하기 때문입니다. 이 추가 데이터 유효성 검사가 마음에 들기 때문에 validateRequest 플래그를 비활성화하고 싶지 않습니다.

그래서 제출이 발생하기 전에 해당 버튼을 비활성화하기 위해 자바 스크립트를 작성했습니다. 하나의 버튼으로 테스트 페이지에서 훌륭하게 작동했지만 다른 <button>태그 가있는 실제 페이지에서 시도했을 때 다시 폭발했습니다. IE6는 모든 버튼의 html을 제출하기 때문입니다. 이제 제출하기 전에 버튼을 비활성화하는 모든 종류의 코드가 있습니다.

IE7과 동일한 문제입니다. IE8은 고맙게도이 문제를 해결했습니다.

Yikes. ASP.NET을 사용하는 경우이 길을 가지 않는 것이 좋습니다.

최신 정보:

나는 이것을 고칠 것으로 보이는 도서관을 찾았습니다.

이 라이브러리의 ie8.js 스크립트를 사용하는 경우 : http://code.google.com/p/ie7-js/

잘 될 수도 있습니다. IE8.js는 버튼 태그를 사용하여 IE8에서 IE5-7의 속도를 높입니다. 제출 된 값을 실제 값으로 만들고 하나의 버튼 만 제출됩니다.

---

때 사용하는 <button>브라우저는 서로 다른 유형의 기본값 때문에 유형을 지정 항상.

이것은 모든 브라우저에서 일관되게 작동합니다.

• <button type="submit">...</button>
• <button type="button">...</button>

이렇게하면 <button>단점없이 모든 장점 을 얻을 수 있습니다 .

---

알아야 할 모든 것 : W3Schools <button>Tag

태그는 모든 주요 브라우저에서 지원됩니다.

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

---

장점 :

• 표시 레이블은 제출 된 값과 동일하지 않아도됩니다. i18n 및 "이 행 삭제"에 적합
• <em>및 같은 마크 업을 포함 할 수 있습니다.<img>

단점 :

• MSIE의 일부 버전은 type="button"대신 기본적으로 설정 type="submit"되어 있으므로 명시 적이어야합니다.
• 일부 MSIE 버전은 모든를 <button>성공적으로 처리하므로 다중 제출 버튼 양식에서 어느 것이 클릭되었는지 알 수 없습니다.
• 일부 MSIE 버전은 실제 값 대신 표시 텍스트를 제출합니다.

에서 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button :

IE7에는 Click me로 양식을 제출할 때 전송 된 POST 데이터가 myButton = foo 대신 myButton = Click me가되는 버그가 있습니다. IE6에는 버튼을 통해 양식을 제출하면 IE7과 동일한 버그가있는 양식의 모든 버튼이 제출되는 더 나쁜 버그가 있습니다. 이 버그는 IE8에서 수정되었습니다.

---

유의해야 할 중요한 특징 : <button/>요소 가 포함 된 양식 에서 IE6 및 IE7은 <button/>요소를 클릭 할 때 양식을 제출하지 않습니다 . 반면에 다른 브라우저는 양식을 제출합니다.

반대로 <input type="button"/>또는 <button type="button"/>요소를 클릭 할 때 브라우저는 양식을 제출하지 않습니다 . 그리고 당연히 모든 브라우저는 <input type="submit"/>또는 <button type="submit"/>요소를 클릭 할 때 양식을 제출합니다 .

@orip의 답변에서 말했듯이 브라우저에서 일관된 제출 동작을 얻으려면 항상 요소 <button type="button" />또는 <button type="submit" />내부에서 사용하십시오 <form/>. type속성을 빼지 마십시오 .

---

나는 <button>6 년이 지난 지금 의 기이 한 경험을 가지고 있으므로 여기에 내 제안이 있습니다.

• 여전히 IE6 또는 IE7을 지원하는 경우 버튼에 대해 매우 조심하세요. 이러한 브라우저에서는 동작이 매우 버그가 있습니다. 경우에 따라 value = 'whatever'대신 innerHtml을 제출하고 다음과 같은 하나의 불안정한 동작 대신 모든 버튼 값을 제출합니다. 그. 따라서 철저히 테스트하거나 해당 브라우저를 위해 피하십시오.

• Otherwise: If you're still supporting IE8, <a href='http://example.com'><button></button></a> doesn't work well, and probably anything else where you nest a button inside a clickable element. So watch out for that.

• Otherwise: If you're using a <button> mainly as an element to click for your javascript, and it's outside of a form, make it <button type='button'> and you'll probably be just fine!

• Otherwise: If you're using <button> in a form, be wary that the default type of <button> is actually <button type='submit'> in (most) cases, so be explicit with your type and your value, like: <button type='submit' value='1'>Search</button>.

Note that: Using a button-mimic class, like Bootstrap's .btn allows you to just make things like <div> or <a> or even <button> look exactly the way you want it to, and in the case of <a> have a more useful fallback behavior. Not a bad option.

TLDR; Ok to use if you don't care about ancient browsers, but Bootstrap provides even more robust css visually similar alternatives worth looking into.

---

Is it broken or not:

As usual, the answer is "it works fine in all major browsers, but has the following quirks in IE." I don't think it will be a problem for you though.

The <button> tag is supported by all the major browsers. The only support problem lies in what Internet Explorer will submit upon pressing a button.

The major browsers will submit the content of the value attribute. Internet exploter will submit the text between the <button> and </button> tags, while also submitting the value of every other one in the form, instead just the one you clicked.

For your purposes, just cleaning up old HTML, this shouldn't be a problem.

Sources:

1. http://www.peterbe.com/plog/button-tag-in-IE
2. http://www.w3schools.com/tags/default.asp

---

Here's a site that explains the differences: http://www.javascriptkit.com/howto/button.shtml

Basically, the input tag allows just text (although you can use a background image) while the button allows you to add images, tables, divs and whatever else. Also, it doesn't require it to be nested within a form tag.

---

You might also run into these problems:

• jQuery cannot target the button (not jQuery's fault, though): <button> in IE7
• Multiple request variables if there are >1 <button>s: http://www.peterbe.com/plog/button-tag-in-IE

Another thing is related to styling it using the sliding-door technique: you need to insert another tag e.g. <span> to make it work.

---

as far as I am concerned the difference between submit and button tags is this: gives you the option to have different text displayed than the element's value

Let's say you have a list of products then next to each product you want a button to add it to the customer's cart:

product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>

then you could do this:

<button name="buy" type="submit" value="product2"> add to cart </button>

Now the problem is that IE will send the form with value="add to cart" instead of value="product2"

The easiest way to workaroound this issue is by adding onclick="this.value='product2'"

So this:

<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>

will do the trick on all major browsers - I have actually used this on a form with multiple buttons and works with Chrome Firefox and IE

---

Looks like the main reason to use <button> is to allow for CSS markup of that button and the ability to style the button with images: (see here: http://www.javascriptkit.com/howto/button.shtml)

그러나 (X) HTML + CSS에서 보았던 더 채택 된 접근 방식은 div를 사용하고 이미지와 : hover 가상 클래스로 완전히 스타일을 지정하는 것입니다 (시뮬레이션 버튼 누르기 ... 하나 이상 추가 할 수 없음). 답변 당 링크, 그래서 구글 "div 버튼"에 대한 많은 예제를 볼 수 있습니다.) 그리고 자바 스크립트를 사용하여 양식 제출 또는 AJAX 호출을 수행합니다. 이것은 HTML 양식을 사용하지 않는 경우에도 더욱 의미가 있습니다. AJAX로 모든 제출을 수행합니다.

참고 URL : https://stackoverflow.com/questions/1903453/what-disadvantages-are-there-to-the-button-tag