Tạo nút nhấn với HTML, nên sử dụng Anchor, Input hay Button?

Việc tạo nút nhấn với HTML là công việc hết sức đơn giản. Chúng ta có thể sử dụng thẻ anchor, button hoặc input đều được cả. Mặc dù trông chúng có vẻ khác biệt nhưng khi có sự nhúng tay của CSS thì mọi chuyện lại khác. Một trong những thứ khiến CSS trở nên lợi hại đó chính là cách nó biến một phần tử trong giống một phần tử khác. Điều này nghe thì có vẻ hết sức bình thường nhưng trong trường hợp oái oăm này thì lại khác. Đó là khi tôi cố tình trang trí thẻ anchor, thẻ button và thẻ input sao cho chúng trông giống như nhau. Ngoài ra, chúng còn có thể hành xử giống như nhau khi được click. Vậy nếu là bạn trong trường hợp này, bạn sẽ chọn sử dụng thẻ nào?

Tính ngữ nghĩa của thẻ (Semantic)

Đây là nội dung đầu tiên mà chúng ta nên đặc biệt chú ý đến bởi vì nó sẽ phản ánh chính xác ý nghĩa của nội dung. Sử dụng đúng thẻ và đúng ý nghĩa sẽ giúp cấu trúc nội dung trở nên rõ ràng. Từ đó, giúp cho trang web trở nên dễ sử dụng, thân thiện với các cỗ máy tìm kiếm vì nội dung dễ dàng tiếp cận, tốt cho SEO,…

Anchor

Anchor (thẻ a) thể hiện một Hyperlink, tức là một siêu liên kết hay gọi tắt là liên kết. Được sử dụng khi chúng ta muốn người dùng chuyển tới một trang tài liệu hoặc tải xuống tài nguyên nào đó trên trình duyệt.

Input

Input (thẻ input) thể hiện một trường dữ liệu (data field) bên trong form. Thuộc tính type sẽ giúp chúng ta định hình rõ trường dữ liệu đó là gì (input type). Một số input type thường thấy như là:

<input type="submit">: Đây là loại phổ biến nhất, nó thể hiện một nút submit trong form. Khi được click, dữ liệu của form sẽ được gửi đi.

<input type="image">: Tương tự như trên, cũng gửi dữ liệu của form khi được click. Tuy nhiên, chúng ta hoàn toàn có thể hiển thị nó như hình ảnh thông qua thuộc tính src.

<input type="reset">: Loại này đơn giản là tạo nút nhấn reset lại toàn bộ form.

<input type="button">: Loại này chỉ đơn giản là tạo nút nhấn thông thường. Người ta hay kết hợp với JavaScript để định nghĩa hành vi của nó.

Button

Button (thẻ button), như tên gọi nó thể hiện một nút nhấn. Nó có khả năng thực hiện y như những gì mà input đã được đề cập ở trên. Thế nhưng lại có khả năng tùy biến cao hơn input. Không giống như input, nhãn của button được xác định thông qua nội dung chứa bên trong. Như vậy có nghĩa là khi tạo nút nhấn bằng thẻ button, bạn hoàn toàn có thể chứa bên trong một button văn bản hay hình ảnh nếu muốn. Ngoài ra, thẻ button còn có pseudo-element ::after và ::before nên việc tùy biến với CSS lại trở nên mạnh mẽ hơn bao giờ hết.

Chưa hết đâu, thẻ button cũng có thuộc tính type. Với ba giá trị là button, reset và submit cho phép nó thực hiện hành vi tương tự như một input tương ứng. Nó cũng có thuộc tính disabled giúp chúng ta vô hiệu hóa khả năng của nó. Đây là một khả năng mà thẻ anchor hiện tại không thể đáp ứng nếu không có sự trợ giúp của JavaScript.

Vậy nên chọn cái nào để tạo nút nhấn?

Qua phần phân tích phía trên, không biết các bạn đã biết được nên sử dụng thẻ nào để thể hiện một nút nhấn hay chưa?
Nếu muốn chuyển người dùng đến một nơi nào đó (nội bộ bên trong trang, một trang mới hay một tài nguyên có thể tải xuống) hãy sử dụng anchor. Các trường hợp còn lại, việc sử dụng input hay button đều hợp lệ. Tuy nhiên, các bạn nên sử dụng button vì độ tùy biến cao của nó. Cá nhân tôi cũng thích sử dụng button hơn cũng chính vì điều điều này. Và một số các Front-end Framework cũng khuyến khích sử dụng nó thay thế cho input.

Có thể một số bạn sẽ nghĩ đến việc sử dụng thẻ anchor để làm nút nhấn. Bằng cách sử dụng thuộc tính href với giá trị #. Điều này không hề sai. Thế nhưng nếu không có sự trợ giúp của JavaScript, khả năng click của thẻ anchor vẫn còn. Lúc này bạn có thể gặp một số tình huống ngớ ngẫn khi click vào nó như là trang web sẽ bị “giật” về đầu trang.

Mong rằng thông qua bài viết này, các bạn đã có cái nhìn sâu sắc hơn về ba loại thẻ này cũng như cách sử dụng chúng sao cho hợp lý.