羅德興老師的教學歷程檔案 - 111-2 三甲 ASP & DB - (基本功 1 ) Form 表單元件複習
 

企業資訊與管理系
助理教授/日導
羅德興

 歷程檔案 Portfolio

    (基本功 1 ) Form 表單元件複習

    (基本功 1 ) Form 表單元件複習



    (以下取材自  溫瑞烘教授  教學網頁  http://alliance.cust.edu.tw/portfolio/myPortfolio?path=410705&tag=105-1-資料庫程式設計)

    請先備好工具:  (1) 網站 Server + PHP + MySQL, 如 Appserv, (2) 編輯軟體， 如 Notepad ++, (3) 資料庫操作軟體，如 HeidiSQL.

    HTML Form 表單設計

    HTML form 是表單功能，網頁上常常會看得到表單的應用，例如註冊、
    登入、購物車、報名表等，幾乎都是    HTML Form網頁表單應用！

     

    HTML Form 語法

    <form action="資料傳送目的地" method="資料傳遞方式">
    表單內容與表單元素
    </form>

     

    標準的HTML表單是由<form>標籤開始，結尾使用</form> 標籤，兩個標籤之間
    就是放置表單元素的地方，    form會將填完的資料，傳送至action所設定的地方，
    例如傳給一個    PHP頁面進行資料的接收，method是資料傳遞的方式，
    有    get與post兩種方式。

    get以網址列傳送，以PHP為例，必須使用$_GET取得變數內容。

    post以內部記憶體傳送，必須使用$_POST得變數內容。

    以下先看個實範例與語法，立即了解 HTML 表單的實際應用寫法。

    HTML Form     表單範例

    <html><body>

    <form action="get.php" method="get">
    姓名：    <input type='text'><br>
    電話：    <input type='text'><br>
    <p><input type='submit' value='    送出    '></p>
    </form>

    </body></html>

     

    改以PHP撰寫

    <?php

      echo "<html><body>

    <form action=’get.php’ method=’get’>

    姓名：<input type='text'><br>

    電話：<input type='text'><br>

    <p><input type='submit' value='送出'></p>

    </form>

    </body></html>";

    ?>

     

     

    在 <form> 與 </form> 標籤之中使用了兩個表單元素，分別為文字輸入欄位
    <input type='text'>與送出表單的按鈕submit，當填寫完資料並送出表單，
    系統就會自動以    get的方式將資料傳送到get.php這支後端程式，這裡需要
    注意的是     method='get' 的get 必須是小寫，同樣的 post 也要小寫，
    至於     get.php 的資料處理功能則需要另外寫。

      

    常見表單元素

    表單元素

    語法

    文字輸入欄位 input type= text

    <input type="text" name="" value="">

    密碼輸入欄位 input type= password

    <input type="password" name="" value="">

    下拉選單 select option

    <select name=""><option value=""></option></select>

    選項按鈕 radio buttons

    <input type="radio" name="" value="">

    核取方塊 checkbox

    <input type="checkbox" name="" value="">

    文字輸入欄位 textarea

    <textarea name=""></textarea>

    隱藏欄位 input hidden

    <input type="hidden" name="" value="">

    顯示表單按鈕 button

    <input type="button" name="">

    送出表單按鈕 submit

    <input type="submit" name="" value="送出">

     

     複習題:分別以get與post方法撰寫程式，注意get的網址列
    第一個頁面有 帳號(text)與密碼(password) 
    送出後以個人學號與身分證號為帳號與密碼，檢查無誤後
    出現第二個頁面，有
    班級：下拉選單 (select 四技資管三甲、四技資管三乙、四技資管三丙)
    性別:radio
    姓名：text
    興趣(checkbox)：多重選擇(至少5種)
    我的意見(textarea)
    檔案上傳(file)
    第三個頁面顯示結果(table)




    全部共 0則留言
    登入帳號密碼代表遵守學術網路規範

    		文章分類 Labels

    		最新文章 Top10

    中華科技大學數位化學習歷程 - 意見反應