Câu hỏi


Khi xem xét hầu hết các trang web (bao gồm cả SO), hầu hết chúng đều sử dụng:

<input type="button" />

thay vì:

<button></button>
  • Sự khác biệt chính giữa hai, nếu có?
  • Có lý do hợp lệ nào để sử dụng cái thay vì cái khác không?
  • Có lý do hợp lệ nào để sử dụng kết hợp chúng không?
  • Đang sử dụng <button> đi kèm với các vấn đề tương thích, nhìn thấy nó không được sử dụng rộng rãi?

1435
2018-01-22 13:14


gốc


Nút có rất nhiều vấn đề, như được liệt kê ở đây: stackoverflow.com/questions/1903453/… - Kzqai
tl; dr - nút được sử dụng để có vấn đề (ví dụ: IE <= 6). Nhưng không phải bây giờ. Sử dụng nó - ví dụ: css-tricks.com/use-button-element - Snowcrash
sử dụng đầu vào là tốt nhất còn lại cho các tác vụ nâng cao hơn như danh sách chọn hoặc đầu vào radio hoặc thậm chí danh sách hộp kiểm. nơi nút ngay cả với các vấn đề tương thích là tùy chỉnh nhiều hơn và chỉ cần thực hiện 1 chức năng tối thiểu. - CMS_95


Các câu trả lời:


  • Đây là một trang mô tả sự khác biệt (về cơ bản bạn có thể đưa html vào một <button></button>)
  • Và một trang khác mô tả lý do tại sao mọi người tránh <button></button> (Gợi ý: IE6)

Một vấn đề khác khi sử dụng IE <button />:

Và trong khi chúng ta đang nói về IE,   có một vài lỗi liên quan đến   chiều rộng của các nút. Nó sẽ bí ẩn   thêm phần đệm thừa khi bạn đang cố gắng   để thêm kiểu, nghĩa là bạn phải thêm   một hack nhỏ để có được những thứ dưới   điều khiển.


589
2018-01-22 13:20



Câu trả lời này là vào năm 2009, vì IE6 đã chết nên tôi cho rằng không có lý do gì để không sử dụng <button> hiện nay? - Rosdi Kasim
Nếu họ muốn cướp biển, hãy để họ có phiên bản trang web của bạn. Thả IE6, thả IE7, tiếc là IE8 vẫn cần hỗ trợ. - Jared
Theo Microsoft Trang đếm ngược IE6, Việc sử dụng IE6 của Trung Quốc vẫn đang tăng tốc (tính đến tháng 1 năm 2014) vào khoảng 22%. ie6death.com lưu ý rằng hỗ trợ IE6 sẽ kết thúc vào ngày 8 tháng 4 năm 2014. - BryanH
Như nhiều người đã bỏ qua, người dùng vẫn còn trên các phiên bản cũ của IE có thể được sử dụng để internet tìm kiếm khủng khiếp bị hỏng. - jinglesthula
<button /> cũng có một form thuộc tính (và các thuộc tính liên quan) để nó có thể được liên kết với các biểu mẫu trong các phần khác của phần thân tài liệu. - Gup3rSuR4c


Cũng giống như một lưu ý phụ, <button> sẽ gửi ngầm, điều này có thể gây ra sự cố nếu bạn muốn sử dụng nút trong biểu mẫu mà không cần gửi. Vì vậy, một lý do khác để sử dụng <input type="button"> (hoặc là <button type="button">)

Chỉnh sửa - - biết thêm chi tiết

Không có loại, button ngầm nhận được loại submit. Nó không quan trọng có bao nhiêu trình nút hoặc đầu vào có trong các hình thức, bất kỳ một trong số họ được rõ ràng hoặc ngầm nhập như gửi, khi nhấp vào, sẽ gửi biểu mẫu.

Có 3 loại được hỗ trợ cho một nút

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"

271
2018-04-09 20:13



