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>

示範
Send SMS Email
Name

Message

Characters Remaining:



Callback Number






參考資訊:「Wikipedia SMS

十、使用cookie記住使用者的選擇


記錄下使用者的喜好設定。

參考資訊:「PHP cookie處理函式1」、「PHP cookie處理函式2

十一、國際化你的網站



十二、建立電子報


arrow
arrow
    全站熱搜

    jck11 發表在 痞客邦 留言(0) 人氣()