請先在這個文字框輸入一段內容:
然後按下「送出查詢」,
此時頁面上會彈出一個小視窗,
你所輸入的內容就放在這個小視窗裡了。
是的!
前面這篇文章介紹過:
alert() 彈出小視窗,
這個彈出來的小視窗,
就是利用 alert() 指令做出來的效果。
許多網頁設計者經常利用 alert() 把要傳達的一些訊息丟出來,
然後呈現在用戶的電腦螢幕上。
問題是在這張表單裡,
alert() 所呈現的並不是網頁設計者所傳來的信息呀!
「奇怪!
它竟然能把我輸入的內容丟到小視窗裡?
alert() 怎麼抓得到文字欄裡的內容呢?」
如果理解此點,
學習表單驗證對你而言就變得簡單多了。
你有辦法得知網頁用戶輸入的資料,
就能透過劇本來作用戶端表單驗證。
要達到這個目標,
只有一件事情要做,
這件事做到,
就可以請劇本幫你處理表單,
那就是「幫每個元件設定一個 name」。
所謂的元件,
我也不知該怎麼解釋,
目前大家先這麼想好了:
就是一個大於跟小於包住的東西。
我們在學 html 的時候曾說,
用小於跟大於包住的東西叫做標籤,
現在我們學習劇本語言,
大家就暫且記住,
用小於跟大於包住的標籤加後面一大堆的屬性,
就叫做一個元件。
表單應用需要許多元件,
譬如最常用到的就是 input。
假如某些元件需要透過劇本加以處理,
替這些元件設定一個稱呼(name),
是非常重要的。
日常生活當中不管什麼東西也都有個稱呼不是嗎?
例如教室、桌子、點字機…等等的,
這樣我們要對別人下達一個請求、命令時就很容易表達:
「請把『教室』的『桌子』的『點字機』拿給我!」
同樣的,
只要每個元件都有屬於自己的稱呼,
不管要對哪些元件做怎樣的處理都很容易表達。
既然我們要把表單丟給劇本處理,
那我們就要先給這個表單設定一個稱呼:
<form name=form_name>
name= 後面的名稱你要怎樣定義就由你自己來決定囉!
然後要指出這張表單之中的哪個文字輸入欄要處理,
所以當然也該給它一個名稱囉:
<input type=text name=input_name>
看到了嗎?
學習表單的時候,
我們也說過 input 標籤有個 name 的屬性對吧?
不管用戶端的程式語言或者伺服器端的 php 程式,
不管那東西叫做標籤或者元件,
如果沒有 name 的話就無法丟給程序處理了,
「你要叫人家幫你做什麼事情,
當然要把明確的事項內容講出來讓人家聽得懂呀!」
劇本怎樣處理網頁元件呢?
最基本的概念就是告訴劇本要處理的東西在哪?
要怎樣處理?
注意「東西在哪」、「怎樣處理」這個概念很重要,
例如我們剛才說的:
「教室 的 桌子 的 點字機 拿給我」,
這樣說是不是就很明確了呢?
你一聽就知道我在講什麼。
用劇本處理標籤的表達方式也是這樣,
第一步就是把要處理的元件名稱告訴劇本,
例如「表單 的 文字輸入欄 的 文字內容」,
程序的表達方式就是
form_name.input_name.value
沒錯!
上面的 form_name 就是表單名稱,
input_name 是表單裡頭那個文字輸入欄的名字,
至於 value 呢?
那是文字欄裡頭的內容,
如果網頁用戶在那個文字輸入欄寫了些內容的話,
value 就是他寫的那些東西,
如果他沒寫的話 value 就是網頁設計者給的預設值。
「小數點(.)」我們就可以想像成「的」,
用口語來表達就是:
「表單 的 文字輸入欄 的 內容」,
我們的表單驗證要處理的就是這裡。
假設表單的名稱是「購物表單(name=buying)」,
文字輸入欄的名稱是「姓名(name=username)」,
value 的預設值是「您的大名(value="您的大名")」,
如此我們要處理的內容,
用程式來表達就是下面這樣子:
buying.username.value
用人類表達的方式就是
「購物表單 的 使用者名稱 的 內容」,
由於 value 被預設為「您的大名」,
如果網頁用戶沒有輸入任何內容的話,
該內容就是「您的大名」。
好啦!
那現在讓劇本知道你想要處理的物件在哪裡的表達方式你已經懂了嗎?
假如已經理解了的話,
我們就會想到:
「既然我已經知道怎樣告訴劇本要處理的東西放在哪裡了,
那麼接下來要叫劇本怎樣處理這個東西呢?」
寫這篇文章有點耗費心思,
且讓我休息一下,
明天再繼續吧!
請多指教。
不管你能否看得懂都讓我知道一下,
好讓我考慮下一個篇章該怎樣描寫,
謝謝大家捧場。
p.s.
這張表單其實有個問題,
如果你在文字輸入欄輸入內容後直接按迴車的話也許會有點狀況?
在故鄉的許多表單這方面的問題都能解決,
也就是說你在文字輸入框填寫內容以後按迴車是不會有任何作用的,
但在我這張表單如果你在文字輸入欄按迴車鍵,
瀏覽器就會把你所輸入的資料送出去了,
偏偏我在這張表單並沒有設定 action,
那會有啥效果出現?
請自己試看看囉。
如果要看到正常的效果,
請把文字欄輸入的內容寫好之後,
按送出查詢這個按鈕才有作用。
回 · 用劇本寫程式 這一篇文章封面