bạn có thể thêm chi tiết hơn không? điều gì sẽ xảy ra nếu có nhiều nút? là nó chỉ gõ = 'submit' mà thực hiện điều này? - Simon_Weaver
Tôi tin rằng Đầu tiên nút được nhập là gửi sẽ được sử dụng để gửi biểu mẫu. Điều này có liên quan khi, ví dụ, bạn đang phản ứng với một sự kiện của nút cụ thể và người dùng nhấn ENTER trong một INPUT. - Bobby Jack
Oh thân yêu W3C, tại sao submit như mặc định khi 99,9% các biểu mẫu có rất nhiều button với một  submit?! - csguimaraes
Rất nhiều hình thức cũng chỉ có một nút, đó là đệ trình. Phải làm một cuộc gọi một cách hoặc t'other, tôi giả sử. - jinglesthula
Điều này có thể rất lớn! Mã thử nghiệm của tôi gửi khoảng 80% thời gian nếu không nó được coi là nút bình thường. TRÁCH NHIỆM khi sử dụng <button> trong <form> - Sydwell


bài viết này dường như cung cấp một cái nhìn tổng quan khá tốt về sự khác biệt.

Từ trang:

Các nút được tạo bằng hàm phần tử BUTTON giống như các nút   được tạo bằng phần tử INPUT, nhưng   chúng cung cấp hiển thị phong phú hơn   khả năng: phần tử BUTTON có thể   có nội dung. Ví dụ: một nút   phần tử chứa hình ảnh   các chức năng như và có thể giống với   Phần tử INPUT có loại được đặt thành   “Hình ảnh”, nhưng loại phần tử BUTTON   cho phép nội dung.

Phần tử nút - W3C


159
2018-01-22 13:19





Bên trong <button> bạn có thể đặt nội dung, như văn bản hoặc hình ảnh.

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

Đây là sự khác biệt giữa yếu tố này và các nút được tạo bằng <input> thành phần.


38
2018-03-28 04:27



+1, kể từ <input /> thực sự là một yếu tố void, trong khi <button> không phải là - Sebastian
sử dụng thuộc tính giá trị cho loại nút đầu vào? - Tebe
@ ГляОпаОпа Thuộc tính giá trị không thể chứa không phải văn bản. - mbomb007
không có thắc mắc. Nó sẽ là một mớ hỗn độn để kết hợp các thẻ html khác bên trong thuộc tính value. Nếu bạn có ý đó. Chỉ cần sử dụng yếu tố phù hợp tùy theo nhu cầu của bạn. Chèn img bên trong thẻ nút âm thanh lạ cho tôi btw - Tebe


Trích dẫn

Quan trọng: Nếu bạn sử dụng phần tử nút trong biểu mẫu HTML, các trình duyệt khác nhau sẽ gửi các giá trị khác nhau. Internet Explorer sẽ gửi văn bản giữa <button> và </button> thẻ, trong khi các trình duyệt khác sẽ gửi nội dung thuộc tính giá trị. Sử dụng yếu tố đầu vào để tạo các nút trong biểu mẫu HTML.

Từ : http://www.w3schools.com/tags/tag_button.asp

Nếu tôi hiểu chính xác, câu trả lời là tính tương thích và tính nhất quán đầu vào từ trình duyệt đến trình duyệt


36
2018-01-22 13:18



