Hướng dẫn send data from html to spreadsheet - gửi dữ liệu từ html sang bảng tính

Tuyên bố miễn trừ trách nhiệm: Bài viết này sử dụng bảng tính API sản phẩm của chúng tôi, mà người dùng của chúng tôi nói là cách dễ nhất để lưu dữ liệu biểu mẫu Web/HTML cho Google Sheets. Nó có một tầng miễn phí hào phóng.

Nếu bạn giống như chúng tôi và thường tạo các trang web nơi không có gì cần một máy chủ và cơ sở dữ liệu ngoại trừ một vài biểu mẫu, thì bạn cũng phải thất vọng với tất cả các công việc thêm bạn phải làm để chỉ lưu dữ liệu từ một vài trường.

Bước 1: Đặt biểu mẫu liên hệ trong tệp HTML hoặc thông qua biểu mẫu Google

Được rồi, nếu bạn không biết bất kỳ HTML nào, thì đây có thể là một đường cong học tập dốc. Ví dụ nhỏ nên bạn nên Google thuật ngữ mà bạn không hiểu và nó có thể có ý nghĩa.

Hãy để tạo ra một biểu mẫu trong HTML. Nó có một hình thức liên hệ cơ bản và không chứa bất kỳ kiểu dáng nào.

Mẫu sẽ trông như thế này

Mã đầy đủ cho biểu mẫu liên hệ và cách xử lý việc gửi bên dưới.

Mở một tệp trống trong trình chỉnh sửa văn bản bạn sử dụng để lập trình, sao chép và dán mã bên dưới và lưu tệp bằng tiện ích mở rộng [.html]. Chúng tôi đã lưu của chúng tôi dưới dạng contactform.html

Chúng tôi sẽ đi qua phần HTML bây giờ và phần JavaScript sau.

Mẫu liên lạc có 4 trường..

Hãy chú ý đến thuộc tính tên của các thẻ. Đây sẽ là các tiêu đề cột của bảng tính của chúng tôi, chúng tôi lưu dữ liệu vào và chúng phải khớp với nhau.

Chúng tôi sẽ đặt tên cho bốn thẻ đầu vào như sau. Các dòng đề cập đến dòng mã:

  1. full_name, dòng 29 Đây sẽ là một trường văn bản có tên đầy đủ của ngườiThis will be a text field with the full name of the person
  2. Email, dòng 33 Đây sẽ là một trường văn bản với email của ngườiThis will be a text field with the email of the person
  3. Tuổi, dòng 37 Ném38 Đây sẽ là một trường lựa chọn radio với hai tùy chọn tuổi. 18 trận35 và 35+. Chúng tôi sẽ biểu thị chúng trong thuộc tính giá trị của các trường radioThis will be a radio selection field with two age options. 18–35 and 35+. We will denote them in the value attribute of the radio fields
  4. tin nhắn, dòng 42 Đây sẽ là một khu vực văn bản sẽ chứa thông báo các loại ngườiThis will be a text area that will contain the message the person types

Tất cả bốn thẻ sẽ ở bên trong một thẻ (dòng 26) mà chúng tôi sẽ đưa ra một thuộc tính ID của MyForm. Không cung cấp cho nó bất kỳ ID nào khác vì việc gửi dữ liệu vào chức năng bảng tính mà chúng tôi sẽ viết sau này trong JavaScript phụ thuộc vào nó.myForm. Do not give it any other id as the data submission to spreadsheet function that we will write later in the Javascript is dependent on it.

Cuối cùng, thành phần chính của chúng tôi sẽ là (dòng 47) sẽ gửi dữ liệu. Trong thuộc tính onclick của nó, chúng ta sẽ chỉ định dạng con hàm ().SubForm().

Một lần nữa, không đặt cho chức năng một tên khác vì chúng tôi sẽ viết chức năng chính xác này sau này trong JavaScript để xử lý việc gửi dữ liệu.

Bước 2: Chuẩn bị bảng tính của bạn rằng dữ liệu sẽ được lưu vào

Phần này đơn giản

  1. Mở một bảng hiệu Googles trống

2. Viết các tiêu đề cột bằng (các) tên của các thẻ

Mỗi lần ai đó gửi dữ liệu, nó sẽ lưu trong cột thích hợp. Bước này là siêu quan trọng, vì vậy hãy đảm bảo các tiêu đề này giống hệt như tên của các thẻ đầu vào ở trên.

Bước 3: Lấy URL API của bạn từ bảng tính API

1. Đăng ký tài khoản

  • Nhấp vào Đăng ký vào thanh Navbar
  • Đăng ký bằng email và mật khẩu của bạn

2. Tải lên tệp bạn đã tạo ở bước 2 bằng cách nhấp vào trên Google Google Sheets

3. Sao chép URL API cho tệp của bạn trong tab Tạo

Sao chép URL API cho tệp của bạn và lưu nó ở đâu đó tiện dụng. Chúng tôi sẽ sử dụng điều này trong JavaScript dưới đây để gửi dữ liệu.

Nếu nút riêng được bật, thì liên kết sẽ siêu dài và chứa khóa truy cập và bí mật cho API này. Nút riêng của chúng tôi tắt bên dưới nên liên kết ngắn. Nó có thể sử dụng mà bạn muốn sử dụng. Nếu bạn muốn làm cho nó riêng tư, bạn sẽ cần phải mua một tài khoản và mã sẽ trông giống như sau.

Bước 3: Định cấu hình JavaScript để gửi dữ liệu từ biểu mẫu

