上篇我們只用到表單文字資料輸入的方式,
那樣其實是很不夠的,
畢竟我們所需要的網頁使用者的資料,
不會只是一個文字內容而已吧,
所以日後我們還有更多東西要學習。
原先覺得跟各位在學習表單設計的同時,
順便一起來學習用 php 處理表單,
這叫做雙管齊下,
水到渠成。
可是大家都很忙,
連我自己,
除了忙著賺錢,
也忙著偷懶,
無法專心地好好的寫好 php 程式,
再怎樣好玩的遊戲如果沒有大家一起來玩,
那會讓人覺得挺無聊的。
所以後來想想,
還是先來學習表單的製作方式,
才來玩玩如何使用 php 處理表單資料。
等我們學會設計基本的表單之後,
再來學習如何處理我們所設計的表單資料或許會更有成就感。
除了用 php 處理表單之外,
也可以用 javascript 來幫忙處理或者檢查表單喔!
希望這些好玩的東西我們都有機會學得到。
哈哈!
順其自然,
大家一起來討論討論囉!
如果你那麼愛玩線上遊戲,
把網頁程式設計當作是另類的線上遊戲,
這樣的線上遊戲,
越多人來玩才越有趣,
鴿子你們說對不對?
在 <form>
與
</form>
之間我常用到的標籤有下面的這些:
input:
資料的輸入欄位,
這個標籤最常用,
除了上一篇文章我們已經學過的文字輸入欄標籤外,
等一下將會學到更多的 input 資料輸入類型。
select:
這是下拉式選單欄位標籤,
此標籤其實也很常見,
如果你要把許多項目列在網頁上面,
想讓使用者選擇其中一種的話,
就可以用 select 列出這些項目,
然後用戶可以在拉開的下拉選框點選他們想要的其中一個選項,
使用語法詳如後敘。
textarea:
一個可用來輸入大量資料的文字編輯框標籤,
咱故鄉發表文章的文字區塊就是用這個標籤來做的,
所以我們才可以在網路上寫文章。
本篇文章我們主要是想對<input>有更深入的學習,
因為這是表單設計中最常用到的標籤,
首先我要告訴各位幾個我常用的 input 屬性,
所謂的屬性,
我也不知怎麼解釋,
反正就是跟標籤名稱一起包在小於跟大於之間,
標籤名稱空一格之後的那些東東就叫做標籤的屬性,
而且大部分狀況下,
屬性名稱雖然是固定的,
但是它的設定值可以任由程式設計者來決定,
因此,
屬性名稱後面都有等於 (=) 這個符號,
此符號表示「設定」的意思,
要設定什麼內容給某個屬性,
就要在等於符號的右邊來寫,
這個內容最好養成習慣用引號包起來。
我這樣子說可能大家會跟我一樣有點霧煞煞對不對?
沒關係,
繼續玩下去我們就會知道了。
有些 html 標籤可能會有好幾個屬性,
但有的連一個屬性也沒有,
那麼 input 這個標籤究竟有哪些屬性呢?
type:
這是「類型」的意思,
許多 html 的標簽屬性我們都可以省略不寫,
但是當我們在設計表單,
用到 input 的時候,
type 這個屬性是不能省略不寫的哦!
那麼,
input 的類型有哪些呢?
我們稍後會說,
但至少我們在閱讀過
第一張表單
這篇文章的時候,
已經知道
<input type="text">
這是要在頁面上呈現一個可以讓網頁使用者輸入文字的欄位。
name:
這個屬性是用來設定該欄位的名稱的,
當我們要用 php 來處理表單資料的時候,
每個需處理的欄位都要有個名稱,
才可以丟給 php 去處理。
因此欄位的名稱也非常重要,
想想看,
如果世界上所有的東西都沒有屬於它們的名字或者稱呼方式,
這會是個怎樣的世界呢?
input 一定要有個欄位名稱,
才可以讓 php 抓到用戶在該欄位所輸入的內容,
並且也才能加以處理,
例如:
<input type="text" name="user">
這表示有個文字輸入欄的名稱叫做「user」,
當瀏覽器把這個欄位資料丟給 php 處理的時候,
它只要呼叫 $usere 這個變數名稱,
便可以知道網頁用戶到底在這個欄位裡寫了蝦咪蛙鴿了?
我們會在學習 php 時進一步討論如何處理表單資料?
value:
設定該欄位的預定值,
若無設定則為空白欄位,
如果網頁用戶在該欄位有輸入任何內容,
該內容便會成為該欄位名稱的設定值,
而把 value 的這個預定值替代掉。
例如:
<input type="text" name="user" value="程咬金">
意思是說這是一個名為「user」的文字輸入欄,
且該文字輸入欄的預設值為「程咬金」,
如果網頁用戶沒有在該欄位輸入任何資料的話,
那麼當 php echo $user 的時候,
抓出來的就是「程咬金」這三個字,
反之如果用戶輸入了其他的內容,
例如他們可能隨便亂寫一些哩哩扣扣的文字,
如此 php 在 echo $user 的時候,
印出來的就是哩哩扣扣的內容了。
size:
設定該欄位呈現在頁面上的寬度,
其設定單位是字元,
內定值為20。
例如:
<input type="text" size="60">
設定依個可以輸入 60 個字元寬度的文字輸入欄,
但事實上超過 60 個字元也還是可以繼續輸入內容啦!
只不過顯示在畫面的寬度,
只能看到 60 個字元那麼寬罷了。
maxlength:
用來設定該欄位的最大長度,
其設定單位也是字元。
我們把上面那個敘述修改一下,
<input type="text" size="60" maxlength="100">
size="60",
顯示寬度雖然只有 60 個字元,
但還是可以繼續再寫,
如果加上 maxlength 這個屬性,
maxlength="100",
那表示說在這個欄位輸入的內容最多就是 100 個字元了,
你硬是要再敲字進去的話也沒有用,
因為 maxlength 就是最大的限制了。
accesskey:
設定該欄位的快速鍵,
這個很好用,
許多無障礙的快速鍵設定用的就是這個屬性。
設定值是英文字母,
不分大小寫,
例如:
<input accesskey="a">
就表示按下Alt+A會跳到這個欄位,
不必一直按 tab 像烏龜一樣慢慢地跳到此處才能開始填資料。
下面這三種屬性都是沒有設定值的,
只要把屬性名稱寫好就可以產生屬於它們的效果,
稍後當我們學到製作選擇鈕(radio)、
核取方塊(checkbox) 的時候就會用到,
還有 select,
它雖然不再 input 的範疇內,
布過也會用得到喔!
1. checked:設定該欄位為預定的選項;
2. readonly:設定該欄位只能顯示資料,不能輸入資料;
3. disable:設定該欄位的屬性是不可以被選取的,這是HTML4.0新增的功能。
我們還會在下一篇文張繼續討論究竟該如何在 input 這個標籤裡使用這些屬性,
希望大家會喜歡!晚安!
回 · 大家來學php 這一篇文章封面