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

Question

Không có câu hỏi ngu ngốc như vậy, vậy ở đây chúng ta đi: Sự khác biệt giữa <input type='button' /> và <input type='submit' /> là gì?

Answer 1

<input type="button" /> nút sẽ không gửi biểu mẫu - chúng không làm bất kỳ điều gì theo mặc định. Chúng thường được sử dụng kết hợp với JavaScript như là một phần của ứng dụng AJAX.

<input type="submit"> nút sẽ gửi biểu mẫu mà họ đang sử dụng khi người dùng nhấp vào chúng, trừ khi bạn chỉ định bằng JavaScript khác.

Answer 2

Nút 'chỉ là một nút, mà bạn có thể thêm chức năng bổ sung bằng Javascript. Loại đầu vào 'gửi' có chức năng mặc định của việc gửi biểu mẫu mà nó được đặt vào (mặc dù, tất nhiên, bạn vẫn có thể thêm chức năng bổ sung bằng cách sử dụng Javascript).

Answer 3

Nút sẽ không tự gửi biểu mẫu.Đó là nút đơn giản được sử dụng để thực hiện một số thao tác bằng cách sử dụng javascript trong khi Submit là một loại nút theo mặc định gửi biểu mẫu bất cứ khi nào người dùng nhấp vào nút gửi.

Answer 4

IE 8 thực sự sử dụng nút đầu tiên mà nó gặp phải khi gửi hoặc nút. Thay vì dễ dàng chỉ ra đó là mong muốn bằng cách làm cho nó một loại đầu vào = trình đơn đặt hàng trên trang thực sự là đáng kể.

Answer 5

<input type="button"> có thể được sử dụng ở mọi nơi, không chỉ trong biểu mẫu và chúng không gửi biểu mẫu nếu chúng ở trong một. Phù hợp hơn nhiều với Javascript.

<input type="submit"> chỉ nên được sử dụng trong biểu mẫu và chúng sẽ gửi yêu cầu (GET hoặc POST) tới URL được chỉ định. Họ nên không phải được đặt ở bất kỳ vị trí HTML nào.

Answer 6

W3C làm cho nó rõ ràng, trên đặc tả về yếu tố Nút

nút có thể được xem như là một lớp chung cho tất cả các loại Buttons không có hành vi mặc định.

W3C

Answer 7

Cũng cần phải nói rằng một tên đầu vào của type = "submit" sẽ được cũng nộp cùng với các lĩnh vực tên các hình thức khác trong khi một input type = "button" tên sẽ không.

Với Nói cách khác, trong ví dụ dưới đây, tên đầu vào name=button1SẼ KHÔNG được đệ trình trong khi đầu vào tên name=submit1SẼ được đệ trình.

dạng HTML mẫu (index.html):

<form action="checkout.php" method="POST"> 

    <!-- this won't get submitted despite being named --> 
    <input type="button" name="button1" value="a button"> 

    <!-- this one does; so the input's TYPE is important! --> 
    <input type="submit" name="submit1" value="a submit button"> 

</form> 

Các kịch bản PHP (checkout.php) mà xử lý hành động theo hình thức nêu trên của:

<?php var_dump($_POST); ?> 

thử nghiệm trên trên máy tính cục bộ của bạn bằng cách tạo hai tệp trong thư mục có tên/tmp/test/sau đó chạy máy chủ web PHP được tích hợp từ shell:

php -S localhost:3000 -t /tmp/test/ 

Mở trình duyệt của bạn tại http://localhost:3000 và tự mình xem.

Người ta sẽ tự hỏi tại sao chúng ta cần phải gửi một nút được đặt tên? Nó phụ thuộc vào kịch bản back-end. Ví dụ: plugin WooCommerce WordPress sẽ không xử lý trang Checkout được đăng trừ khi nút được đặt tên là Place Order. Nếu bạn thay đổi loại hình này từ , hãy gửi đến nút thì nút này sẽ không được gửi và do đó biểu mẫu Checkout sẽ không bao giờ được xử lý.

Đây có thể là một chi tiết nhỏ nhưng bạn biết đấy, ma quỷ ở trong chi tiết.

Answer 8

type='Submit' được đặt để chuyển tiếp & nhận các giá trị trên BACK-END (PHP, .NET, v.v.). type='button' sẽ phản ánh hành vi nút bình thường.