Cách hiển thị dữ liệu biểu mẫu trong bảng bằng JavaScript

Trong tất cả các tính năng mà JavaScript có thể mang, các tính năng xử lý biểu mẫu của nó là một trong những tính năng được tìm kiếm và sử dụng nhiều nhất. Tìm hiểu cách sử dụng JavaScript để xử lý biểu mẫu, xác thực và hơn thế nữa

Cách hiển thị dữ liệu biểu mẫu trong bảng bằng JavaScript
Bởi Matthew Tyson

Kiến trúc sư phần mềm, .

Cách hiển thị dữ liệu biểu mẫu trong bảng bằng JavaScript
Dmitry Baranovskiy (CC BY 2. 0)

Mục lục

Cho xem nhiều hơn

Biểu mẫu là một phần thiết yếu của trang HTML và các nhà phát triển thường sử dụng JavaScript để giải thích cách chúng hoạt động. Bạn có thể hiểu rõ nhất về lợi ích của việc sử dụng JavaScript với biểu mẫu HTML bằng cách nghiên cứu trước cách thức hoạt động của biểu mẫu với HTML đơn giản. Bản chất của một biểu mẫu là chấp nhận đầu vào từ người dùng và sau đó gửi nó đến một loại máy chủ nào đó. Máy chủ có thể là phần phụ trợ đã tạo ra HTML, nhưng không nhất thiết

Vòng đời của một biểu mẫu HTML đơn giản là cho phép người dùng nhập dữ liệu vào các trường của nó, sau đó gửi dữ liệu và tải lại trang. JavaScript cho phép chúng tôi tạo một giải pháp thay thế mượt mà hơn cho dòng sự kiện rắc rối này. Chúng tôi có thể lấy thông tin từ biểu mẫu và gửi nó một cách lặng lẽ theo những cách khác nhau;

Kỹ thuật này là một phần của phương pháp Ajax (JavaScript và XML không đồng bộ), đây là một vấn đề lớn khi nó xuất hiện lần đầu tiên. Các cơ chế đã được tinh chỉnh qua nhiều năm nhưng ý tưởng cơ bản vẫn giữ nguyên. Khả năng xử lý dữ liệu và giao tiếp đã cách mạng hóa giao diện người dùng của ứng dụng web một cách linh hoạt và khả năng này tiếp tục cho phép các giao diện web kiểu ứng dụng một trang và nhiều trang.  

Ajax và JSON

Mặc dù XML là một thành phần cốt lõi của Ajax khi nó lần đầu tiên xuất hiện, nhưng nó thường không phải là định dạng được sử dụng để trao đổi dữ liệu ngày nay. Ngày nay, chúng tôi chủ yếu sử dụng JSON. Ajaj nghe không hay bằng, vì vậy Ajax bị mắc kẹt. Bất cứ khi nào chúng tôi đang sử dụng JavaScript để kiểm soát tương tác dữ liệu bên ngoài hành vi tiêu chuẩn của trình duyệt, một mẫu Ajax sẽ có hiệu lực

Sử dụng JavaScript trong các biểu mẫu HTML

Ngoài việc sử dụng JavaScript để thay đổi vòng đời của dữ liệu biểu mẫu, chúng tôi có thể sử dụng nó cho nhiều dịch vụ khác như xác thực đầu vào và bật các tính năng phức tạp hơn trong các trang biểu mẫu của chúng tôi, như thanh trượt và con thoi

Hãy bắt đầu bằng cách xem xét một biểu mẫu HTML và một số JavaScript cơ bản đi kèm với nó, như thể hiện trong Liệt kê 1. Bạn cũng có thể xem ví dụ này đang chạy trong một câu đố trực tiếp

Liệt kê 1. Một biểu mẫu HTML đơn giản với JavaScript


Enter something in the box:
function testResults (form) { var inputValue = form.inputbox.value; alert ("You typed: " + inputValue); }

