Thẻ Button trong HTML: Hướng dẫn A-Z, Cú pháp & Ví dụ

Khi thiết kế web, việc tạo ra các nút bấm tương tác là cực kỳ quan trọng. Thẻ button trong HTML chính là công cụ mạnh mẽ giúp bạn làm điều đó một cách dễ dàng. Trong bài viết này, Da I Kin sẽ cùng bạn tìm hiểu chi tiết từ cú pháp cơ bản, các thuộc tính quan trọng, cho đến những ví dụ thực tế. Hãy cùng bắt đầu để tạo ra những nút bấm thật chuyên nghiệp cho trang web của bạn nhé!

Thẻ button trong HTML là gì?

Thẻ <button> trong HTML được dùng để tạo ra một nút bấm có thể nhấp được trên trang web. Khi người dùng tương tác với nút này, một hành động cụ thể sẽ được kích hoạt, chẳng hạn như gửi đi một biểu mẫu (form), xóa dữ liệu đã nhập, hoặc thực thi một đoạn mã JavaScript.

Công dụng chính và tại sao nên dùng thẻ button?

Thẻ <button> không chỉ là một khối vuông có thể nhấp vào. Nó là một yếu tố giao diện cực kỳ quan trọng, đóng vai trò cầu nối giữa người dùng và trang web. Bạn nên sử dụng nó vì những lý do sau:

Rõ ràng về mặt ngữ nghĩa: Sử dụng <button> cho các hành động (như ‘Đăng ký’, ‘Gửi’, ‘Xóa’) giúp các công cụ tìm kiếm và trình duyệt hiểu rõ hơn về cấu trúc trang web của bạn. Điều này tốt hơn nhiều so với việc dùng một thẻ <div> và thêm JavaScript để bắt chước hành vi của một nút bấm.
Tính linh hoạt cao: Bên trong thẻ <button>, bạn có thể đặt nhiều loại nội dung khác nhau, không chỉ là văn bản. Bạn có thể thêm icon, hình ảnh, và các thẻ HTML khác để tạo ra những nút bấm sinh động và đẹp mắt.
Hỗ trợ tốt cho Form: Thẻ button hoạt động một cách tự nhiên bên trong các biểu mẫu HTML, giúp việc gửi và xử lý dữ liệu trở nên dễ dàng.

Cú pháp cơ bản để tạo một nút trong HTML

Cách tạo nút bấm trong HTML cực kỳ đơn giản. Bạn chỉ cần sử dụng cặp thẻ <button> và </button>. Nội dung nằm giữa hai thẻ này sẽ được hiển thị trên nút bấm.

Cú pháp:

<button>Nội dung của nút</button>

Ví dụ, để tạo một nút bấm có chữ ‘Nhấp vào tôi’, bạn chỉ cần viết:

<button>Nhấp vào tôi</button>

Dễ phải không nào? Bây giờ, chúng ta hãy tìm hiểu sâu hơn về các ‘siêu năng lực’ ẩn sau thẻ này nhé.

Phân tích các thuộc tính quan trọng của thẻ button

Để thẻ <button> thực sự hữu ích, chúng ta cần dùng đến các thuộc tính của thẻ button. Hãy xem chúng như những ‘tùy chỉnh’ giúp nút bấm của bạn hoạt động chính xác theo ý muốn. Dưới đây là những thuộc tính quan trọng nhất mà bạn cần nắm vững.

Thuộc tính type

Thuộc tính type quyết định hành vi mặc định của nút khi được nhấp vào. Đây là thuộc tính quan trọng nhất bạn cần hiểu. Nó có ba giá trị chính:

type="submit": Đây là giá trị mặc định. Khi người dùng nhấp vào nút này, nó sẽ gửi dữ liệu của form chứa nó đến máy chủ. Nếu bạn muốn tạo một nút ‘Gửi thông tin’ hay ‘Đăng nhập’, hãy dùng thẻ button type submit.
type="reset": Khi được nhấp, nút này sẽ xóa toàn bộ dữ liệu người dùng đã nhập trong form và trả các trường về giá trị ban đầu. Rất hữu ích cho nút ‘Nhập lại’ hoặc ‘Xóa form’.
type="button": Loại nút này không có hành vi mặc định nào cả. Nó chỉ là một nút bấm thuần túy. Bạn thường dùng nó kết hợp với JavaScript để gán cho nó một chức năng cụ thể, ví dụ như mở một cửa sổ pop-up hay ẩn/hiện một thành phần nào đó.

Lưu ý quan trọng: Nếu bạn tạo một thẻ <button> bên trong một <form> mà không khai báo type, trình duyệt sẽ tự động hiểu nó là type="submit". Điều này đôi khi gây ra lỗi không mong muốn, vì vậy hãy luôn khai báo type rõ ràng nhé!

Thuộc tính name và value

Khi một nút type="submit" được sử dụng để gửi form, thuộc tính name và value của nó cũng sẽ được gửi đi cùng. Điều này hữu ích khi bạn có nhiều nút submit trong cùng một form và cần biết người dùng đã nhấp vào nút nào.

name: Đặt tên cho nút bấm.
value: Gán một giá trị cho nút bấm đó.

