廣告聯播

顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

2009年7月14日 星期二

[Apache] 網頁目錄保護 .htaccess 檔案

From: Polin Wei

利用 .htaccess 檔案來保護網頁目錄, 只能適用於 Apache 伺服器, 對於 ISS 並不適用, 假如你無法修改 Apache 的設定檔, 那 .htaccess 檔案會是一個很好的選擇 .htaccess 能在你架設的網站目錄內對網站伺服器產生控制作用, 目錄內一旦有這個檔案, 該目錄及所有子目錄都會受到影響.

.htaccess 是一個文字檔, 你可以使用任何像是 NotePad 的文字編輯器直接撰寫, 編輯這個檔案, 然後再用 ftp 的方法上載到 Apache 的目錄內. 如果使用 ftp 的軟體需選擇傳輸模式, 要記得選擇 ASCII 模式.

以下針對 .htaccess 檔案內容的參數作一些說明:

Options +Indexes : 顯示目錄內的檔案清單
Options -Indexes : 不顯示目錄內的檔案清單
IndexOptions +FancyIndexing : 檔案清單呈現時, 出現檔案類型的小圖示
IndexOptions -FancyIndexing : 檔案清單呈現時, 不要出現檔案類型的小圖示
IndexIgnore *.php *.html : 隱藏指定的檔案, 其余的檔案則呈現出來. 此範例為 隱藏 .php *.html 的檔案

2009年7月11日 星期六

[Form] 如何取消表單輸入時的自動完成

From: Polin Wei

一般的情況 IE5/6/7, FireFox 預設是將 AutoComplete 打開。見:IE5/6/7-工具-內容-自動完成選項。

<form>
    <input type="text" name="user_name">
</form>



但有時候我們並不需要 AutoComplete,例如需要使用者自己再次輸入密碼而非自動完成, 或者用 AJax 將後端整理好的資料讓使用者挑選時..., 在上述的情況時, autocomplete 都會干擾使用者的操作, 若要讓特定的表單欄位不要自動完成 ( autocomplete ), 只要將此表單輸入元素的autocomplete屬性設置為off即可。

<form>
    <input type="password" name="Password" autocomplete="off">
</form>



如果所有表單元素都不想使用autocomplete功能, 則可以用下面的方法:


<form autocomplete = "off">
    <input type="text" name="user_name">
    <input type="password" name="Password" >
</form>

2008年10月6日 星期一

[DOM] W3C DOM 文件物件模型(Document Object Model,DOM)

From: Polin Wei

文件物件模型(Document Object Model,DOM)是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述(representation),讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。

[全球資訊網協會](World Wide Web Consortium,W3C)建立了 [DOM] 的標準,稱之為「W3C DOM」。在當今主要瀏覽器都已正確實作的情況下,W3C DOM 使強大、跨瀏覽器的應用程式成真。


  現在舉個 HTML檔案 實例來說明 DOM(Document Object Model,DOM)文件物件模型,這樣比較能瞭解。


W3CDOM.html

<html>
<head>
<script type='text/javascript'>
function showTd(){
   var nodes = document.getElementsByTagName("td");
   for(var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      alert(node.childNodes[0].nodeValue);
    }
}
function showTitle(){
   document.getElementById("myTitle").innerHTML ="<h2>我與小崴崴</h2>";
}
</script>
</head>
<body>
<input value="showTitle" onclick="showTitle();" type="button"><br>
<input value="showTDValues" onclick="showTd();" type="button"><br>


<div id="myTitle"></div>
<table>
  <tbody>
    <tr>
      <td>EmpID</td>
      <td>UserID</td>
      <td>UserName</td>
    </tr>
    <tr>
      <td>E0001</td>
      <td>Polin</td>
      <td>我</td>
    </tr>   
  </tbody>
</table>
</body>
</html>



  DOM 對 W3CDOM.html 檔案視為一個標籤文件,每個標籤視作一個節點,這些節點從<html>
標籤開始作為根標籤,上面的 W3CDOM.html 可以用下圖來表示(下圖中標示出相對於橘色tr節點的屬性):

PS:可以使用hasChildNodes()來測試目前的DOM節點物件是否有子節點。

  在JavaScript中可以使用document物件取得HTML文件中節點的值,如標籤上的id屬性id="myTitle",可以使用getElementById()並指定id名稱來取得節點的DOM物件,例如:

function showTitle(){
   document.getElementById("myTitle").innerHTML ="<h2>我與小崴崴</h2>";
}


  您也可以操作getElementsByTagName()並指定標籤名稱來取得節點,例如可使用以下的程式片段,顯示上例的表格文字內容:

function showTd(){
   var nodes = document.getElementsByTagName("td");
   for(var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      alert(node.childNodes[0].nodeValue);
    }
}


您可以使用DOM節點的innerHTML屬性來設定節點中的HTML內容,不過innerHTML並不是W3C DOM規範中的標準屬性,只是目前剛好大部份的瀏覽器都有支援,標準的作法是要懂得各種DOM上建立、設定節點的方法,可以深入瞭解這 innerHTML屬性。

WordPress 架站必備外掛