Thẻ - HTML

Thẻ <button> được dùng để tạo nút bấm.

<button type="button">Click me!</button>

Khi hiển thị trên trình duyệt thì đoạn mã trên sẽ tạo ra một nút bấm tương tự như sau:

Khi rê chuột nên trình duyệt bạn sẽ thấy biểu tượng của con trỏ chuột lúc này chuyển từ dấu mũi tên sang hình bàn tay có ngón trỏ hướng vào nút bấm.

Thuộc Tính type

Thuộc tính type dùng để xác định kiểu của nút bấm.

Thuộc tính type có thể nhận một trong ba giá trị button, submit hoặc reset.

<button type="button|submit|reset"></button>

Tương ứng với mỗi giá trị là các kiểu nút bấm khác nhau:

• Kiểu button: Kiểu này được dùng để tạo nút bấm thông thường.
• Kiểu submit: Kiểu này được dùng để tạo nút bấm gửi dữ liệu trong một form biểu mẫu. Khi người dùng nhấp vào nút bấm kiểu này trình duyệt sẽ thực hiện việc gửi dữ liệu của form biểu mẫu.
• Kiểu reset: Kiểu này được dùng để tạo nút bấm đặt lại dữ liệu của các trường trong một form biểu mẫu. Khi người dùng nhấp vào nút bấm kiểu này trình duyệt sẽ thực hiện việc đặt lại dữ liệu các trường có trong form biểu mẫu.

Ví dụ dưới đây tạo ra ba nút bấm với các kiểu khác nhau và được đặt trong cùng một biểu mẫu:

<form method="POST" action="index.php">
    <p>Họ: <input name="first_name"></p>
    <p>Tên: <input name="last_name"></p>
    <p>
        <button type="button">Nút bấm thường</button>
        <button type="submit">Nút bấm gửi</button>
        <button type="reset">Nút bấm đặt lại</button>
    </p>
</form>

Khi hiển thị đoạn mã trên trên trình duyệt và nhấp vào mỗi nút bấm bạn sẽ thấy sự khác biệt giữa từng loại.

Bạn cũng nên hạn chế sử dụng nút bấm theo kiểu submit vì khi sử dụng kiểu này trong form biểu mẫu thì các trình duyệt sẽ gửi dữ liệu theo các cách không giống nhau. Thay vào đó chúng ta nên sử dụng thẻ <input>:

<form method="POST" action="index.php">
    <p>Họ: <input name="first_name"></p>
    <p>Tên: <input name="last_name"></p>
    <p><input type="submit" value="Gửi"></p>
</form>