Ví dụ:

<form action="/xu-ly-du-lieu" method="post">
  <label for="fname">Tên:</label>
  <input type="text" id="fname" name="fname">
  <button type="submit" name="hanhdong" value="luu">Lưu lại</button>
  <button type="submit" name="hanhdong" value="luu-va-thoat">Lưu & Thoát</button>
</form>

Khi người dùng nhấp vào nút ‘Lưu & Thoát’, dữ liệu gửi đi sẽ có cặp hanhdong=luu-va-thoat.

Thuộc tính disabled

Bạn muốn ngăn người dùng nhấp vào một nút cho đến khi họ hoàn thành một điều kiện nào đó (ví dụ: điền đủ thông tin)? Thuộc tính disabled sẽ giúp bạn. Đây là cách vô hiệu hóa button html.

Khi thêm thuộc tính này, nút bấm sẽ chuyển sang màu xám và không thể tương tác được.

<button type="submit" disabled>Gửi</button>

Các thuộc tính hữu ích khác

Ngoài những thuộc tính trên, thẻ <button> còn một vài ‘trợ thủ’ đắc lực khác:

autofocus: Khi trang được tải, con trỏ chuột sẽ tự động tập trung (focus) vào nút này. Hữu ích cho các hành động chính như nút ‘Đăng nhập’.
form: Cho phép bạn đặt nút bấm ở bất kỳ đâu trên trang, không nhất thiết phải nằm trong thẻ <form>, nhưng vẫn có thể điều khiển form đó. Bạn chỉ cần gán id của form cho thuộc tính này.

*Phân tích các thuộc tính quan trọng của thẻ*

So sánh chi tiết: Thẻ button và input type=”button”

Đây là một câu hỏi rất phổ biến: ‘Nên dùng <button> hay <input type="button">?’. Cả hai đều tạo ra nút bấm, nhưng chúng có những khác biệt cốt lõi. Hiểu rõ điều này sẽ giúp bạn đưa ra lựa chọn đúng đắn.

Điểm giống nhau

Cả <button>Nút</button> và <input type="button" value="Nút"> đều tạo ra một nút bấm trên giao diện người dùng. Về mặt chức năng cơ bản khi kết hợp với JavaScript, chúng có thể hoạt động tương tự nhau.

Sự khác biệt

Đây chính là điểm ăn tiền của thẻ <button>.

Thẻ <input>: Chỉ có thể hiển thị văn bản thuần túy thông qua thuộc tính value. Bạn không thể định dạng chữ (in đậm, in nghiêng) hay chèn thêm icon, hình ảnh vào bên trong nó.
Thẻ <button>: Cực kỳ linh hoạt. Bạn có thể đặt gần như mọi thẻ HTML khác vào bên trong nó. Điều này có nghĩa là bạn có thể tạo ra những nút bấm phức tạp và đẹp mắt hơn rất nhiều.

Thử tưởng tượng bạn muốn tạo một nút ‘Tải xuống’ có cả icon và văn bản:

Với <button> (Dễ dàng và đẹp):

<button>
  <i class="fa fa-download"></i> Tải xuống ngay
</button>

Với <input> (Không thể làm được): Bạn không có cách nào để chèn icon <i> vào bên trong một thẻ <input>.

Khi nào nên dùng button và khi nào dùng input?

Da I Kin có một lời khuyên đơn giản cho bạn:

Hãy ưu tiên sử dụng <button> trong hầu hết các trường hợp. Nó linh hoạt hơn, ngữ nghĩa tốt hơn, và dễ dàng tùy chỉnh giao diện hơn với CSS.
Chỉ sử dụng <input> khi bạn cần sự nhất quán với các trường input khác trong một form rất đơn giản, hoặc khi cần hỗ trợ các trình duyệt cực kỳ cũ (điều này ngày nay không còn là vấn đề lớn).

Các ví dụ thực tế về cách sử dụng thẻ button

Lý thuyết là vậy, nhưng cách tốt nhất để hiểu là qua các ví dụ thực tế. Hãy cùng Da I Kin xem qua một vài kịch bản sử dụng phổ biến của nút bấm html nhé.

Tạo nút Submit và Reset cho một Form HTML

Đây là ứng dụng cơ bản nhất. Trong một form liên hệ, bạn sẽ cần một nút để gửi thông tin và một nút để xóa những gì đã nhập.

<form action="/lien-he" method="post">
  <label for="hoten">Họ tên:</label><br>
  <input type="text" id="hoten" name="hoten"><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <!-- Nút gửi form -->
  <button type="submit">Gửi thông tin</button>

  <!-- Nút xóa dữ liệu đã nhập -->
  <button type="reset">Nhập lại</button>
</form>

Tạo nút bấm chứa icon và văn bản

Đây là lúc thẻ <button> tỏa sáng. Hãy xem cách tạo một nút ‘Đăng nhập bằng Google’ vừa có logo vừa có chữ. Giả sử bạn đang dùng một thư viện icon như Font Awesome.

<!-- Yêu cầu có thư viện Font Awesome -->
<style>
  .btn-google {
    background-color: #4285F4;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-google .fa-google {
    margin-right: 8px;
  }
