Thuộc tính loại Nút DOM HTML được liên kết với phần tử HTML
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính loại nút -
buttonObject.type = "submit|button|reset"
Ở đây, nút submit | button | reset là các giá trị loại nút. Gửi được đặt theo mặc định.
- Gửi - Đặt nút này thành nút gửi.
- Nút - Tạo một nút bấm bình thường có thể nhấp được.
- Đặt lại - Tạo nút đặt lại để đặt lại dữ liệu biểu mẫu.
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính loại nút HTML DOM -
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset
button";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi điền thông tin chi tiết và nhấp vào THAY ĐỔI -
Bây giờ nhấp vào Gửi (hiện đã được đặt lại) -
Trong ví dụ trên -
Đầu tiên, chúng tôi đã tạo hai trường văn bản và một nút có loại “gửi” sẽ gửi dữ liệu của chúng tôi -
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
Sau đó, chúng tôi đã tạo nút CHANGE sẽ thực thi phương thức changeType () khi nhấp chuột -
<button onclick="changeType()">CHANGE</button>
Phương thức changeType () nhận phần tử nút bằng cách sử dụng id của nó và đặt kiểu của nó để đặt lại. Sau đó, thông báo về sự thay đổi được phản ánh trong đoạn văn có mẫu "Id". Bây giờ khi bạn nhấp vào nút gửi, nó sẽ đặt lại, tức là xóa dữ liệu biểu mẫu thay vì gửi -
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}