Khi xem xét hầu hết các trang web (bao gồm SO), hầu hết chúng đều sử dụng:
<input type="button" />thay vì:
<button></button><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?Câu trả lời:
<button></button>)<button></button>(Gợi ý: IE6)Một vấn đề IE khác khi sử dụng <button />:
Và trong khi chúng ta đang nói về IE, nó có một vài lỗi liên quan đến độ rộng của các nút. Nó sẽ bí ẩn thêm phần đệm thêm khi bạn đang cố thêm kiểu, nghĩa là bạn phải thêm một bản hack nhỏ để kiểm soát mọi thứ.
<button />cũng có một formthuộ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 thân tài liệu.
Cũng như một ghi chú bên lề, <button>sẽ gửi ngầm, điều này có thể gây ra vấn đề nếu bạn muốn sử dụng một nút trong một biểu mẫu mà không gửi nó. Vì vậy, một lý do khác để sử dụng <input type="button">(hoặc <button type="button">)
Chỉnh sửa - thêm chi tiết
Không có một loại, buttonngầm nhận loạisubmit . Không quan trọng có bao nhiêu nút gửi hoặc đầu vào trong biểu mẫu, bất kỳ nút nào trong số chúng được gõ rõ ràng hoặc ngầm định là gửi, khi được nhấp, 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"
submitnhư mặc định khi 99,9% các hình thức có rất nhiều buttonvới một submit ?!
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 chức năng 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 các hàm hình ảnh giống và có thể giống với phần tử INPUT có loại được đặt thành hình ảnh hình ảnh, nhưng loại phần tử BUTTON cho phép nội dung.
Phần tử nút - W3C
Bên trong một <button>yếu tố 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 phần tử này và các nút được tạo với <input>phần tử.
<input />thực sự là một yếu tố trống, trong khi <button>thì không
Trích dẫn
Quan trọng: Nếu bạn sử dụng phần tử nút ở dạng 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>các thẻ, trong khi các trình duyệt khác sẽ gửi nội dung của thuộc tính value. Sử dụng phần tử đầu vào để tạo các nút ở dạng 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
Tôi sẽ trích dẫn bài viết Sự khác biệt giữa các neo, đầu vào và nút :
Các neo ( <a>phần tử) đại diện cho các 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 của bạn chuyển sang một trang mới hoặc tải xuống một tệp, sau đó sử dụng một neo.
Một đầ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 trong số chúng có một ý nghĩa, ví dụ " tập tin " được sử dụng để tải lên một tập tin, " đặt lại " sẽ xóa một biểu mẫu và " gửi " gửi dữ liệu đến máy chủ. Kiểm tra tham chiếu W3 trên MDN hoặc trên W3Schools .
Các nút ( <button>)phần tử là khá linh hoạt:
::beforevà ::aftercác phần tử giả;disabledthuộc tính. Điều này làm cho nó dễ dàng để bật và tắt chúng.Một lần nữa, hãy kiểm tra tham chiếu W3 cho <button>thẻ trên MDN hoặc trên W3Schools .
Trích dẫn Trang biểu mẫu trong hướng dẫn HTML:
Các nút được tạo bằng chức năng 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 các hàm hình ảnh giống 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.
Sử dụng nút từ phần tử đầu vào nếu bạn muốn tạo nút ở dạng. Và sử dụng thẻ nút nếu bạn muốn tạo nút cho một hành động.
<button>so với
<input type='button'>-
trong các trình duyệt hiện đại, cả hai phần tử đều có thể dễ dàng tạo kiểu với css nhưng trong hầu hết các trường hợp, buttonphần tử được ưa thích vì bạn có thể tạo kiểu nhiều hơn với các phần tử html và giả bên trong
Đối với kiểu dáng CSS có liên quan <button type="submit" class="Btn">Example</button>thì tốt hơn vì nó cung cấp cho bạn khả năng sử dụng các lớp CSS :beforevà :after giả có thể giúp ích.
Do <input type="button">hiển thị trực quan khác với một <a>hoặc <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.
Điều đáng chú ý là 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à vấn đề đáng lo ngại hiện nay vì vậy tính <button type="submit">Wins</button>nhất quán về kiểu dáng trong mắt tôi được đưa lên hàng đầu.
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 về các sự kiện 'nhấp chuột'. Về đầu vào, jQuery nhận thức được các sự kiện 'nhấp chuột', 'tập trung' và 'mờ'.
Bạn luôn có thể liên kết các sự kiện với các nút của mình khi cần, nhưng chỉ cần lưu ý rằng các sự kiện mà jQuery tự động biết là khác nhau. Ví dụ: nếu bạn đã tạo một chức năng được thực thi bất cứ khi nào có sự kiện 'tập trung' trên trang của bạn, một đầu vào sẽ kích hoạt chức năng nhưng một nút thì không.
<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 đúng thuộc tính giá trị, 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 bấm hay không. Điều này làm cho việc sử dụng nó như là 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 đề giá trị hoặc phát hiện nào, tuy nhiên, bạn không thể thêm HTML như bạn có thể làm với <button>. Kiểu dáng cũng khó hơn và kiểu dáng không phải lúc nào cũng đáp ứng tốt trên tất cả các trình duyệt. Hy vọng điều này sẽ giúp.
Tôi chỉ muốn thêm một cái gì đó vào phần còn lại của câu trả lời ở đây. Các phần tử đầu vào được coi là các phần tử rỗng hoặc rỗng (các phần tử trống khác là area, base, br, col, hr, img, input, link, meta và param. Bạn cũng có thể kiểm tra ở đây ), có nghĩa là chúng không thể có bất kỳ nội dung nào. Ngoài việc không có bất kỳ nội dung nào, các phần tử trống không thể có bất kỳ phần tử giả nào như :: after và :: before , mà tôi coi là một nhược điểm lớn.
Ngoài ra, một trong những khác biệt có thể đến từ nhà cung cấp thư viện và mã họ viết. ví dụ ở đây tôi đang sử dụng nền tảng cordova kết hợp với ui góc di động và trong khi các thẻ đầu vào / div / etc hoạt động tốt với ng-click, nút này có thể khiến trình gỡ lỗi Visual Studio gặp sự cố, chắc chắn là do sự khác biệt, do lập trình viên gây ra; lưu ý rằng câu trả lời của MattC chỉ ra cùng một vấn đề, jQuery chỉ là một lib và nhà cung cấp không nghĩ đến một số chức năng trên một yếu tố mà họ cung cấp cho một yếu tố khác. Vì vậy, khi bạn đang sử dụng một thư viện, bạn có thể phải đối mặt với một vấn đề với một yếu tố mà bạn sẽ không phải đối mặt với một yếu tố khác. và chỉ đơn giản là một cái phổ biến như input, hầu hết sẽ là cái cố định, chỉ vì nó phổ biến hơn.
Mặc dù đây là một câu hỏi rất cũ và có thể không còn phù hợp nữa, xin lưu ý rằng hầu hết các vấn đề mà <button>thẻ được sử dụng không còn tồn tại nữa và do đó rất nên sử dụng nó.
Trong trường hợp bạn không thể làm như vậy vì nhiều lý do, chỉ cần ghi nhớ để thêm thuộc tính vai trò = nút nút Khăn trong thẻ của bạn như khả năng truy cập. Bài viết này khá nhiều thông tin: https://www.deque.com/blog/accessible-aria-buttons/
<button>bây giờ?