CH7 與訪客互動
一、避免空白的表單欄位
確定使用者沒有留下必填的欄位沒填。
下面這個空格如果沒填資料的話會出現警告訊息。
程式碼
姓名:<input type="text" name ="name" onBlur="if(this.form.name.value==''){alert('請填寫你的姓名')}";>
<input type="button" name="send" value="確定" onclick="if(this.form.name.value == ''){alert('請填寫你的姓名'); return false;};"/>
示範
二、複製表單欄位
下面示範一個按下checkbox時會將資料複制到另一個欄位的方法
程式碼
<form><fieldset><legend>戶籍地址</legend>
<input type="text" name="bfname" value="甲地">
</fieldset>按這裡複製戶籍地址:<input type="checkbox" name="copyit" onclick="if(this.form.copyit.checked == true){form.sfname.value=form.bfname.value;}">
<fieldset><legend>通訊地址</legend>
<input type="text" name="sfname">
</fieldset></form>
示範
三、使用範例輸入降低錯誤
先將範例填入欄人,當使用者移至該欄時再將欄位清空,當使用者移開該欄且未輸入資料時,再將範例資料填回
程式碼
<form><fieldset><legend>聯絡方法</legend>
姓名:<input type="text" name ="name" value="輸入姓名" onFocus="if(this.form.name.value='輸入姓名'){this.form.name.value='';}" onBlur="if(this.form.name.value==''){this.form.name.value='輸入姓名'};"/>
</fieldset></form>
示範
四、格示化使用者輸入的資訊
資料存進資料庫前重新格式化。
PHP函數:
ucfirst():字串裡的第一個字大寫
ucwords():字串裡的第一個字小寫
strstr():取得字串第一次出現的位置
substr():取得部份字串
ereg():在字串裡搜尋符合正規表示式樣板的字串
ereg_replace():使用正規表示式搜尋並取代字串
JavaScript函數
string.search():在字串裡搜尋符合正規表示式樣板的字串
string.repalce():使用正規表示式搜尋並取代字串
string.toUpperCase():字串裡的字母都變大寫
string.toLowerCase():字串裡的字母都變小寫
string.slice():取得部份字串
string.concate():把二個字串接起來
姓名改成大寫PHP程式
function formatName($name){
if(ereg("[A-Z]$", $name)){
$name=strtolower($name);
}
$name=ucwords($name);
if($strstr($name, "'")){
$name_split=split("'", $name);
$name=$name_split[0]."'";
$name.=ucfirst($name_split[1]);
}
if(ereg("^Mc", $name)){
$name="Mc".ucfirst(substr($name, 2));
}
return $name;
}
修正電話號碼PHP程式
function formatPhone($phone){
$phone=ereg_replace("([[:punct:]])|([[:punct:]])","",$phone);
$phone=ereg_replace("^1", "", $phone);
$phone=substr($phone, 0, 3)."-".substr($phone, 3, 3)."-".substr($phone, 6, 4);
return $phone;
}
五、從資料庫產生表單的選單
建立一個可以將資料庫裡的資料轉換成下拉式選單的PHP函式
<? echo makeSelectList(dbTable, dbFieldValue, dbFieldDisplay, menuField); ?>
建立MySQL連線
$dbName="mydatabase";
$dbConnection=mysql_connect("dbhost", "dbuser", "dbpassword")or die("Couldn't Connect.");
$db=mysql_select_db($dbName, $dbConnection)or die("Couldn't select database.");
宣告函式原型
function makeSelectList($dbTable, $dbFieldValue, $dbFieldDisplay="", $menuField, $idSelected="--", $size=1, $defaultText="--"){
$menu="";
$query="SELECT $dbFieldValue, $dbFieldDisplay FROM $dbTable ORDER BY $dbFieldDisplay";
$resultResource=mysql_query($query);
if($resultResource){
$resultRows=mysql_num_rows($resultResource);
$menu.="<select name=\"$menuField\" size=\"$size\">\n";
if($idSelected == '--'){
$menu.="<option value=\"--\" label=\"--\" selected>$defaultText</option>\n";
}
for($rowIndex=0; $rowIndex<$resultRows; $rowIndex++){
$id=mysql_result($resultResource, $rowIndex, 0);
$name=mysql_result($resultResource, $rowIndex, 1);
if($idSelected == $id){
$menu.="<option value=\"$id\" label=\"$name\" selected>$name</option>\n";
}else{
$menu.="<option value=\"$id\" label=\"$name\">$name</option>\n";
}
}
$menu.="</select>\n";
mysql_free_result($resultResource);
}
return $menu;
}
使用方法
<? echo makeSelectList(favcolors, colorID, colorName, favcolor, "--", 1, "Select yourfavorite color") ?>
六、在資料庫的單一欄位裡儲存多項資料
在HTML欄位名稱裡加上左右中括號[],就可以讓多重選擇的元素以陣列方式回傳選取的結果。
<input type="checkbox" name="favcolors[]" value="Red">Red
然後用PHP的內建函式implode()把陣列轉換成以特殊字元分隔的字串,再把這個字串存進資料庫裡。
$favcolors_imp=implode("|", $favcolors);
把字串轉回陣列
$favcolors_exp=explode("|", $favcolors_imp);
七、使用圖形化字元字串進行表單驗證
如何確保是真人在填寫你的網頁內容?
「Capthca」completely automated public Turing test to tell computers and humans apart
「完全自動化公開的回應測試療別電腦和真人」
「申請Captcha服務」「Captcha服務PHP範例」
<?
include("CaptchasDotNet.php");
$captchas=new CaptchasDoNet('..帳號..','..密碼..');
$random=$captchas->random();
$url=$captchas->url();
?>
<input type="text" name="typedpassword" size="6" maxlength="6" value="">
<input type="hidden" name="random" value="<?= $random; ?>">
<img src="<?= $url ?>" alt="載入驗證通行碼中..." width="240" height="80">
<?
include("CaptchasDotNet.php");
$captchas=new CaptchasDoNet('..帳號..','..密碼..');
if(! $captchas->validate($random)){
captcha只能用一次...
}elseif(! $captchas->verify($typedpassword)){
通行碼錯誤....
}else{
OK
}
?>
參考資訊:「Captcha Project網站」、「Java Captcha產生器、驗證器」、「PHP Captcha產生器、驗證器」、「Perl Captcha產生器、驗證器」、「Wikipedia介紹Captcha」
八、在mailto連結插進額外的資訊
擴充mailto連結讓它包含信件主題、內容以及額外的收件者。
<a href="mailto:aaa@domain.com">aaa@domain.com</a>
加入Subject、Body屬性
<a href="mailto:aaa@domain.com?Subject=bbbbb&Body=cccccccc">aaa@domain.com</a>
超過二個人可用逗號分開,加入CC、Bcc
<a href="mailto:aaa@domain.com,bbb@domain.com&Cc:ccc@domain.com&
Bcc:ddd@domain.com">address@domain.com</a>
九、把訪客的訊息傳到行動電話上
建一個結合JavaScript文字計數器的郵寄表單,以SMS的方式把網頁上的訊息傳給行動電話。
「簡訊服務(SMS)」允許行動電話的使用者在手機上傳送和接收文字訊息。
function smsLimiter(message, counter, max){
var strTemp="";
var strCharCounter=0;
for(var i=0; i<message.value.length; i++){
var strChar=message.value.substring(i, i+1);
if(strChar=='\n'){
strTemp+=strChar;
strCharCounter=1;
}else{
strTemp+=strChar;
strCharCounter++;
}
}
counter.value=max-strTemp.length;
}
程式碼
<form><fieldset><legend>Send SMS Email</legend>
<h5>Name</h5>
<input name="name" type="text" value="" size="20" maxlength="20">
<h5>Message</h5>
<textarea name="smsmsg" clos="35" rows="6"
onKeyUp="smsLimiter(this.form.smsmsg, this.form.remaining, 160);"></textarea>
<p><strong>Characters Remaining:</strong><input name="remaining"
type="text" value="160" size="5" maxlength="5" readonly></p>
<input name="remLines" type="hidden" value="10">
<h5>Callback Number</h5>
<input name="callback" type="text" value="" size="12" maxlength="12">
<input name="send" type="submit" value="Send" onClick="if(this.form.remaining.value<'0'){alert('too long.');return false;};">
<input name="f" type="hidden" value="send">
</fieldset></form>
示範
參考資訊:「Wikipedia SMS」
十、使用cookie記住使用者的選擇
記錄下使用者的喜好設定。
參考資訊:「PHP cookie處理函式1」、「PHP cookie處理函式2」
十一、國際化你的網站
十二、建立電子報
全站熱搜
留言列表