Chúng tôi sẽ sử dụng Ajax để gửi biểu mẫu. Một lần nữa, nếu bạn không quen thuộc với JavaScript, JQuery hoặc Ajax, thì đó có thể là một đường cong học tập dốc.

Chúng tôi sẽ bao gồm mã HTML đầy đủ ở đây một lần nữa. Phần JavaScript nằm trong các thẻ (dòng 5 trận23).

1. Thêm jQuery từ CDN (dòng 5 trận8)

Chúng tôi cần đảm bảo thư viện jQuery đầy đủ được bao gồm trong HTML của chúng tôi để sử dụng AJAX.

2. Viết hàm Subform () giữa hai thẻ tập lệnh (dòng 9 trận23)

Hàm Subform () bên dưới. Bạn sẽ thay thế URL bên dưới bằng URL bạn thu được trong bước 3. Phần còn lại của hàm sẽ giữ nguyên.SubForm() function is below. You will replace the URL below with the URL you obtained in Step 3. The rest of the function will remain the same.

Chúng tôi sẽ trải qua chức năng này chi tiết hơn vào cuối bài đăng này nhưng bây giờ tất cả những gì bạn cần biết là nếu dữ liệu được lưu thành công, một cảnh báo sẽ bật lên nói dữ liệu biểu mẫu được gửi :) nếu không thì một cảnh báo sẽ bật lên nói có một lỗi :(.Form Data Submitted :) otherwise an alert will pop up saying There was an error :(.

Đó là nó! Chúng tôi đã làm mọi thứ cần thiết để lưu dữ liệu từ biểu mẫu web của chúng tôi vào bảng tính của chúng tôi.

Bây giờ, hãy để thử nghiệm nó ra và xem cách xem dữ liệu của chúng tôi.

Kiểm tra

  1. Lưu tệp HTML của bạn và mở nó trong trình duyệt để xem biểu mẫu liên hệ

2. Điền vào biểu mẫu của bạn và nhấp vào Gửi

Một cửa sổ cảnh báo nên bật lên nói dữ liệu biểu mẫu được gửi :)Form Data Submitted :)

Nếu cửa sổ cảnh báo nói rằng có một lỗi :( thì vui lòng gửi email cho chúng tôi và chúng tôi có thể cố gắng giúp bạn.There was an error :( then feel free to email us at and we can try to help you out.

3. Xem dữ liệu của bạn trong bảng tính của bạn !!

Đi kiểm tra bảng tính Google của bạn và bạn sẽ thấy dữ liệu chúng tôi vừa gửi!

Ở đó bạn có nó! Điều tuyệt vời khi sử dụng Google Sheets là dữ liệu của bạn sẽ tự động tiếp tục thêm vào đó và bạn có thể xem nó bất cứ lúc nào.

Nếu bạn là một người học trực quan hơn, hãy xem hướng dẫn YouTube của chúng tôi về điều này!

Nếu bạn muốn có một ứng dụng tùy chỉnh, dữ liệu được làm sạch hoặc dự án được xây dựng bằng bảng tính, bạn có thể xem dịch vụ tư vấn của chúng tôi tại đây: https://www.lovespreadsheet.com!

Làm cách nào để chuyển dữ liệu từ HTML sang Excel?

Bắt đầu ứng dụng Excel. Tạo văn bản nhãn tiêu đề cho mỗi cột như trong sơ đồ sau ...
Mở tài liệu HTML. Hình 5: Mẫu đầu vào của người dùng ..
Nhập dữ liệu sau đó nhấn nút Gửi. Hình 6: Dữ liệu đầu vào của người dùng. Hình 7: Dữ liệu được thêm thành công ..
Mở sổ làm việc để kiểm tra dữ liệu của Sheet1. Hình 8: Bảng dữ liệu người dùng ..

Làm cách nào để trích xuất dữ liệu từ một trang web vào bảng tính?

Đây là cách ...
Bước 1: Bắt đầu với một tờ Google mới. Đầu tiên, chúng tôi mở một tài liệu Google Sheets mới, trống:.
Bước 2: Thêm nội dung bạn cần cạo. Thêm URL của trang (hoặc trang), chúng tôi muốn xóa thông tin từ đó. ....
Bước 3: Tìm XPath. ....
Bước 4: Trích xuất dữ liệu vào Google Sheets ..

Làm cách nào để gửi biểu mẫu HTML cho Google Sheets mà không cần Google Forms?

Tùy chọn 1: Xây dựng ứng dụng web bằng tập lệnh Google Apps - Tạo và thiết lập tập lệnh ứng dụng Google.Sao chép Dán một mã làm sẵn sẽ giúp bạn thêm một hàng mới vào mỗi lần gửi thành công của biểu mẫu của bạn.- Ủy quyền & thiết lập các ứng dụng mới Kích hoạt dự án tập lệnh cho bảng tính Google để nghe bản gửi biểu mẫu của bạn.Build a web app using Google Apps Script - Create and setup Google Apps script. Copy paste a ready-made code that will help you with adding a new row upon every successful submit of your form. - Authorize & setup new Apps Script project triggers for the Google Spreadsheet to listen to your form's submit.

Google Sheets có thể tự động lấy dữ liệu từ một trang web không?

Google Sheets cung cấp một chức năng gọi là Importhtml nhập dữ liệu từ bảng hoặc danh sách trong trang HTML.Bạn có thể sử dụng chức năng này để tự động kéo dữ liệu vào một tờ Google và sau đó vào Geckoboard.You can use this function to automatically pull data into a Google Sheet and then into Geckoboard.