網頁標題： 製作報點書及小表單

Warning: fopen(/home/crazy/www/learner/cpuroom/programmer/has_read.php): failed to open stream: Permission denied in /home/crazy/www/compose/reading.php on line 2077

Warning: fputs() expects parameter 1 to be resource, bool given in /home/crazy/www/compose/reading.php on line 2079

Warning: fclose() expects parameter 1 to be resource, bool given in /home/crazy/www/compose/reading.php on line 2080
　
﹗﹗﹗觀看留言：此文章已經有4則留言 ﹗﹗﹗


今天我們就要來寫一個真正的網頁設計了， 為了配合報點書籍的製作，
雖然這個網頁是一個留言板表單，
但我們只要能在伺服器端另外寫一隻程式來特別處理這些表單資料，
利用一些程序資料轉換工作，
也可以把此留言板的內容一變而為點字轉國字的程式，
這不只是一舉兩得，
我們不但學習架設留言板網頁，
處理表單資料，
然後順便還會學到如何利用伺服器程式更改資料內容，
做一件事情有很多種收穫，
資訊這樣搞是不是真的很好玩呢？
為了偷懶省事，
此後凡是在小程故事提到某個標籤名稱，
我就不再加入小於跟大於符號了，
因為每次寫到這兩個符號都要用 html 的特殊字元來處理，
真的粉麻煩，
請各位在心裡記住，
在網頁上凡是要用作標籤的字串，
都需得用小於 (<) 跟大於 (>) 包住。

我們將在這篇文章學習寫一個真正表單頁面的基本概念， 比較完整的 .html 架構，
所有網頁內容最好都要包含在 html 開始與結束標籤之間。
就是因為有開始和結束，
在開始與結束間才會有許多精采的故事，
而每個故事又各自有它們的開始與結束，
如此一層包著又是一層。
譬如在 html 標籤的開始與結束之中，
包含了頭部 (head)
和 身體 (body) 這兩部份，
也就是 head 和 body 兩組標籤，
這兩組標籤的開始與結束之中也各有其劇情，
而所有的劇情「程式代碼」都要放在各自的開始與結束之間。

本篇文章介紹的網頁代碼實例， 從第03行到第18行均包含在頭部標籤之內，
頭標籤內通常都放一些跟網頁設定有關的資訊，
例如宣告網頁撰寫者的相關資料、
文字編碼方式，
還有頁面樣式設計，
或者搜尋引擎所需要的一些關鍵詞等等，
此外，
開啟網頁就要立即被執行的劇本也會放到這裡，
關於投標籤的更多相關知識，
等本人有更多心得時再與各位分享。
由於程序運行的需要，
本文網頁實例內容的投標籤裡就有一段小小的劇本代碼，
請仔細閱讀程式碼的第07到第18行，
這段劇本代碼是一個函數（function）定義，
函數的名稱是 check_input()，
主要作用在於檢查文字輸入欄是否有文字內容，
請仔細閱讀此函數裡每一行代碼的注解，
如果網頁用戶沒有在文字欄輸入任何資料就送出表單的話，
頁面會呈現一個小視窗予以提醒。
事實上沒有此函數照樣可以呈現表單效果，
只不過沒有資料欄的檢查程序，
送出表單之後可能會產生一些問題，
至於是什麼樣的問題我們日後再來探討，
函數的定義與呼叫方式，
還有更多的劇本表單驗證技巧，
這些日後我們也都會用到。

本文章範例從22至36行就是身體標籤範圍， 網頁主要的部分通常都放在這裡，
範例的體標籤內只有放一個表單，
表單裡有兩個單行文字輸入框(<input type=text>)，
還有一個多行文字輸入區塊(<textarea>)，
以及一個表單送出按鈕(<input type=submit>)。
所有要經由程序處理的標籤都需給定一個 name 屬性，
例如「name=user_name」，
當資料被傳送給伺服器某個程序處理的時候，
這些 name 的設定值都將成為該程序處理的一個變數名稱，
因此上面這個例子的變數名稱就是 user_name，
有了變數名稱，
變數的設定值就是該標籤裡的 value 值，
如果 value 沒有設定值，
例如「value=""」，
等號後面只寫兩個相連的雙引號，
代表該設定為一個空值。
如果某個文字輸入欄標籤雖然有設定 name， ，
卻沒有設定 value ，
或者 value 設定的是一個空值，
變數的設定值就是網頁用戶所輸入的內容。
本文章第24跟27這兩行文字方塊都定義「value=""」，
所以表單送到程序處理的時候，
該欄位的變數定義內容就是用戶輸入的內容。

