Tài liệu HTML chạy trực tiếp: Nút

Q: Làm sao tạo một nút trong HTML?

Viết Click me . Chữ giữa hai thẻ là nhãn của nút. Thêm một trình nghe sự kiện click bằng JavaScript để nút làm gì đó, hoặc đặt nó trong một với type="submit" để gửi form.

Q: Type mặc định của nút HTML là gì?

submit. Một không có thuộc tính type nằm trong form sẽ gửi form đó khi được nhấp, đó là lý do một nút bình thường trong form có thể làm tải lại trang. Hãy viết type="button" cho mọi nút chạy JavaScript.

Q: button và input type=submit khác nhau thế nào?

Cả hai đều gửi form. có thể chứa HTML (một biểu tượng, chữ đậm) giữa hai thẻ, còn lấy nhãn từ thuộc tính value và chỉ chứa được chữ thuần. Hầu hết code hiện đại dùng .

Q: Làm sao vô hiệu hóa một nút trong HTML?

Thêm thuộc tính disabled: Save . Nút bị vô hiệu hóa không nhấp hay focus được, và name, value của nó không được gửi cùng form. Xóa thuộc tính (btn.disabled = false trong JavaScript) để bật lại.

Q: Làm sao để nút HTML dẫn sang trang khác?

Dùng một link được định dạng như nút: See pricing . dành cho các thao tác trên trang hiện tại. Bọc nút trong là HTML không hợp lệ.

Q: Tại sao nút của tôi làm tải lại trang?

Nút nằm trong một và không có type, nên nó là nút submit và trình duyệt gửi form rồi tải phản hồi. Hãy thêm type="button" cho nút, hoặc gọi event.preventDefault() trong một trình nghe submit nếu bạn xử lý form bằng JavaScript.

Nút trong HTML: các type, submit, disabled và định dạng

Cách tạo nút trong HTML bằng phần tử <button>: ba type (submit, button, reset), gửi giá trị cùng form, nút bị vô hiệu hóa, nút có biểu tượng, và định dạng bằng CSS mà vẫn giữ vòng focus.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Cách tạo nút trong HTML

Nút là phần tử <button>. Nội dung giữa hai thẻ là thứ người dùng nhìn thấy, và type="button" cho biết nút chạy script của bạn thay vì gửi form. Nhấp thử trong khung xem trước:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

Một nút hoạt động chỉ cần vậy: một nhãn, một type và thứ gì đó lắng nghe sự kiện click. Trình duyệt cho nút nhận focus bằng bàn phím và kích hoạt nó bằng Enter hoặc Space, nên người dùng bàn phím có sẵn mọi thứ. Một <div> có trình xử lý click thì không có gì trong số đó.

Bạn cũng có thể gặp onclick="..." viết thẳng trong thẻ. Cách đó chạy được, nhưng addEventListener giữ script tách khỏi markup và cho nhiều trình nghe dùng chung một nút.

Ba type của nút

Thuộc tính type quyết định nút làm gì khi được nhấn.

`type`	Tác dụng	Dùng cho
`submit`	Gửi form chứa nó. Đây là giá trị mặc định.	Thao tác chính của form
`button`	Tự nó không làm gì; JavaScript của bạn quyết định	Bật tắt, hộp thoại, bộ đếm, mọi thứ chạy bằng script
`reset`	Đưa mọi trường của form về giá trị ban đầu	Hiếm khi; người dùng hay bấm nhầm

Gõ gì đó rồi thử từng nút. Khung xem trước không rời trang khi form được gửi; nó hiển thị dữ liệu mà form lẽ ra đã gửi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset khôi phục giá trị viết trong HTML (Ada), không phải một trường trống. Và nếu bạn xóa type="button" khỏi nút Uppercase, nó trở thành nút submit: nó viết hoa tên rồi gửi form.

Nút submit trong HTML: gửi name và value