Liệt kê 1 rất đơn giản nhưng nó có tất cả các thành phần cơ bản của một biểu mẫu HTML với JavaScript. Trong trường hợp này, JavaScript lấy giá trị đầu vào và hiển thị nó trong cửa sổ bật lên cảnh báo. Dưới đây là tổng quan về các phần của trang

  • khai báo một form mới
    • name="myForm" đặt tên cho biểu mẫu. Ở những nơi khác trong JavaScript, bạn có thể tham khảo biểu mẫu này bằng tên myForm. Tên bạn đặt cho biểu mẫu là tùy thuộc vào bạn, nhưng tên đó phải tuân thủ các quy tắc tiêu chuẩn của JavaScript để đặt tên biến và hàm (không có khoảng trắng, không có ký tự lạ ngoại trừ dấu gạch dưới, v.v. )
    • action="" xác định nơi bạn muốn trình duyệt gửi thông tin biểu mẫu. Trường này sẽ là một URL khi được xác định. Trong trường hợp này, nó trống vì chúng tôi không thực sự gửi biểu mẫu đi đâu cả
    • method="GET" xác định cách dữ liệu phương thức được chuyển đến đích hành động. Các giá trị có thể là GETPOST, nghĩa là mã hóa URL hoặc mã hóa nội dung tương ứng
  • bắt đầu một phần tử đầu vào
    • 
      function testResults (form) {
        var inputValue = form.inputbox.value;
        fetch("https://echo.zuplo.io/", {
          method: "PUT",
          body: "Very interesting: " + inputValue
      }).then((response) => response.text())
        .then((responseText) => {
          alert(responseText);
        })
        .catch((error) => {
          console.error("foo: " + error)
        })
      }
      
      0 xác định loại đầu vào
    • 
      function testResults (form) {
        var inputValue = form.inputbox.value;
        fetch("https://echo.zuplo.io/", {
          method: "PUT",
          body: "Very interesting: " + inputValue
      }).then((response) => response.text())
        .then((responseText) => {
          alert(responseText);
        })
        .catch((error) => {
          console.error("foo: " + error)
        })
      }
      
      1 đặt tên cho đầu vào, chúng ta sẽ sử dụng tên này sau để truy cập nó
  • định nghĩa một đối tượng nút. Nếu loại là "gửi" nút sẽ tự động gửi biểu mẫu
    • 
      function testResults (form) {
        var inputValue = form.inputbox.value;
        fetch("https://echo.zuplo.io/", {
          method: "PUT",
          body: "Very interesting: " + inputValue
      }).then((response) => response.text())
        .then((responseText) => {
          alert(responseText);
        })
        .catch((error) => {
          console.error("foo: " + error)
        })
      }
      
      2 là trình xử lý sự kiện. Nó yêu cầu trình duyệt gọi hàm JavaScript đã cho khi nhấp vào nút, sau đó chuyển vào một đối tượng đại diện cho biểu mẫu.  
    • Cũng có thể tạo đầu vào bằng
      
      function testResults (form) {
        var inputValue = form.inputbox.value;
        fetch("https://echo.zuplo.io/", {
          method: "PUT",
          body: "Very interesting: " + inputValue
      }).then((response) => response.text())
        .then((responseText) => {
          alert(responseText);
        })
        .catch((error) => {
          console.error("foo: " + error)
        })
      }
      
      3, sau đó nắm bắt sự kiện
      
      function testResults (form) {
        var inputValue = form.inputbox.value;
        fetch("https://echo.zuplo.io/", {
          method: "PUT",
          body: "Very interesting: " + inputValue
      }).then((response) => response.text())
        .then((responseText) => {
          alert(responseText);
        })
        .catch((error) => {
          console.error("foo: " + error)
        })
      }
      
      4, ngăn chặn hành vi gửi mặc định, rồi tiếp tục như bình thường
  • Hàm testResults() được định nghĩa trong JavaScript của chúng tôi. Nó lấy giá trị trong trường đầu vào bằng cách lấy biểu mẫu được truyền dưới dạng đối số và sau đó xem
    
    function testResults (form) {
      var inputValue = form.inputbox.value;
      fetch("https://echo.zuplo.io/", {
        method: "PUT",
        body: "Very interesting: " + inputValue
    }).then((response) => response.text())
      .then((responseText) => {
        alert(responseText);
      })
      .catch((error) => {
        console.error("foo: " + error)
      })
    }
    
    5. Đây là mô hình đối tượng trình duyệt tiêu chuẩn (BOM) cho đối tượng biểu mẫu. biểu mẫu có một trường theo tên của từng đầu vào và giá trị giữ giá trị cho đầu vào đó

