# Week 9(11/6)：HTML form & 用Google Spreadsheet做雲端資料庫 ## HTML form 範例程式碼： ```html= <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> <!--後端處理程式--> <label for="fname">First name:</label><br> <!--label：格子標籤文字--> <input type="text" id="fname" name="fname" value="John"><br> <!--有value：預設輸入文字， 沒value就空白--> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> </html> ``` 執行結果： ![範例程式的網頁呈現](https://hackmd.io/_uploads/BkUfaRbUa.png) P.S. 可用Material CSS的form語法美化 https://materializecss.com/text-inputs.html 更多詳細資料：https://www.w3schools.com/html/html_forms.asp ## input 用法 ![input 用法](https://hackmd.io/_uploads/ByiBRR-Ua.png) 更多詳細資料：https://www.w3schools.com/html/html_form_input_types.asp ## 用Google Spreadsheet做雲端資料庫 用Google Form當Google Spreadsheet的資料輸入方式，而Google Spreadsheet用來做雲端資料庫。 做法： 1. 創建google form 2. 獲得此格式的網址：[https://docs.google.com/forms/d/e/(自己的問卷編號)/viewform?usp=pp_url&entry.(自己的題目1編號)=(預設輸入內容)&entry.(自己的題目2編號)=(預設輸入內容)&entry.(自己的題目3編號)=(預設輸入內容)](https://docs.google.com/forms/d/e/1FAIpQLSfEjNK3IgLFB8Xlw1JM50kAwClxPReHhviAFdqfoZBRq6pp_Q/viewform?usp=pp_url&entry.1609585023=111&entry.1248053234=222&entry.850348115=333) //自己的問卷編號：由編輯頁可取得 //題目編號：由預先填入連結可取得 3. 照範例操作 範例程式： html版：https://jsbin.com/yilewoye/1/edit?html,output jQuery版：https://jsbin.com/yehaciyi/1/edit?html,output 更多詳細資料：https://nchu-mis-html5.blogspot.com/2013/06/google-spreadsheet.html