HTML trong Google Trang 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. Người dùng của chúng tôi cho rằng đây là cách dễ nhất để lưu dữ liệu biểu mẫu web/html vào Google Trang tính. Nó có một cấp 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 không cần máy chủ và cơ sở dữ liệu ngoại trừ một số biểu mẫu, thì bạn cũng phải cảm thấy khó chịu với tất cả các công việc bổ sung mà bạn phải làm chỉ để lưu dữ liệu từ một vài trường

Bước 1. Thiết lập biểu mẫu liên hệ trong tệp HTML hoặc thông qua Google Form

Đượ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ụ này nhỏ, vì vậy bạn nên Google các thuật ngữ mà bạn không hiểu và nó có thể có ý nghĩa

Hãy tạo một biểu mẫu trong HTML. Đây là một biểu mẫu liên hệ cơ bản và không chứa bất kỳ kiểu dáng nào

Biểu mẫu sẽ trông như thế này

Dưới đây là mã đầy đủ cho Biểu mẫu liên hệ và cách xử lý nội dung gửi

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

Bây giờ chúng ta sẽ đi qua phần HTML và phần Javascript sau

Form liên hệ có 4 trường

Pay attention to the name attribute of the tags. These will be the column headers of our spreadsheet we save the data in and they MUST match up.

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à trường văn bản có tên đầy đủ của người đó
2. email, dòng 33 Đây sẽ là trường văn bản có email của người đó
3. tuổi, dòng 37–38 Đây sẽ là trường lựa chọn radio với hai tùy chọn độ tuổi. 18–35 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 radio
4. tin nhắn, dòng 42 Đây sẽ là vùng văn bản chứa tin nhắn mà người đó nhập

All four tags will be inside a tag [line 26] that we will give an id attribute of 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.

Finally, our main component will be a [line 47] that will be submitting the data. In its title attribute we are going to specify the function SubForm[].

Xin nhắc lại, đừng đặt tên khác cho hàm vì chúng ta sẽ viết hàm chính xác này sau trong Javascript để xử lý việc gửi dữ liệu

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

1. Mở một Google Sheet trống

2. Write column headers equal to the name[s] of the tags

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

Bước 3. Nhận URL API của bạn từ Bảng tính API

1. Đăng kí một tài khoản

• Nhấp vào Đăng ký trong Thanh điều hướng

• Đăng ký với 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 “Google Trang tính”

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 cái này trong Javascript bên dưới để gửi dữ liệu

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

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 quá trình học tập khó khăn

We are going to include the full HTML code here again. The Javascript part is within the tags [lines 5–23].

1. Thêm jQuery từ CDN [dòng 5–8]

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