(基本功 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 表單範例

</body></html>

改以PHP撰寫

<?php

echo "<html><body>

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

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

</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

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