Code HTML của thẻ <button> không đơn giản như bạn nghĩ

Là một frontend developer chắc hẳn bạn không còn lạ lẫm với thẻ <button>. Thường thì mọi người đều biết rằng code HTML dành cho thẻ <button> như sau:

<button>Gửi</button>

Tuy nhiên bạn có biết rằng thẻ <button> còn có thuộc tính type?

Thuộc Tính type Của Phần Tử <button>

Hãy xem một ví dụ khác dưới đây:

<form action="/..." method="POST">
    <p><input type="text" name="full_name></p>
    <button>Just Click!</button>
    <button type="reset">Đặt Lại</button>
    <button type="submit">Gửi</button>
    <button type="button">Just Click!</button>
</form>

Với đoạn code HTMl như trên thì 3 thẻ <button> trình duyệt sẽ xử lý như thế nào nếu người dùng click vào từng phần tử ứng với mỗi thẻ?

Câu trả lời là với phần tử button đầu tiên và thứ 3 thì trình duyệt sẽ gửi form dữ liệu lên server và với phần tử thứ 2 thì trình duyệt sẽ đặt lại dữ liệu của phần tử input về trạng thái ban đầu. Với phần tử cuối cùng thì không có bất cứ hành động nào xảy ra.

Câu hỏi đặt ra ở đây đó là nếu trình duyệt xử lý giống nhau đối với trường hợp người dùng click vào phần tử button thứ nhất hoặc thứ 3 thì tại sao cần sử dụng type="submit"? Thêm một câu hỏi khác đó là thuộc tính type="button" dùng làm gì nếu như không có hành động xảy ra sau khi người dùng click vào?

Đó là bởi vì việc sử dụng thuộc tính type trong thẻ <button> sẽ giúp chúng ta phân biệt được mục đích của thẻ đó.

Ví dụ với thẻ <button type="submit"> chúng ta biết rằng mục đích của thẻ này dùng để submit dữ liệu của form.

Ngược lại chúng ta sẽ thường thêm code JavaScript trong trường thẻ <button> có thuộc tính type="button" hoặc không sử dụng thuộc tính này. Điều này sẽ giúp chúng ta có thể tuỳ biến tác vụ trình duyệt sẽ thực hiện khi người dùng click vào button.

Hãy cùng tham khảo thêm một ví dụ khác như sau:

<form action="/..." method="POST">
    <p><input type="text" name="full_name"></p>
    <button onClick="alert('Hello 1')">Just Click!<button>
    <button type="button" onClick="alert('Hello 2')">Just Click!<button>
</form>

Trường hợp này khi người dùng click vào bất cứ button nào thì trình duyệt cũng sẽ không thực hiện hành động gửi dữ liệu của form tới server mà thay vào đó sẽ hiển thị một hộp thoại cảnh báo.

Kết Luận

Mặc dù trong phần lớn các trường hợp bạn không cần sử dụng thuộc tính type cho thẻ <button>. Tuy nhiên lời khuyên ở đây đó là bạn nên sử dụng thuộc tính type trong các thẻ <button> vì điều này sẽ giúp các lập trình viên khác dễ dàng nhận biết được thẻ <button> được dùng với mục đích gì.