Hành động biểu mẫu trong JavaScript

Hãy dành một phút để thảo luận về thuộc tính hành động trên biểu mẫu. Khi được xử lý bởi hành vi mặc định của trình duyệt, trường hành động là một URL cho trình duyệt biết nơi gửi dữ liệu. Khi chúng tôi kiểm soát dữ liệu bằng JavaScript và Ajax, chúng tôi chỉ định thủ công nơi chúng tôi sẽ gửi thông tin (một cách là sử dụng trường dữ liệu với lệnh gọi


function testResults (form) {
  var inputValue = form.inputbox.value;
  fetch("https://echo.zuplo.io/", {
    method: "PUT",
    body: "Very interesting: " + inputValue
}).then((response) => response.text())
  .then((responseText) => {
    alert(responseText);
  })
  .catch((error) => {
    console.error("foo: " + error)
  })
}
6, tôi sẽ trình bày ngay sau đây).  

Đôi khi, bạn sẽ thấy URL được đặt trên biểu mẫu và sau đó JavaScript sẽ lấy giá trị từ trường hành động của biểu mẫu theo chương trình để sử dụng làm đích cho một yêu cầu Ajax. Bạn luôn có thể tìm thấy hành động biểu mẫu bằng cách xem trường hành động; .


function testResults (form) {
  var inputValue = form.inputbox.value;
  fetch("https://echo.zuplo.io/", {
    method: "PUT",
    body: "Very interesting: " + inputValue
}).then((response) => response.text())
  .then((responseText) => {
    alert(responseText);
  })
  .catch((error) => {
    console.error("foo: " + error)
  })
}
7

Sử dụng Ajax ở dạng HTML

Bây giờ, hãy làm điều gì đó thú vị hơn một chút với dữ liệu trong biểu mẫu của chúng tôi. Khi bắt đầu, chúng ta có thể gửi nó tới một API từ xa để thực hiện một số thao tác Ajax đơn giản. Chúng tôi sẽ sử dụng điểm cuối https. //tiếng vang. zuplo. io, lấy bất cứ thứ gì nó nhận được và lặp lại nó. Chúng ta sẽ sửa đổi JavaScript của mình để trông giống như Liệt kê 2 và chúng ta không cần thay đổi HTML chút nào. (Bạn cũng có thể kiểm tra phiên bản trực tiếp tại đây. )

Liệt kê 2. Xử lý biểu mẫu với tiếng vang từ xa


function testResults (form) {
  var inputValue = form.inputbox.value;
  fetch("https://echo.zuplo.io/", {
    method: "PUT",
    body: "Very interesting: " + inputValue
}).then((response) => response.text())
  .then((responseText) => {
    alert(responseText);
  })
  .catch((error) => {
    console.error("foo: " + error)
  })
}

Trong Liệt kê 2, ban đầu chúng ta làm điều tương tự bằng cách lấy giá trị từ đầu vào của biểu mẫu. Tuy nhiên, thay vì chỉ hiển thị nó trong một cảnh báo, chúng tôi sử dụng API Tìm nạp để gửi nó đến dịch vụ từ xa của chúng tôi. Sau đó, chúng tôi sử dụng lời hứa


