Sự khác biệt giữa <input type = 'submit' /> và <button type = 'submit'> text </ button>

148

Có rất nhiều truyền thuyết về họ. Tôi muốn biết sự thật. Sự khác biệt giữa hai ví dụ sau đây là gì?

  1. <input type='submit' value='text' />

  2. <button type='submit'>text</button>

html  button 
— James
nguồn
29
Bạn có nghĩa <input type="submit">và <button type="submit">?
— kennytm
2
— Hakan Fıstık
1
inputlà một yếu tố trống. Không sử dụng <input />, chỉ sử dụng <input>.
— CDT
@ HakanFıstık, không phải là một dup đó, được ở đó, đó là một (nhiều hay ít tinh tế) một khác nhau, ví dụ như type=submitcho buttonthậm chí còn không phải là một mối quan tâm đó (có thể bởi vì nó không phải là ngay cả một phần của std. Trở lại sau đó (AFAIK), khi câu hỏi khác được hỏi).
— Sz.

Câu trả lời:

120

Không chắc chắn nơi bạn nhận được huyền thoại của bạn từ nhưng:

Nút gửi với <button>

Như với:

<button type="submit">(html content)</button>

IE6 sẽ gửi tất cả văn bản cho nút này giữa các thẻ, các trình duyệt khác sẽ chỉ gửi giá trị. Sử dụng <button>cho phép bạn tự do bố trí hơn so với thiết kế của nút. Trong tất cả ý định và mục đích của nó, ban đầu nó có vẻ xuất sắc, nhưng các trình duyệt khác nhau khiến nó khó sử dụng.

Trong ví dụ của bạn, IE6 sẽ gửi textđến máy chủ, trong khi hầu hết các trình duyệt khác sẽ không gửi gì. Để làm cho nó tương thích trình duyệt chéo, sử dụng <button type="submit" value="text">text</button>. Tốt hơn nữa: không sử dụng giá trị, bởi vì nếu bạn thêm HTML, nó trở nên khá khó khăn với những gì nhận được ở phía máy chủ. Thay vào đó, nếu bạn phải gửi một giá trị bổ sung, hãy sử dụng trường ẩn.

Nút có <input>

Như với:

<input type="button" />

Theo mặc định, điều này không có gì. Nó thậm chí sẽ không gửi biểu mẫu của bạn. Bạn chỉ có thể đặt văn bản trên nút và đặt kích thước và đường viền bằng CSS. Mục đích ban đầu (và hiện tại) của nó là thực thi một tập lệnh mà không cần phải gửi biểu mẫu đến máy chủ.

Nút gửi bình thường với <input>

Như với:

<input type="submit" />

Giống như trước đây, nhưng thực sự đệ trình các hình thức xung quanh.

Nút gửi hình ảnh với <input>

Như với:

<input type="image" />

Giống như trước đây (gửi), nó cũng sẽ gửi một biểu mẫu, nhưng bạn có thể sử dụng bất kỳ hình ảnh. Đây từng là cách ưa thích để sử dụng hình ảnh làm nút khi cần gửi biểu mẫu. Để kiểm soát nhiều hơn, <button>hiện đang được sử dụng. Điều này cũng có thể được sử dụng cho các bản đồ hình ảnh phía máy chủ nhưng ngày nay rất hiếm. Khi bạn sử dụng thuộc tính usemap-attribution và (có hoặc không có thuộc tính đó), trình duyệt sẽ gửi tọa độ X / Y của con trỏ chuột đến máy chủ (chính xác hơn là vị trí con trỏ chuột bên trong nút của thời điểm bạn nhấp vào nó). Nếu bạn bỏ qua các tính năng bổ sung này, thì không gì khác hơn là một nút gửi được ngụy trang dưới dạng hình ảnh.

Có một số khác biệt tinh tế giữa các trình duyệt, nhưng tất cả sẽ gửi thuộc tính value, ngoại trừ <button>thẻ như được giải thích ở trên.

— Abel
nguồn
1
Vì dù sao bạn cũng đã chỉnh sửa, nên quan điểm về IE6 vẫn đúng với IE11 ở chế độ quirks. (Một lý do khác để không sử dụng chế độ quirks). Đã sửa lỗi trong Edge. Ồ, và có nhiều khác biệt hơn giữa <input> và <button>: <input> có white-space:premặc định, <button> thì không. Điều này trở nên rõ ràng khi cố gắng làm cho một nút rộng hơn khung nhìn.
— Ông Lister
19

Với <button>, bạn có thể sử dụng thẻ img, v.v.

<button type='submit'> text -- can be img etc.  </button>

với <input>loại, bạn bị giới hạn trong văn bản

— Lấp lánh
nguồn
với <input type="image" />bạn không bị giới hạn trong văn bản và nó cũng thực hiện gửi.
— Abel
2
@Abel: đó là nhiều hơn để tạo một bản đồ hình ảnh mà lần lượt gửi vị trí con trỏ chuột name.xvà name.ycác tham số (lưu ý rằng nametham số không có mặt!). Tôi muốn sử dụng <input type="submit">với nền CSS nếu mục đích duy nhất là có một nút có hình nền.
— BalusC
@BalusC: Đúng, nhưng mục đích của nó là tại thời điểm viết tiêu chuẩn HTML 2.0, khi không có CSS, như được mô tả, để sử dụng hình ảnh làm nút hoặc làm bản đồ hình ảnh phía máy chủ. Nhưng thực tế, bạn có thể (ab) sử dụng một nút bình thường với hình nền để làm tương tự với CSS và HTML.
— Abel
@Abel: Đó chưa bao giờ là mục đích của input type="image". Cho rằng đó <button type="submit">là ý định.
— BalusC
1
@BalusC: có lẽ chúng tôi hiểu tiêu chuẩn khác nhau, nhưng đây là văn bản gốc của Lee cho tiêu chuẩn HTML 2.0: " TYPE=IMAGE' implies Xử lý TYPE = SUBMIT ', nghĩa là khi một pixel được chọn, toàn bộ biểu mẫu sẽ được gửi." . Làm cho nó những gì bạn nghĩ là mục đích thực sự :)
— Abel
1

Tóm tắt :

<input type="submit">

<button type="submit"> Submit </button>

Cả hai theo mặc định sẽ vẽ trực quan một nút thực hiện cùng một hành động (gửi biểu mẫu).

Tuy nhiên, nó được khuyến khích sử dụng <button type="submit">vì nó có ngữ nghĩa tốt hơn, hỗ trợ ARIA tốt hơn và dễ tạo kiểu hơn.

— Juanma Menendez
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.