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

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

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

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

Một "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 là gửi biểu mẫu được đặt trong đó (tuy nhiên, tất nhiên, bạn vẫn có thể thêm chức năng bổ sung bằng Javascript).

Nút sẽ không tự gửi biểu mẫu. Đây là một 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 Gửi là một loại nút mặc định gửi biểu mẫu mỗi khi người dùng nhấp vào nút gửi.

IE 8 thực sự sử dụng nút đầu tiên mà nó gặp phải trình hoặc nút. Thay vì dễ dàng chỉ ra cái nào mong muốn bằng cách biến nó thành kiểu đầu vào = gửi thứ tự trên trang thực sự quan trọng.

Cũng cần đề cập rằng một đầu vào có tên loại = "gửi" cũng sẽ được gửi cùng với các trường có tên của biểu mẫu khác trong khi một kiểu đầu vào có tên = "nút" sẽ không.

Nói cách khác, trong ví dụ dưới đây, đầu vào có tên name=button1 KHÔNG được gửi trong khi đầu vào có tên name=submit1 SILL được gửi.

Mẫu 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>

Tập lệnh PHP (checkout.php) xử lý hành động của biểu mẫu trên:

<?php var_dump($_POST); ?>

Kiểm tra phần trên trên máy 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 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. Chẳng hạn, plugin WooC Commerce WordPress sẽ không xử lý trang Checkout được đăng trừ khi Place Ordernút được đặt tên cũng được gửi. Nếu bạn thay đổi loại từ gửi sang 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ó lẽ là một chi tiết nhỏ nhưng bạn biết đấy, ma quỷ nằm trong các chi tiết.

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

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

W3C làm cho nó rõ ràng, về đặc điểm kỹ thuật về phần tử Nút

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

W3C

type='Submit'được đặt để chuyển tiếp và 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.