通用HTML(8)-【表單篇】

當我們要撰寫「動態網頁」時,表單是不可不會的HTML語法。什麼是動態網頁呢?簡單的來說就是可以根據不同的使用者給予不同的內容,就是動態網頁,反之則稱為「靜態網頁」。常見的動態網頁語法包含CGI、ASP、PHP與JSP等等。動態網頁最基本的就是會員註冊與登入,當我們登入或註冊時所填的表格,即稱為表單。表單語法可以將用戶所輸入的資料,傳送到指定的伺服器中,讓動態網頁程式進行處理。

元素標籤

form(表單)、input(輸入欄位)、select(下拉式選單)、option(選項)、textarea(多行文字方塊)、button(按鈕)、label(表單資訊)、fieldset(表單分組)、legend(群組標題)、optgroup(下拉選單群組)

關連文章:HTML5表單Input型態HTML5表單新標籤與form屬性

button Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:建立一個按鈕,送出表單、重置表單或其它功能。效果和input的按鈕一樣。

屬性:

  • class=“類別”:指定物件類別。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style=“樣式”:設定顯示樣式。
  • tabindex=“數字”:使用Tab時的瀏覽順序。
  • type=”submit | reset | button”:按鈕種類。
  • value=“值”:按鈕所夾帶的值。

【範例】


【結果】

fieldset Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:設定表單的群組。

屬性:

  • align=“水平位置(left | center | right)“:指定物件的水平位置,不建議使用,已漸漸被CSS取代。
  • class=“類別”:指定物件類別。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style=“樣式”:設定顯示樣式。

【範例】

將同一個表單的內容進行分組。

【結果】

將同一個表單的內容進行分組。

form Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:宣告一個表單,並指定資料傳遞的目標網頁。