function testResults (form) {
  var inputValue = form.inputbox.value;
  fetch("https://echo.zuplo.io/", {
    method: "PUT",
    body: "Very interesting: " + inputValue
}).then((response) => response.text())
  .then((responseText) => {
    alert(responseText);
  })
  .catch((error) => {
    console.error("foo: " + error)
  })
}
6 (thông qua chuỗi

function testResults (form) {
  var inputValue = form.inputbox.value;
  fetch("https://echo.zuplo.io/", {
    method: "PUT",
    body: "Very interesting: " + inputValue
}).then((response) => response.text())
  .then((responseText) => {
    alert(responseText);
  })
  .catch((error) => {
    console.error("foo: " + error)
  })
}
9) để làm điều gì đó với phản hồi. Trong trường hợp của chúng tôi, chúng tôi chỉ cần mở một cảnh báo. Nhưng ở đây chúng ta đã thấy bản chất của Ajax và xử lý dữ liệu biểu mẫu không đồng bộ. Khả năng kiểm soát chi tiết dữ liệu và mạng như thế này là tính năng dứt khoát cho phép giao diện người dùng hiện đại

API tìm nạp

Fetch API và phương thức









function testResults (form) {
  let inputValue = form.inputbox.value;
  let formData = new FormData(form);
  let object = {};
  formData.forEach(function(value, key){
    object[key] = value;
  });
  var json = JSON.stringify(object);
  alert(json);

  alert(JSON.stringify(Object.fromEntries(formData)));
}
0 của nó được tích hợp vào trình duyệt. Đến với nó khi mới bắt đầu, cái tên “tìm nạp” hơi gây hiểu nhầm. API này không chỉ tìm nạp; . Fetch API là sự kế thừa hiện đại của

function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
2 trước đó. Nó không chỉ làm tốt công việc thay thế API đó mà còn đủ mạnh để không cần đến thư viện của bên thứ ba như Axios trong nhiều trường hợp

Làm việc với định dạng dữ liệu trong HTML

Khi chúng tôi gửi yêu cầu qua dây bằng tìm nạp hoặc bất kỳ cơ chế nào khác trong trình duyệt, chúng tôi có thể chọn cách định dạng dữ liệu mà chúng tôi thu thập được từ biểu mẫu.  

Trong thực tế, một cách tiếp cận phổ biến là sử dụng JSON, đặc biệt là với các dịch vụ RESTful. Theo cách tiếp cận đó, bạn sắp xếp JSON bằng cách chuyển đổi các trường và giá trị của chúng thành một đối tượng JavaScript, sau đó gửi nó dưới dạng một chuỗi trong phần thân của yêu cầu. (Có thể kết hợp một số thông tin trong URL dưới dạng tham số truy vấn, trong đó thông tin đó phải được mã hóa URL, nhưng đối với dữ liệu phức tạp, nội dung yêu cầu sẽ hữu ích hơn. )

Giả sử chúng ta đã quyết định về phần thân JSON, câu hỏi sẽ trở thành. làm cách nào để biến biểu mẫu thành JSON? . Hai cách tiếp cận với vanilla JavaScript là sử dụng một đối tượng


function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
3 để bọc biểu mẫu hoặc sử dụng phương thức

function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
4. Cả hai tùy chọn đều được hiển thị trong Liệt kê 3 và phiên bản trực tiếp có tại đây. (Lưu ý rằng sau đây tôi sẽ không trình bày việc thực sự gửi dữ liệu vì bạn đã biết cách thực hiện điều đó. Chúng tôi sẽ đặt JSON được sắp xếp theo thứ tự vào phần thân yêu cầu. )

Liệt kê 3. Sử dụng FormData hoặc Object. fromEntries để biến biểu mẫu thành JSON


function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }

Bạn có thể nhận thấy trong Liệt kê 3 rằng tôi đã thêm một vài điều khiển mới—bộ chọn phạm vi và màu sắc—để làm cho JSON thú vị hơn. Nếu bạn nhấp vào nút bây giờ, bạn sẽ nhận được thông báo với văn bản như vậy.


function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
5.  

Các cách tiếp cận này tạo JSON hợp lệ với ít phiền phức nhất nhưng lại gặp sự cố với các biểu mẫu phức tạp hơn. Ví dụ: đầu vào nhiều lựa chọn sẽ bị hỏng với


function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
6 và chúng yêu cầu xử lý thêm bằng cách sử dụng

