HTML DOM Tên biểu mẫu Thuộc tính

Thuộc tính HTML DOM Form name được liên kết với thuộc tính name của phần tử biểu mẫu. Thuộc tính tên biểu mẫu được sử dụng để đặt hoặc nhận giá trị thuộc tính tên biểu mẫu. Thuộc tính tên biểu mẫu cung cấp tên cho biểu mẫu.

Cú pháp

Sau đây là cú pháp cho -

Đặt tên biểu mẫu -

formObject.name = name

Ở đây, tên chỉ định tên của biểu mẫu.

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ về thuộc tính Tên biểu mẫu -

<!DOCTYPE html>
<html>
<head>
<style>
   form {
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function ChangeName() {
      document.getElementById("FORM1").name="FORM_2";
      document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
   }
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the name of the form above by clicking the below button</p>
<button onclick="ChangeName()">Change Name</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

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

HTML DOM Tên biểu mẫu Thuộc tính

Khi nhấp vào nút “Thay đổi tên” -

HTML DOM Tên biểu mẫu Thuộc tính

Trong ví dụ trên

Trước tiên, chúng tôi đã tạo một biểu mẫu có id =“FORM1”, method =“post”, action =“/ sample_page.php” và giá trị thuộc tính tên được đặt thành “FORM_1”. Biểu mẫu chứa hai trường nhập với văn bản loại và một nút gửi để gửi dữ liệu biểu mẫu đến máy chủ -

<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>

Sau đó, chúng tôi đã tạo một nút, “Thay đổi tên” sẽ thực thi phương thức ChangeName () khi người dùng nhấp vào -

<button onclick="ChangeName()">Change Name</button>

Phương thức ChangeName () nhận phần tử biểu mẫu bằng cách sử dụng phương thức getElementById () của đối tượng tài liệu và thay đổi giá trị thuộc tính tên của nó thành “FORM_2”. Thay đổi này sau đó được phản ánh trong đoạn văn có id “Sample” sử dụng thuộc tính innerHTML () -

function ChangeName() {
   document.getElementById("FORM1").name="FORM_2";
   document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
}