2012年12月3日 星期一

雲端應用 - Google試算表(二)自訂表單

  上次介紹基本應用,很快的就會發現功能已經不符合需求了吧,比如說,新建好的表單送出之後,會轉跳到一個感謝頁面,這個頁面也許大家都不想要吧,或是比較想轉到自訂的頁面或是不要轉跳...等。基於各種原因,這次要來介紹,如何自訂表單,接著上次的例子,我們先把做好的表單顯示在頁面上。


  在建好的表單頁面查看原始碼。(這裡是用FireFox瀏覽器)
查看原始碼
接著畫面就是一堆HTML碼,我們利用搜尋尋找<form...標記的段落,把整個Form表單複製起來。
開啟一個文字編輯軟體(我是用NotePad++),貼上複製的文字,把沒有用到的屬性及標籤刪除,最多可精簡到如下所示。

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dE9USXVvOEtVQkhiSWEzYWNWdWlwQWc6MQ&amp;ifq" method="POST" id="ss-form">
    <input type="radio" name="entry.3.group" checked value="&#26159;" >&#26159;
    <input type="radio" name="entry.3.group" value="&#21542;" >&#21542;

    &#30041;&#19979;&#20320;&#30340;&#22823;&#21517;
    <input type="text" name="entry.0.single" >

    &#30070;&#25105;&#24819;&#20320;&#30340;&#26178;&#20505;,&#38568;&#26178;&#21487;&#20197;&#25171;&#32102;&#20320;
    <input type="text" name="entry.1.single" >

    &#26159;&#21542;&#25884;&#20276;(&#35531;&#22635;&#25976;&#23383;)
    &#32080;&#23130;&#20102;&#21966;?&#26377;&#23478;&#20154;&#20063;&#19968;&#36215;&#24118;&#20358;&#21543;
    <input type="text" name="entry.2.single" >

    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">

    <input type="submit" name="submit" value="&#25552;&#20132;">
</form>

  看起來像是亂碼的文字其實是中文字HTML編碼之後的樣子,可以直接再把它改回中文方便辨識,最後的樣子看起來像是如下所示。
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dE9USXVvOEtVQkhiSWEzYWNWdWlwQWc6MQ&amp;ifq" method="POST" id="ss-form">
    是否要參加<br />
    <input type="radio" name="entry.3.group" checked value="是" />是
    <input type="radio" name="entry.3.group" value="否" />否
    <br />
    姓名
    <input type="text" name="entry.0.single" >
    <br />
    聯絡電話
    <input type="text" name="entry.1.single" >
    <br />
    是否攜伴?(請填人數)
    <input type="text" name="entry.2.single" >

    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">

    <input type="submit" name="submit" value="送出">
</form>

  把完成精簡的HTML碼貼到一個完整的HTML文件架構中,就可以存檔了,如果HTML文件有宣告meta charset的話,要是utf-8,並且HTML檔案要存UTF-8的文字編碼的格式,如果手邊沒有網站可以放去測試的話,可以直接用瀏覽器打開測試,再到雲端硬碟去看看資料是否有進去。
HTML自訂表單
雖然上面圖片裡的表單看起來很陽春,但是懂得網頁設計的人,應該就已經會自己動手加料了吧,若是有經驗的前端工程師來做,更可以做更多的變化了。
  下次再來介紹如何自訂顯示已經收集好的試算表資料吧。

2 則留言:

  1. 您好~請問一下能使用者能不能在網頁上查詢spreadsheets,並顯示。

    功能入下:
    https://code.google.com/apis/ajax/playground/?type=visualization#stringfilter_control

    回覆刪除
    回覆
    1. 您好,抱歉現在才看到您的留這,您留的參考網址我現在已經看不到內容了,您需要的功能就我所知有兩種做法,一種是寫JavaScript去取回"公開"的spreadsheets的JSON回傳,取回之後再做過濾查詢,另一種是下載安裝GOOGLE提供的API函式庫,再另寫程式去操作,簡單說關鍵的差別,大致上就是公開不公開spreadsheets的問題了

      刪除