function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
3. Xem Stack Overflow để thảo luận tốt về những vấn đề này

Bạn cũng có thể gặp sự cố với tệp tải lên. Đầu vào tệp thực sự gửi dữ liệu nhị phân trong trường của họ. Cũng có thể có đầu vào tệp nhiều lựa chọn, tệp này sẽ gửi một mảng các khối nhị phân. Xem Cách dễ dàng chuyển đổi Biểu mẫu HTML thành JSON để biết mô tả hay về cách xử lý vấn đề này và các vấn đề khác tương tự (chẳng hạn như nhiều trường có cùng tên) khi tạo JSON theo cách thủ công trong số


function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
8

Thẩm định

Bạn đã có sở thích xử lý dữ liệu dưới dạng biểu mẫu. Quay lại những ngày đầu, xác thực biểu mẫu là một trong những cách gọi chính của JavaScript. Kể từ đó, các trình duyệt đã giới thiệu tính năng xác thực khá mạnh mẽ cho các biểu mẫu, nhưng vẫn còn chỗ để sử dụng JavaScript. Ví dụ: trình duyệt có thể xử lý nhiều nhu cầu xác thực như email, phạm vi số hoặc thậm chí biểu thức chính quy dạng tự do. Nhưng những gì về một cái gì đó liên quan nhiều hơn?

Cơ bản hơn nữa, trình duyệt không thể thực hiện kiểm tra xác thực back-end. Điều đó có nghĩa là, điều gì sẽ xảy ra nếu chúng ta có một trường tên người dùng có xác thực cho biết rằng nó không thể sử dụng lại tên người dùng hiện có? . Người dùng nhập một giá trị, chúng tôi gửi yêu cầu với giá trị đó và máy chủ so sánh giá trị đó với giá trị trong cơ sở dữ liệu, sau đó gửi phản hồi cho chúng tôi biết liệu tên người dùng có hợp lệ hay không

Chúng tôi có thể thực hiện loại xác thực này ở một số nơi. Chúng tôi có thể làm điều đó khi người dùng gửi biểu mẫu hoặc khi trường tên người dùng bị mờ (có nghĩa là nó mất tiêu điểm) hoặc thậm chí khi người dùng nhập (đối với điều này, chúng tôi sẽ sử dụng một số loại điều chỉnh hoặc loại bỏ thoát để đảm bảo nó . Liệt kê 4 và phiên bản trực tiếp của mã trên fiddle sẽ cho bạn biết cách hoạt động của một xác thực đơn giản

Liệt kê 4. Xác thực đơn giản hộp văn bản trong khi gõ


// HTML
Enter something in the box: 

// JS let inputBox = document.querySelector('#inputBox'); inputBox.addEventListener('input', (event) => { if (["frodo","bilbo","sam"].includes(event.target.value)){ document.querySelector('#msg').innerHTML="Already have that Hobbit"; } else { document.querySelector('#msg').innerHTML=""; } })

Liệt kê 4 giới thiệu một vài ý tưởng mới. Hiện tại có một thành phần đoạn văn có ID là “


function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
9”, chúng tôi sẽ sử dụng phần tử này để hiển thị thông báo lỗi nếu người dùng chọn một tên người dùng hiện có. Trong JavaScript, chúng tôi đính kèm một trình lắng nghe vào trường

// HTML
Enter something in the box: 

// JS let inputBox = document.querySelector('#inputBox'); inputBox.addEventListener('input', (event) => { if (["frodo","bilbo","sam"].includes(event.target.value)){ document.querySelector('#msg').innerHTML="Already have that Hobbit"; } else { document.querySelector('#msg').innerHTML=""; } })
0 theo chương trình bằng cách sử dụng

// HTML
Enter something in the box: 

// JS let inputBox = document.querySelector('#inputBox'); inputBox.addEventListener('input', (event) => { if (["frodo","bilbo","sam"].includes(event.target.value)){ document.querySelector('#msg').innerHTML="Already have that Hobbit"; } else { document.querySelector('#msg').innerHTML=""; } })
1, trong khi trước đây chúng tôi đã làm điều đó một cách khai báo trong HTML. Bằng cách lắng nghe sự kiện đầu vào, chúng tôi sẽ được thông báo mỗi khi người dùng nhập (nếu chúng tôi sử dụng sự kiện thay đổi, chúng tôi sẽ được thông báo khi người dùng thực hiện thay đổi bằng cách nhấp vào Enter). Thay vì gửi giá trị của đầu vào (

// HTML
Enter something in the box: 

// JS let inputBox = document.querySelector('#inputBox'); inputBox.addEventListener('input', (event) => { if (["frodo","bilbo","sam"].includes(event.target.value)){ document.querySelector('#msg').innerHTML="Already have that Hobbit"; } else { document.querySelector('#msg').innerHTML=""; } })
2) đến máy chủ để kiểm tra tên người dùng trùng lặp, chúng tôi chỉ có thể kiểm tra nó ở đây dựa trên một mảng (trong trường hợp của chúng tôi, chúng tôi đã đăng ký ba tên Hobbit). Nếu chúng tôi tìm thấy tên đã có trong mảng của mình, chúng tôi sẽ đặt thông báo trên giao diện người dùng bằng cách tìm đoạn “

function testResults (form) { let inputValue = form.inputbox.value; let formData = new FormData(form); let object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); alert(json); alert(JSON.stringify(Object.fromEntries(formData))); }
9” và đặt văn bản của nó hoặc xóa thông báo lỗi nếu tên không trùng lặp. (Một lần nữa, trong thực tế, chúng tôi sẽ điều tiết các sự kiện để tránh nói lắp trong giao diện người dùng khi các yêu cầu khứ hồi được gửi tới máy chủ. )