Một nút submit có thể mang name và value riêng. Chúng chỉ được gửi cùng form khi chính nút đó là nút gửi form, nên hai nút có thể dùng chung một form và cho máy chủ biết thao tác nào được chọn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Nhấn Publish và form gửi title=My first post và action=publish. Xóa tiêu đề rồi nhấn một trong hai nút: required chặn việc gửi và trình duyệt hiện thông báo của riêng nó. Nhấn Enter trong ô văn bản cũng gửi form, và trình duyệt coi đó là nhấn nút submit đầu tiên, nên nó gửi action=draft.

Nút submit còn nhận các thuộc tính ghi đè form cho riêng nút đó: formaction (một URL khác), formmethod, formtarget và formnovalidate, thuộc tính bỏ qua bước kiểm tra hợp lệ. formnovalidate là lựa chọn thường gặp cho nút "Lưu nháp", nút cần hoạt động cả khi các trường bắt buộc còn trống.

Một nút nằm ngoài form vẫn gửi được form đó bằng thuộc tính form, nhận id của form: <button type="submit" form="signup">Sign up</button>.

Nút bị vô hiệu hóa

Thuộc tính disabled tắt một nút. Nút bị vô hiệu hóa bỏ qua cú nhấp, bị Tab bỏ qua và không được gửi cùng form. Trình duyệt cũng làm nó xám đi. Một cách làm phổ biến là giữ nút submit ở trạng thái vô hiệu hóa cho tới khi một điều kiện được đáp ứng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

Trong JavaScript, button.disabled là một thuộc tính boolean: đặt nó là true hoặc false. Trong HTML, chỉ cần thuộc tính có mặt là đủ, nên disabled="false" vẫn vô hiệu hóa nút.

Nút bị vô hiệu hóa không cho biết vì sao nó bị tắt, và người dùng bàn phím hay trình đọc màn hình di chuyển bằng Tab không bao giờ tới được nó. Khi lý do không hiển nhiên, hãy ghi rõ bằng chữ cạnh nút, hoặc để nút bật và hiện thông báo lỗi khi được nhấn.

Định dạng nút bằng CSS

Trình duyệt vẽ nút với phông chữ, viền và nền riêng. Đặt vài thuộc tính là thay được tất cả. Hãy giữ kiểu focus nhìn thấy được: đó là cách người dùng bàn phím biết mình đang ở đâu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

Tác dụng của từng quy tắc:

font: inherit cho nút dùng phông chữ của trang. Không có nó, nút dùng phông chữ form nhỏ hơn của trình duyệt (13.33px trên Chrome và Firefox).
cursor: pointer hiện con trỏ hình bàn tay. Mặc định nút hiện mũi tên bình thường.
:hover, :active và :focus-visible định dạng các trạng thái rê chuột, nhấn và focus bàn phím. :focus-visible hiện vòng focus khi dùng bàn phím nhưng không hiện sau cú nhấp chuột, nên bạn không cần xóa outline để tránh nó.
:disabled nhắm tới các nút có thuộc tính disabled.

Nhấn Tab trong khung xem trước để thấy vòng focus màu hổ phách di chuyển giữa hai nút đầu. Nút bị vô hiệu hóa bị bỏ qua. (Trên Mac, Safari và Firefox chỉ Tab tới nút khi bật điều hướng bằng bàn phím trong cài đặt hệ thống; trên Safari, Option+Tab hoạt động mà không cần bật.) Danh sách đầy đủ các trạng thái có ở trang CSS hover.

Nút có biểu tượng

Vì <button> chứa được HTML, biểu tượng nằm bên trong cạnh chữ. Nút chỉ có biểu tượng thì không có chữ nào để trình đọc màn hình đọc, nên hãy thêm aria-label cho nó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" trên SVG giữ nó ngoài cây trợ năng, nên nút đầu được đọc là "Add item, button" và nút thứ hai là "Delete, button".

button và input type="submit"

<input type="submit"> là cách viết nút submit cũ hơn. Cả hai gửi form theo cùng một cách; khác biệt là thứ chúng chứa được.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Nhãn	Nội dung giữa hai thẻ	Thuộc tính `value`
Chứa được biểu tượng hoặc markup	Có	Không
Thẻ đóng	Bắt buộc	Không có (phần tử rỗng)
Type mặc định	`submit`	Luôn là submit

