羅德興老師的教學歷程檔案 - 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是資料傳遞的方式,
    getpost兩種方式。

    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

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