Nhập trước, tự động đề xuất và tự động hoàn thành

Bạn vừa xem một ví dụ đơn giản về xác thực back-end. Bây giờ, chúng ta hãy chú ý một chút đến yêu cầu phổ biến của kiểu chữ (còn được gọi là đề xuất tự động hoặc tự động hoàn thành). Việc Google kết hợp tính năng này đã khiến nó trở nên cực kỳ phổ biến. Ví dụ xác thực từ Liệt kê 4 thực sự khá gần với những điều cơ bản của việc triển khai kiểu chữ. Thay vì kiểm tra các tên người dùng trùng lặp, chúng tôi sẽ tìm kiếm các kết quả có thể đáp ứng những gì đã được nhập cho đến nay, sau đó hiển thị chúng trong danh sách thả xuống hoặc trực tiếp trong trường văn bản

Làm cách nào để chèn dữ liệu biểu mẫu vào bảng bằng JavaScript?

Nó tạo một phần tử .
Lấy phần tử bảng dữ liệu
Tạo một hàng bằng phương thức insertRow và chèn nó vào bảng
Tạo (các) ô mới bằng phương thức insertCell và chèn chúng vào hàng bạn đã tạo
Thêm dữ liệu vào các ô vừa tạo

Làm cách nào để hiển thị dữ liệu biểu mẫu bằng JavaScript?

Phương thức serializeArray() tạo một mảng đối tượng (tên và giá trị) bằng cách tuần tự hóa các giá trị biểu mẫu . Phương pháp này có thể được sử dụng để lấy dữ liệu biểu mẫu.

Làm cách nào để hiển thị dữ liệu biểu mẫu trong bảng bằng HTML?

Tạo thẻ bảng bên dưới thẻ body. Để xác định các hàng, hãy thêm thẻ Table Row(tr) bên dưới bảng. Đối với tiêu đề bảng, hãy sử dụng thẻ Tiêu đề bảng (th) trong hàng cụ thể. Để thêm dữ liệu vào bảng, hãy tạo một hàng và sử dụng thẻ “td” để chèn dữ liệu vào bên trong mỗi hàng .

Làm cách nào để hiển thị dữ liệu biểu mẫu sau khi gửi trong JavaScript?

Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu . Thuộc tính formtarget ghi đè thuộc tính target của phần tử