特別要說的事「onkeydown」， 那是一種鍵盤事件，
當網頁用戶「按下」（keydown）某個按鍵的時候就會觸發鍵盤事件，
事件產生之後便會開始執行該事件等號後面的程序，
這些程序大部分是呼叫一個函數或只是一個指令，
如果有超過一個的指令，
每個指令就要用分號(;)隔開。
此範例23與24那兩個 input 標籤中的onkeydown等號之後的，
是一個條件敘述和一個指令，
瀏覽器會在符合條件的按鍵被按下時執行此指令。？
請注意這段代碼：

"if(event.keyCode==13) return false"

意思是說 「如果按下迴車鍵
『if(event.keyCode==13)』，
什麼事情也不要做
『return false』。
這是避免在文字輸入欄按回車把資料送出的常見寫法。
onkeydown 能夠讓瀏覽器在使用者按下某個按鍵時就進行某個動作。
各位在設計網頁的時候，
假如希望利用某個鍵盤按鍵來產生特殊功能，
那就可以透過鍵盤事件處理來達成，
我們會在日後談到鍵盤處理的時候深入討論。

接下來要說的事多行文字輸入欄 textarea標籤中的 wrap 屬性應用， 它有幾種設定方式，如下說明：
wrap="off"：
輸入文字超過長度會出現水平捲軸
wrap="virtual"（或"hard"）：
輸入文字超過長度會自動換行，
但送出之資料，只有在按 enter 鍵處換行
wrap="physical"（或"soft"）：
輸入文字超過長度會自動換行,
且依照在螢幕上所見到的樣式送出表單。
根據上面列出的幾個 wrap 型式，
本文章代碼中第31行的 textarea wrap=physical，
代表在文字編輯區內輸入文字超過長度的時候會自動換行，
然後以瑩幕上所見的樣式送出表單。
但我不確定它自動換航以後會不會產生換行符號，
我們將可以在寫php處理這張表單的時候測驗看看。

本文章結束之前還有個東西要向大家解釋一下， 請注意範例程式的第34行，
那是送出表單的按鈕標籤，
有另外一個事件處理(onclick)，
之前我們學過了，
它代表按下此按鍵即進行等號後的動作，
在這裏我們要做的是呼叫 check_input() 這個涵數，
請看看 onclick 等號之後的寫法，
javascript 呼叫函數的方式只需要把函數名稱打上就行。
我原本可以不使用 check_input() 這個涵數，
把函數中的指令直接寫在 onclick 等號之後，
但一方面為了程式管理方便，
另一方面因為將來我們還要繼續學習如何定義與呼叫函數，
因此我在這裡使用了呼叫 check_input() 的方法。
此外，
雖然本文章範例的函數定義寫在頭標籤裡面，
事實上此範例如果要把這個函數放在體標籤也可以順利執行的，
記得函數定義要放在 script 開始與結束標籤之內，
至於到底在哪邊定義函數比較好？
那就要看你程式的執行狀況了，
一般來說，
如果希望某段程序越早被執行越好，
該程序碼當然就要放在整個頁面的月前面越好囉，
實際的運作情況還是要自己玩看看了。
此表單雖然已具有簡單的驗證功能，
但事實上還有個破綻沒有處理，
如果表單裡的必填欄位未填就送出，
跳出小視窗提醒，
按下「確定」後是不是該回到該欄比較合理？
現在則是按下確定就沒了。
這就要牽涉到劇本抓取焦點的方式了，
我們希望下一篇文章繼續討論這個問題。




[/code]

執行

回 · 大家來學php 這一篇文章封面
本文張貼者：程咬金〔張貼時間：民國101年7月5日（星期四）6點00分 | 更新次數 #2 | 最後更新：民國102年4月30日（星期二）5點49分〕 | 寫信給程咬金

部落格首頁

學習的故鄉首頁
本站公告：〔您越需要我們，我們就越有創意〕 本站說明書：〔發現故鄉還有改進的地方，請來信告訴原丁們〕
觀察應用學習點數 ：〔咱的故鄉有您的參與，會使我們有更大的發揮空間，展現更豐富精彩的學習畫面〕 〔期待藉由無障礙網頁設計，能讓視障小朋友更愛看書、更愛寫作且更愛學習〕：盲用電腦「心得分享」
〔為了讓我們有乾淨的學習環境，請勿任意在本站散播商業廣告與不合法文件或聯結〕：本站宣示