Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng HTML DOM Form

Đối tượng HTML DOM Form được liên kết với phần tử HTML

. Chúng ta có thể tạo và truy cập một phần tử biểu mẫu bằng cách sử dụng phương thức createElement () và getElementById () của đối tượng tài liệu. Chúng ta có thể đặt các thuộc tính khác nhau của đối tượng biểu mẫu và cũng có thể lấy chúng.

Thuộc tính

Sau đây là các thuộc tính đối tượng Biểu mẫu -

Thuộc tính Mô tả
acceptCharset Để đặt hoặc trả về giá trị thuộc tính bộ ký tự chấp nhận trong một biểu mẫu.
Hành động Để đặt hoặc trả về giá trị thuộc tính hành động của biểu mẫu
Tự động hoàn thành Để đặt hoặc trả về giá trị thuộc tính tự động điền của biểu mẫu.
Mã hóa Nó chỉ là một bí danh của enctype.
Enctype Để đặt hoặc trả về giá trị thuộc tính enctype của biểu mẫu.
Chiều dài Để trả về có bao nhiêu phần tử trong biểu mẫu.
Phương pháp Để đặt hoặc trả về giá trị thuộc tính phương thức của biểu mẫu.
Tên Để đặt hoặc trả về giá trị thuộc tính tên của biểu mẫu.
noValidate Để đặt hoặc trả về liệu dữ liệu biểu mẫu có được xác thực hay không, khi người dùng gửi.
Mục tiêu Để đặt hoặc trả về giá trị thuộc tính đích của biểu mẫu.

Phương pháp

Sau đây là các phương thức đối tượng biểu mẫu -

Phương pháp Mô tả
reset () Để đặt lại biểu mẫu.
submit () Để gửi biểu mẫu.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ về đối tượng biểu mẫu DOM HTML -

<!DOCTYPE html>
<html>
<head>
<script>
   function CreateForm() {
      var f = document.createElement("FORM");
      document.body.appendChild(f);
      var i = document.createElement("INPUT");
      i.setAttribute("type", "password");
      f.appendChild(i);
   }
</script>
</head>
<body>
<h1>Form object example</h1>
<p>Create a FORM element containing an input element by clicking the below button</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>

Điều này sẽ tạo ra kết quả sau -

Đối tượng HTML DOM Form

Khi nhấp vào nút TẠO và viết nội dung nào đó vào trường nhập -

Đối tượng HTML DOM Form

Trong ví dụ trên -

Chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức createForm () khi được người dùng nhấp vào -

<button onclick="CreateForm()">CREATE</button>

Phương thức CreateForm () tạo một phần tử bằng cách sử dụng phương thức createElement () của đối tượng tài liệu và gán nó cho biến f. Sau đó, phần tử biểu mẫu được nối vào thân tài liệu bằng phương thức appendChild (). Sau đó, chúng tôi tạo một phần tử đầu vào bằng phương thức createElement () và một thuộc tính kiểu có giá trị "mật khẩu" cho nó bằng phương thức setAttribute ().

Phương thức setAttribute () tạo một thuộc tính nếu thuộc tính trước đó không tồn tại. Cuối cùng, sử dụng phương thức appendChild () trên phần tử biểu mẫu và chuyển phần tử đầu vào làm tham số, chúng tôi thêm phần tử đầu vào làm phần tử con của phần tử biểu mẫu -

<button onclick="CreateForm()">CREATE</button>