跳到主要內容

讓表單填寫更聰明更方便

在製作填寫會員資料表單的時候,我們可以再填入表單的欄位,設定初始值(例如:請填入中文姓名),但是使用者再填入時,必須將"請填入中文姓名"刪除後再輸入自己的姓名。

我們可以利用Javascript程式,做出以下兩種效果:

  1. 滑鼠游標移入後自動移除提示。
  2. 未在表單欄位輸入文字,滑鼠移開後重新顯試提示。
效果演示連結

提供程式語法如下:
請在<head></head>標籤內加入下列程式:

<script type="text/javascript">
function KW_autoClear(obj,def){if (obj.value==def) obj.value=""}
</script>

然後再表單的部分修改如下:

<input name="m_name" type="text" class="fillForm" id="m_name" onfocus="if(this.value=='請輸入中文姓名!!')this.value='';KW_autoClear(this,'請輸入中文姓名!!')" onblur="if(this.value=='')this.value='請輸入中文姓名!!'" value="請輸入中文姓名!!" maxlength="10" />



而Dreamweaver有外掛可以讓您不用寫程式,輕鬆做到以上效果,外掛名稱:
  1. autoClear.mxp
  2. autoDefaultField.mxp

留言

這個網誌中的熱門文章

AS3.0中常用的三種滑鼠點擊事件

在AS3.0中,與滑鼠點擊的相關事件有3種: MouseEvent.CLICK : 在實體物件上將滑鼠左鍵按下,並放開,兩個動作都有才會發生事件。 MouseEvent.MOUSE_DOWN :在實體物件上將滑鼠左鍵按下,即會發生事件。(類似onPress) MouseEvent.MOUSE_UP :在實體物件上將滑鼠左鍵放開,即會發生事件。(類似onRelease) 範例: 其中abc_1為場景中的MovieClip物件 stop(); /*一開始時間軸停止*/ abc_1.buttonMode = true; /*顯示滑鼠按鈕手勢指標*/ abc_1.addEventListener(MouseEvent.CLICK,onClick); /*讓abc_1物件偵聽,當發生MouseEvent.CLICK事件,則執行onClick函式*/ function onClick(e:MouseEvent):void{this.gotoAndPlay(2);} /*onClick函式*/

建立表格與表單

目的: 要在網頁建立一個輸入會員資料的表單 步驟大綱: 首先在要建立的區域插入一個表單<form>。 為了使表單看起來整齊,所以可以在表單內插入一個表格<table>。 表格左欄輸入欄位名稱,右欄插入對應的空白表單選項。 最後一列插入【送出表單】與【清除重填】兩個按鈕。  注意事項: 每個表單選項都必須要輸入名稱(英文),資料庫才可以work。 性別為單選題,兩個表單名稱相同(sex),預設狀態勾選"不核取",避免使用者不勾選。 生日表單使用"選取(清單/選單)",清單值第一欄項目標籤輸入"--請選擇--",值空白,避免使用者不勾選。 成品連結: 點我