</style>

<button class="btn-google">
  <i class="fa-brands fa-google"></i> Đăng nhập với Google
</button>

Làm thế nào để thêm một liên kết vào thẻ button?

Một câu hỏi thường gặp là ‘Làm sao để nút bấm hoạt động như một liên kết?’. Bạn không nên lồng thẻ <a> vào trong thẻ <button>. Cách đúng đắn và đơn giản nhất là sử dụng JavaScript.

Bạn có thể dùng sự kiện onclick cho button html để chuyển hướng người dùng đến một trang khác.

<!-- Cách 1: Dùng thuộc tính onclick trực tiếp -->
<button onclick="window.location.href='https://wiweb.vn';">
  Đến trang Da I Kin
</button>

<!-- Cách 2: Dùng form với thuộc tính formaction (chỉ hoạt động với type="submit") -->
<form>
    <button type="submit" formaction="https://wiweb.vn">Đi đến Da I Kin</button>
</form>

Cách đầu tiên sử dụng onclick là phổ biến và linh hoạt hơn cả.

*Các ví dụ thực tế về cách sử dụng thẻ button*

Tùy chỉnh và tương tác với thẻ button

Bạn đã nắm vững những kiến thức cơ bản. Giờ là lúc nâng cấp nút bấm của bạn từ ‘hoạt động được’ thành ‘vừa đẹp vừa thông minh’ bằng CSS và JavaScript.

Hướng dẫn style cho button đẹp hơn bằng CSS

Nút bấm mặc định của trình duyệt trông khá nhàm chán. Với CSS, bạn có thể biến hóa nó hoàn toàn. Dưới đây là một ví dụ về style css cho button để tạo ra một nút bấm hiện đại.

.custom-btn {
  background-color: #007bff; /* Màu nền */
  color: white; /* Màu chữ */
  border: none; /* Bỏ viền mặc định */
  padding: 12px 24px; /* Tăng khoảng đệm */
  text-align: center; /* Căn giữa chữ */
  font-size: 16px; /* Cỡ chữ */
  border-radius: 8px; /* Bo góc */
  cursor: pointer; /* Đổi con trỏ chuột khi di vào */
  transition: background-color 0.3s; /* Hiệu ứng chuyển màu mượt mà */
}

/* Hiệu ứng khi di chuột qua */
.custom-btn:hover {
  background-color: #0056b3;
}

Bây giờ, chỉ cần thêm class="custom-btn" vào thẻ button của bạn trong HTML:

<button class="custom-btn">Nút bấm siêu đẹp</button>

Xử lý sự kiện onclick với JavaScript

Thuộc tính onclick cho phép bạn thực thi một hàm JavaScript khi người dùng nhấp vào nút. Đây là chìa khóa để tạo ra các trang web có tính tương tác cao.

Ví dụ, chúng ta sẽ tạo một nút bấm, khi nhấp vào sẽ hiển thị một thông báo.

HTML:

<button id="myButton">Nhấn để xem thông báo</button>
<p id="message"></p>

JavaScript:

// Lấy phần tử nút bấm bằng ID của nó
const myButton = document.getElementById('myButton');

// Lấy phần tử đoạn văn để hiển thị thông báo
const messageElement = document.getElementById('message');

// Gán một hàm cho sự kiện onclick
myButton.onclick = function() {
  // Thay đổi nội dung của đoạn văn
  messageElement.textContent = 'Chào mừng bạn đến với Da I Kin!';
};

Với kỹ thuật này, bạn có thể tạo ra vô số tương tác thú vị cho trang web của mình.

*Nâng cao: Tùy chỉnh và tương tác với thẻ button*

Lời kết

Vậy là chúng ta đã cùng nhau tìm hiểu rất chi tiết về thẻ button trong HTML. Đây là một thành phần tuy nhỏ nhưng lại có vai trò cực kỳ quan trọng trong việc xây dựng giao diện người dùng thân thiện và hiệu quả.

Da I Kin hy vọng qua bài viết này, bạn đã nắm vững được:

Cú pháp và công dụng chính của thẻ <button>.
Cách sử dụng các thuộc tính quan trọng như type, name, value, và disabled.
Sự khác biệt rõ ràng giữa <button> và <input>, và biết khi nào nên chọn loại nào.
Cách tạo ra những nút bấm sinh động với icon, tùy chỉnh giao diện với CSS và thêm tương tác bằng JavaScript.

Luôn nhớ rằng, một nút bấm được thiết kế tốt không chỉ giúp người dùng dễ dàng thực hiện hành động mà còn góp phần nâng cao trải nghiệm tổng thể trên trang web của bạn.

Bạn có gặp khó khăn gì khi làm việc với thẻ button không? Hãy chia sẻ trong phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đối tác thiết kế website chuyên nghiệp để áp dụng những kiến thức này vào thực tế, đừng ngần ngại liên hệ với Da I Kin. Chúng tôi luôn sẵn sàng hỗ trợ bạn.

Thẻ Button trong HTML: Hướng dẫn A-Z, Cú pháp & Ví dụ