Hãy dùng <button>. Lý do duy nhất để giữ <input type="submit"> là CSS hoặc JavaScript có sẵn đang chọn nó. Ngoài ra còn có <input type="button"> và <input type="reset">, cùng ý tưởng cho hai type còn lại.

Nút hay link?

Nút làm một việc trên trang hiện tại: gửi, mở, bật tắt, xóa. Link đi tới một URL khác. Nếu nhấp vào làm đổi thanh địa chỉ, nó nên là <a href>, được định dạng như nút nếu thiết kế cần. Cách làm đó, và vì sao đặt nút trong link là không hợp lệ, có ở trang nút link HTML.

Khả năng tiếp cận

Dùng <button> thật. Nó nhận focus được, hoạt động với Enter và Space, và được đọc là nút. Làm lại điều đó trên một <div> cần role, tabindex và trình xử lý phím, mà thường vẫn chưa đủ.
Mọi nút đều cần một tên: chữ của nó, hoặc aria-label khi nó chỉ có biểu tượng.
Giữ kiểu focus nhìn thấy được. outline: none mà không có gì thay thế sẽ khiến người dùng bàn phím lạc lối.
Làm vùng nhấp đủ lớn. WCAG 2.2 yêu cầu ít nhất 24 x 24 pixel CSS; padding như ví dụ định dạng ở trên cho chiều cao khoảng 40 pixel.
Với nút bật tắt, thêm aria-pressed="true" hoặc "false" và cập nhật khi trạng thái thay đổi.

Lỗi thường gặp

Nút trong form không có type. Nó gửi form. Hãy viết type="button" trên mọi nút không dùng để gửi.
Bọc nút trong link, <a href="/x"><button>Go</button></a>. Đó là HTML không hợp lệ và mỗi trình duyệt xử lý một kiểu. Hãy dùng một phần tử: link được định dạng như nút.
Dùng <div onclick> làm nút. Không thể tới nó bằng bàn phím.
Xóa viền focus mà không thêm kiểu :focus-visible.
Viết disabled="false" và mong nút được bật. Hãy xóa thuộc tính.
Quên font: inherit rồi thắc mắc vì sao nút dùng phông chữ khác với phần còn lại của trang.

Câu hỏi thường gặp

Làm sao tạo một nút trong HTML?

Viết <button type="button">Click me</button>. Chữ giữa hai thẻ là nhãn của nút. Thêm một trình nghe sự kiện click bằng JavaScript để nút làm gì đó, hoặc đặt nó trong một <form> với type="submit" để gửi form.

Type mặc định của nút HTML là gì?

submit. Một <button> không có thuộc tính type nằm trong form sẽ gửi form đó khi được nhấp, đó là lý do một nút bình thường trong form có thể làm tải lại trang. Hãy viết type="button" cho mọi nút chạy JavaScript.

button và input type=submit khác nhau thế nào?

Cả hai đều gửi form. <button> có thể chứa HTML (một biểu tượng, chữ đậm) giữa hai thẻ, còn <input type="submit"> lấy nhãn từ thuộc tính value và chỉ chứa được chữ thuần. Hầu hết code hiện đại dùng <button>.

Làm sao vô hiệu hóa một nút trong HTML?

Thêm thuộc tính disabled: <button disabled>Save</button>. Nút bị vô hiệu hóa không nhấp hay focus được, và name, value của nó không được gửi cùng form. Xóa thuộc tính (btn.disabled = false trong JavaScript) để bật lại.

Làm sao để nút HTML dẫn sang trang khác?

Dùng một link được định dạng như nút: <a href="/pricing" class="btn">See pricing</a>. <button> dành cho các thao tác trên trang hiện tại. Bọc nút trong <a> là HTML không hợp lệ.

Tại sao nút của tôi làm tải lại trang?

Nút nằm trong một <form> và không có type, nên nó là nút submit và trình duyệt gửi form rồi tải phản hồi. Hãy thêm type="button" cho nút, hoặc gọi event.preventDefault() trong một trình nghe submit nếu bạn xử lý form bằng JavaScript.

Khái niệm liên quan