hãy cẩn thận vì w3schools không được biết đến với độ chính xác của nó: w3fools.com - Hawken
@ Hawken Trang đó được viết bởi những kẻ ngốc nghĩ W3School giả vờ là W3C. Trong thực tế, W3Schools không tốt hơn hay tệ hơn hàng nghìn trang web khác xử lý loại tài liệu này. - Mr Lister
@MrLister Tôi đã nói chuyện với những người nghĩ rằng W3Schools được kết hợp với W3C. Mặc dù tôi không chắc chắn rằng tôi đồng ý với "trách nhiệm cung cấp thông tin chính xác" của W3Fools, tôi nghĩ rằng độ chính xác của W3Schools khiến một điều gì đó mong muốn và các nhà phê bình của nó không nhất thiết phải là kẻ ngốc. (Tôi đã học được rất nhiều từ W3S, trở lại khi nó tốt, nó đã không theo kịp với các tiêu chuẩn.) - Marnen Laibow-Koser
@MrLister W3Schools dễ dàng là nguồn không chính thức được sử dụng nhiều nhất cho thông tin công nghệ web. Và chất lượng thực sự hút. Tại sao không đơn họ ra? Và W3Fools đã làm gì sai? Mọi thứ có vẻ đúng với tôi. - Marnen Laibow-Koser
Trích dẫn ở đây là rất không rõ ràng. 'sẽ gửi' trong bất kì trường hợp nào? Khi nhấn nút? Khi biểu mẫu được gửi? Và chúng có nghĩa là giá trị cho nút cụ thể đó khi toàn bộ biểu mẫu được mã hóa URL hay chúng có nghĩa là toàn bộ chuỗi truy vấn hoặc dữ liệu bài được gửi cùng với yêu cầu? Ngoài ra, cách sử dụng input yếu tố thay đổi hành vi? Và có khuyến nghị sử dụng một input áp dụng cho tất cả các nút hoặc có ngoại lệ cho các nút gửi? Nó hoàn toàn không rõ ràng những gì bất cứ điều gì trong đoạn văn được trích dẫn. - Mark Amery


Sử dụng nút từ phần tử đầu vào nếu bạn muốn tạo nút trong biểu mẫu. Và sử dụng thẻ nút nếu bạn muốn tạo nút cho một hành động.


16
2018-03-01 08:17



Tại sao bạn nên sử dụng thẻ nút bên ngoài biểu mẫu? - Caltor
Đối với kịch bản phía máy khách. <input type = "button"> không có chức năng trong HTML. - iGEL
@iGEL - cũng không <button type="button"> - Roy Tinker


Tôi sẽ trích dẫn bài báo Sự khác biệt giữa Anchors, Inputs và Buttons:

Neo (các <a> phần tử) đại diện cho siêu liên kết, tài nguyên mà một người có thể điều hướng đến hoặc tải xuống trong trình duyệt. Nếu bạn muốn cho phép người dùng di chuyển đến một trang mới hoặc tải xuống một tệp, hãy sử dụng một neo.

An đầu vào (<input>) đại diện cho một trường dữ liệu: vì vậy một số dữ liệu người dùng bạn muốn gửi đến máy chủ. Có một số loại đầu vào liên quan đến các nút: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Mỗi người trong số họ có một ý nghĩa, ví dụ "tập tin"được sử dụng để tải lên tệp"cài lại"xóa một biểu mẫu và"Gửi đi"gửi dữ liệu đến máy chủ. Kiểm tra tham chiếu W3 trên MDN hoặc là trên W3Schools.

Các nút (<button>) yếu tố khá linh hoạt:

  • bạn có thể lồng các phần tử trong một nút, chẳng hạn như hình ảnh, đoạn văn hoặc tiêu đề;
  • các nút cũng có thể chứa ::before và ::after các phần tử giả;
  • nút hỗ trợ disabled thuộc tính. Điều này làm cho nó dễ dàng để biến chúng và tắt.

Một lần nữa, kiểm tra tham chiếu W3 cho <button> nhãn trên MDN hoặc là trên W3Schools.


16
2017-11-08 14:31



Tôi đã nhận thấy rằng bạn cũng có thể cung cấp thuộc tính <button> -element an href = "" - và nó sẽ hoạt động như một <a> -tag. - Atheist


Trích dẫn Trang biểu mẫu trong hướng dẫn sử dụng HTML:

Các nút được tạo bằng hàm phần tử BUTTON giống như các nút được tạo bằng phần tử INPUT, nhưng chúng cung cấp khả năng hiển thị phong phú hơn: phần tử BUTTON có thể có nội dung. Ví dụ, phần tử BUTTON chứa một hàm ảnh giống như và có thể giống với phần tử INPUT có kiểu được đặt thành "hình ảnh", nhưng loại phần tử BUTTON cho phép nội dung.


15
2018-01-22 13:19





