Thuộc tính type của Button trong HTML DOM liên quan đến phần tử HTML <button>. Phần tử button mặc định có type=“submit” (click bất kỳ nút nào trên form sẽ submit form). Thuộc tính button type thiết lập hoặc trả về loại nút bấm.
Cú pháp
Thiết lập thuộc tính button type
buttonObject.type = "submit|button|reset"
Ở đây, submit|button|reset là các giá trị loại nút. Submit là mặc định.
- Submit - Làm nút trở thành nút submit.
- Button - Làm nút bấm bình thường.
- Reset - Làm nút reset xóa dữ liệu form.
Ví dụ
Dưới đây là ví dụ về thuộc tính type của button HTML DOM:
<!DOCTYPE html> <html> <body> <form id="Form1" action="/sample.php"> <label>Tên: <input type="text" name="fname"><br><br></label> <label>Họ: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Gửi</button> </form> <p>Click nút bên dưới để thay đổi loại nút trên từ "submit" sang "reset".</p> <button onclick="changeType()">THAY ĐỔI</button> <p id="Sample"></p> <script> function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "Nút Gửi hiện là nút reset "; } </script> </body> </html>
Kết quả
Ví dụ này sẽ cho kết quả sau:
Sau khi điền thông tin và click THAY ĐỔI:
Bây giờ click vào Gửi (bây giờ là reset):
Giải thích ví dụ:
Tạo hai trường text và nút type “submit” để submit dữ liệu:
<label>Tên: <input type="text" name="fname"><br><br></label> <label>Họ: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Gửi</button>
Nút THAY ĐỔI thực thi changeType() khi click:
<button onclick="changeType()">THAY ĐỔI</button>
changeType() lấy nút bằng id, đặt type thành reset. Thông báo hiển thị trong đoạn văn id “Sample”. Bây giờ click nút Gửi sẽ reset (xóa form) thay vì submit:
function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "Nút Gửi hiện là nút reset"; }