屬性:

  • action=“目標網頁”:指定目標網頁的網址。
  • * enctype=“multipart/form-data”:指定一個MIMETYPE編碼,將輸入的資料編碼後再傳給伺服器。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • method=”GET | POST”:指定資料傳送的方式。
  • * style=“樣式”:設定顯示樣式。 * target=“目標視窗ID(_blank | _parent | _search | _self | _top)“:指定網頁開啟的位置,若不指定則在原視窗開啟,通常使用_blank開新視窗,或設定視窗ID在指定的視窗中開啟。

    【範例】

    
    

    【結果】

    input Microsoft Office FrontPageAdobe Dreamweaver CS3

    說明:插入表單輸入的物件,沒有結尾標籤。可以指定多種不同資料輸入的型態,不同的型態會有不同的屬性。在HTML5中新增了多種type與屬性,請參考「HTML5表單Input型態」。

    屬性:

  • checked=“checked”:將資料預設為選取。只有當type等於checkbox或radio時有效。
  • * class=“類別”:指定物件類別。 * id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。 * name=“名稱”:資料欄位名稱,建議與ID相同。 * src=“圖片網址”:指定圖片按鈕的網址。 * style=“樣式”:設定顯示樣式。 * tabindex=“數字”:使用Tab時的瀏覽順序。
  • type=”text | button | checkbox | file | hidden | image | password | radio | reset | submit”:資料輸入型態。
  • * value=“值”:輸入欄位的值。

    【範例】

    文字輸入方塊:

    密碼輸入:

    檔案上傳:
    (需配合表單的enctype值)

    隱藏欄位:
    核取方塊為覆選
    核取方塊A 核取方塊B 核取方塊C
    選項按鈕為單選,相同name的選項會被視為一個group。
    選項按鈕A-1 選項按鈕A-2 選項按鈕B-1 選項按鈕B-2
    按鈕的效果與button標籤相同。

    【結果】

    文字輸入方塊:

    密碼輸入:

    檔案上傳:
    (需配合表單的enctype值)

    隱藏欄位:

    <fieldset>
      核取方塊為覆選<br /><input type="checkbox" value="A" />核取方塊A <input type="checkbox" value="B" checked="checked" />核取方塊B <input type="checkbox" value="C" />核取方塊C<br /> <br />選項按鈕為單選,相同name的選項會被視為一個group。<br /> <input type="radio" value="A1" name="A" id="A" />選項按鈕A-1 <input type="radio" value="A2" name="A" id="A" checked="checked" />選項按鈕A-2 <input type="radio" value="B1" name="B" id="B" checked="checked" />選項按鈕B-1 <input type="radio" value="B2" name="B" id="B" />選項按鈕B-2<br />
    </fieldset>
    
    <fieldset>
      按鈕的效果與button標籤相同。<br /><input type="image" src="http://lh5.ggpht.com/_SAlWJ_xow1Y/TEwRvVCHPAI/AAAAAAAABV4/nz6nIc3Tt1E/omew_logo.gif" /><input type="submit" value="送出表單" /><input type="reset" value="重置表單" /><input type="button" value="一般按鈕" />
    </fieldset>
    
    <div style="text-align: right;">
      <a href="#元素標籤">回到【元素標籤】</a>
    </div>
    
    <p>
      <a id="legend" style="font-size: 18px; font-weight: bolder;">legend</a> <img style="width: 16px; height: 15px;" src="http://lh6.ggpht.com/_SAlWJ_xow1Y/TEwR1QBQpHI/AAAAAAAABWg/-YGDjFrJSys/dreamweaver.png" alt="Adobe Dreamweaver CS3" /><br /> 說明:設定表單群組的標題。<br /> 屬性:
    </p>
    
    <ul>
      <li>
        align="水平位置(<span style="text-decoration: underline;">top</span> | bottom | left | right)":指定物件的水平位置,不建議使用,已漸漸被CSS取代。
      </li>
      <li>
        class="類別":指定物件類別。
      </li>
      <li>
        id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
      </li>
      <li>
        style="樣式":設定顯示樣式。
      </li>
    </ul>
    
    <p>
      【範例】
    </p>
    
    <pre lang="html4strict">
    
    <legend>表單群組標題</legend>

    【結果】

    表單群組標題
    <div style="text-align: right;">
      <a href="#元素標籤">回到【元素標籤】</a>
    </div>
    
    <p>
      <a id="option" style="font-size: 18px; font-weight: bolder;">option</a> <img src="https://lh5.ggpht.com/_SAlWJ_xow1Y/TEwR1d4XVwI/AAAAAAAABWk/aMmrVqaGym4/frontpage.png" alt="Microsoft Office FrontPage" /> <img style="width: 16px; height: 15px;" src="http://lh6.ggpht.com/_SAlWJ_xow1Y/TEwR1QBQpHI/AAAAAAAABWg/-YGDjFrJSys/dreamweaver.png" alt="Adobe Dreamweaver CS3" /><br /> 說明:下拉式選單的單一選項。<br /> 屬性:
    </p>
    
    <ul>
      <li>
        class="類別":指定物件類別。
      </li>
      <li style="color: #993366;">
        label="物件標籤":指定物件的標籤。選項將會以標籤內容顯示。
      </li>
      <li>
        id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
      </li>
      <li style="color: #993366;">
        selected="selected":將選項預設為選取。
      </li>
      <li>
        style="樣式":設定顯示樣式。
      </li>
      <li>
        value="值":此選項所代表的值,預設值為標籤內容。
      </li>
    </ul>
    
    <p>
      【範例】
    </p>
    
    <pre lang="html4strict">
    

    <p>
      【結果】<br /> <select><option value="A">選項A</option><option value="B" selected="selected">選項B</option><option value="C">選項C</option></select>
    </p>
    
    <div style="text-align: right;">
      <a href="#元素標籤">回到【元素標籤】</a>
    </div>
    
    <p>
      <a id="select" style="font-size: 18px; font-weight: bolder;">select</a> <img src="https://lh5.ggpht.com/_SAlWJ_xow1Y/TEwR1d4XVwI/AAAAAAAABWk/aMmrVqaGym4/frontpage.png" alt="Microsoft Office FrontPage" /> <img style="width: 16px; height: 15px;" src="http://lh6.ggpht.com/_SAlWJ_xow1Y/TEwR1QBQpHI/AAAAAAAABWg/-YGDjFrJSys/dreamweaver.png" alt="Adobe Dreamweaver CS3" /><br /> 說明:插入下拉式選單。<br /> 屬性:
    </p>
    
    <ul>
      <li>
        class="類別":指定物件類別。
      </li>
      <li>
        id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
      </li>
      <li>
        name="名稱":資料欄位名稱,建議與ID相同。
      </li>
      <li>
        style="樣式":設定顯示樣式。
      </li>
    </ul>
    
    <p>
      【範例】
    </p>
    
    <pre lang="html4strict">
    

    <p>
      【結果】<br /> <select><option value="A">選項A</option><option value="B">選項B</option><option value="C">選項C</option></select>
    </p>
    
    <div style="text-align: right;">
      <a href="#元素標籤">回到【元素標籤】</a>
    </div>
    
    <p>
      <a id="textarea" style="font-size: 18px; font-weight: bolder;">textarea</a> <img src="https://lh5.ggpht.com/_SAlWJ_xow1Y/TEwR1d4XVwI/AAAAAAAABWk/aMmrVqaGym4/frontpage.png" alt="Microsoft Office FrontPage" /> <img style="width: 16px; height: 15px;" src="http://lh6.ggpht.com/_SAlWJ_xow1Y/TEwR1QBQpHI/AAAAAAAABWg/-YGDjFrJSys/dreamweaver.png" alt="Adobe Dreamweaver CS3" /><br /> 說明:插入一個多行文字輸入框。<br /> 屬性:
    </p>
    
    <ul>
      <li>
        class="類別":指定物件類別。
      </li>
      <li>
        cols="字元":指定文字輸入框的寬度,不建議使用,已漸漸被CSS取代。
      </li>
      <li>
        id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
      </li>
      <li>
        name="名稱":資料欄位名稱,建議與ID相同。
      </li>
      <li>
        rows="字元":指定文字輸入框的高度,不建議使用,已漸漸被CSS取代。
      </li>
      <li>
        style="樣式":設定顯示樣式。
      </li>
    </ul>
    
    <p>
      【範例】
    </p>
    
    <pre lang="html4strict">
    

    <p>
      【結果】<br /> <textarea>這是一個多行文字輸入框</textarea>
    </p>
    
    <div style="text-align: right;">
      <a href="#元素標籤">回到【元素標籤】</a>
    </div>