---
# System prepended metadata

title: Week 9(11/6)

---

# 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