Có một sự khác biệt lớn nếu bạn đang sử dụng jQuery. jQuery nhận thức được nhiều sự kiện trên đầu vào hơn là trên các nút. Trên các nút, jQuery chỉ biết các sự kiện 'click'. Về đầu vào, jQuery biết các sự kiện 'click', 'focus' và 'blur'.

Bạn luôn có thể liên kết các sự kiện với các nút của bạn nếu cần, nhưng chỉ cần lưu ý rằng các sự kiện mà jQuery tự động nhận thức là khác nhau. Ví dụ: nếu bạn đã tạo một hàm được thực hiện bất cứ khi nào có sự kiện 'focusin' trên trang của bạn, đầu vào sẽ kích hoạt hàm nhưng một nút sẽ không hoạt động.


8
2017-12-21 17:12



Trong sự tò mò, khi nào tôi cần sử dụng các sự kiện lấy nét và làm mờ trên phần tử kiểu nút? Tôi hiểu làm thế nào nó có thể được thực hiện, tôi chỉ không nhận được lý do tại sao. Tôi không thể tìm thấy một lý do trực quan duy nhất cho điều đó. Nó wuold được vui vẻ để se một ví dụ về một sử dụng hợp lý :) - KjetilNordin
re: KjetilNordin - Chúng tôi đã có một ứng dụng nhận thức được bất kỳ sự kiện focusin nào trên một trang và một ứng dụng đã xảy ra, một hành động đã diễn ra. Vì vậy, nếu sử dụng một đầu vào, bạn có thể xem tất cả các phần tử cho một sự kiện duy nhất. Không nói bạn nên, nhưng bạn có thể. Nguy cơ là một người nào đó thay đổi đầu vào thành một nút, và sau đó focusin không xảy ra, và sau đó hành động của bạn không xảy ra, và sau đó ứng dụng của bạn sẽ bùng nổ. Đó là những gì đã xảy ra với chúng tôi. :) - MattC
sử dụng các sự kiện tiêu điểm khi một phần tử hiện được nhắm mục tiêu thông qua chuột / bàn phím. chúng hiển thị cho người dùng biết họ đang ở đâu trong tài liệu. - albert


Theo như kiểu dáng CSS có liên quan <button type="submit" class="Btn">Example</button> tốt hơn vì nó cung cấp cho bạn khả năng sử dụng CSS :before và :after  lớp giả có thể giúp bạn.

Bởi vì <input type="button"> hiển thị trực quan khác với <a> hoặc là <span> khi được tạo kiểu với các lớp trong các tình huống nhất định, tôi tránh chúng.

Nó rất đáng chú ý câu trả lời hàng đầu hiện tại đã được viết vào năm 2009. IE6 không phải là một mối quan tâm ngày nay <button type="submit">Wins</button> phong cách nhất quán trong mắt tôi xuất hiện trên đầu trang.


7
2017-07-30 04:33





<button> linh hoạt ở chỗ nó có thể chứa HTML. Hơn nữa, việc tạo kiểu bằng CSS dễ dàng hơn nhiều và kiểu dáng thực sự được áp dụng trên tất cả các trình duyệt. Tuy nhiên, có một số nhược điểm liên quan đến Internet Explorer (Eww! IE!). Internet Explorer không phát hiện thuộc tính giá trị đúng cách, sử dụng nội dung của thẻ làm giá trị. Tất cả các giá trị trong một biểu mẫu được gửi đến phía máy chủ, bất kể nút đó có được nhấp hay không. Điều này làm cho việc sử dụng nó như một <button type="submit"> khó khăn và đau đớn.

<input type="submit"> mặt khác không có bất kỳ vấn đề về giá trị hoặc phát hiện nào, nhưng bạn không thể, tuy nhiên, thêm HTML giống như bạn có thể <button>. Nó cũng khó hơn để tạo kiểu và kiểu dáng không phải lúc nào cũng phản hồi tốt trên tất cả các trình duyệt. Hy vọng điều này đã giúp.


6
2018-06-27 22:51