| |
5-2下拉式選單傳遞
內容：
5-2-1 HTML
下拉式選單
下拉式選單輸入是
HTML
最讓人心服的工具。文字表單輸入最大的缺點是須告訴使用者如何輸入，萬一輸入錯誤，系統可能會執行不正常。下拉式選單是提供許多內定值(<option>)
讓使用者點選輸入，就不會發生錯誤。下拉式選單
(<select>) 是表單(<form>)裡面的一種選項(取代
<input>)其格式如下：
|
<form name=”表單名稱”
method=”傳輸方式”
action=”訊息接收
URL”>
訊息提示名稱：<select
name=”傳遞訊息名稱:>
<option
value=”傳值_1”>
選項_1
</option>
<option
value=”傳值_2”>
選項_2
</option>
</select>
….
</form> |
參數說明：
(1)
<select name=”..” method=”…” action=”..”：name為傳送訊息的名稱，method
是傳遞方式，可以
POST 或
GET 兩種方式，action
是接收訊息的網頁位置。
(2)
<option value=”..”>… </option>：value
是當此選項被選到時，所傳送的訊息內容。如果沒有指定
value，則以傳送內容是『傳值_1』。
5-2-2
範例研討：數字與國字查詢
(A)程式功能：Ex5_4
民眾到銀行存提款項大多需要填寫金額的國字，年紀較大的民眾常會忘記，請您製作一個可供數字與國字的轉換網頁，讓民眾可以直接查詢。數字輸入網頁期望如下：
查詢後輸出網頁如下：
(B)
查詢傳送網頁：Ex5_4-form.html
我們利用表單的
select 選項就可以達到下拉式功能，程式範例如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p><font size="5">數字轉換國字查詢</font></p>
<form name="表單"
method="post" action="Ex5_4-action.php">
請選擇數字
<select name="number">
<option> 0 </option>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
<option> 6 </option>
<option> 7 </option>
<option> 8 </option>
<option> 9 </option>
</select>
<BR>
<input type="submit" value="送出">
</form>
</body>
</html> |
(C)
接收與處理網頁：Ex5_4-action.php
傳送來的訊息是 $_POST[“number”]，將其存放在
$number 變數內，再利用
switch/case
判斷輸入的數字為何，再輸出相對應的國字，程式範例如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 |
<!接收處理
- >
<?php
$number = $_POST["number"];
echo "數字與國字對照
<BR><BR>";
echo "數字
$number <==>";
switch ($number) {
case 0:
echo "零
<BR>";
break;
case 1:
echo "壹
<BR>";
break;
case 2:
echo "貳
<BR>";
break;
case 3:
echo "叁
<BR>";
break;
case 4:
echo "肆
<BR>";
break;
case 5:
echo "伍
<BR>";
break;
case 6:
echo "陸
<BR>";
break;
case 7:
echo "柒
<BR>";
break;
case 8:
echo "捌
<BR>";
break;
case 9:
echo "玖
<BR>";
break;
}
echo "謝謝
!! 歡迎再來
<BR>";
?> |
5-2-3
範例研討：點歌網站
– Get
(A)程式功能：Ex5_5
媽媽很喜歡在
youTube
下練習唱歌，但不大會點選歌曲，請您幫他製作一個歡唱網頁，歸納出她所喜歡練習的歌曲，他能由網頁選單上點選，再開啟
youTube 演奏該歌曲。期望網頁選單如下所示：
由下拉式選單點選後，立即會開啟
youtube 網站並演奏該歌曲，如下：
(B)製作技巧分析：
我們希望選單網頁點選之後，直接將傳遞參數送給
youtube 網站，並選曲歌曲，這是屬於
URL 傳遞方式，必須利用
GET 才可達成。首先觀察
GET 傳送的訊息格式如何？
|
<form
name=”form_1” method=”get” action=”https://www.youtube.com/watch?”>
<select name=”data” ><option=”1”> select_1 </option></select>
</form> |
當 select_1
被選擇時，則傳遞訊息如下：
|
URL:https://www.youtube.com/watch?data=1 |
接下來，我們觀察
youtube 播放『江惠
–
相思燈』的網址是：
可以發現，傳遞訊息是『v=
-rTDnQ4bmOg』。因此，我們只要將所訊息名稱設定為『name=”v”』，再將選項預設值設定為『value=”
-rTDnQ4bmOg”』，如下：
|
<select
name="v">
<option value="-rTDnQ4bmOg">
江蕙
-
相思燈
</option>
</select> |
接著，再搜尋其它歌曲就可以製作出來。
(C)傳送表單範例：Ex4_10-getform.html
每首歌曲必須自行到
youtube 網站搜尋其網址，再填入下列程式中。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>點歌網站</title>
</head>
<body>
<p><font size="5">歡唱網站
</font></p>
<form name="表單"
method="get" action="https://www.youtube.com/watch?">
請點選歌曲：
<select name="v">
<option value="-rTDnQ4bmOg">
江蕙
- 相思燈
</option>
<option value="rBwmk2zzIy8">
江蕙
- 家後
</option>
<option value="s8MKF5o6lco">
江蕙
- 甲你攬牢牢
</option>
<option value="k-7c95M6zSU">
江蕙
- 你著忍耐
</option>
<option value="O8RFO3AHLZQ">
江蕙
- 返來阮身邊
</option>
<option value="3tUGFb_XswY">
梅艷芳
- 女人花
</option>
<option value="L5ZMIcInlOU">
江淑娜
- 請您記得我的好
</option>
<option value="wJNHRweW5WE">
蘇芮
- 牽手
</option>
</select>
<input type="submit" value="送出">
</form>
</body>
</html> |
5-2-4
範例研討：萬年曆查詢
(A)
網頁功能
– Ex5_6
許多人對萬年曆很有興趣，我們也來製作一個網頁來玩看看，網友只要輸入哪一年度與哪一個月，就能印出該月的月曆，期望操作如下：
則輸出網頁繪製如下：
(B)
製作技巧
製作萬年曆聽起好像很偉大的樣子，其實只要善用兩個函數就可以輕易達成
(1)
函數 int
mktime(hour, mimute, second, month, day, year, is_dst)：可依照輸入參數(要求轉換的時間與日期)製作一個時間日期的
Unix 時間戳記(timestamp)，但僅限於
1901~2038年之間。譬如，要求轉換
2000年3月4日13點20分30秒，則輸入
mktime(13,20,30,3,4,2000,0)，則會傳回一串數字。
(2)
函數
data(format, timestamp)：可將輸入的
timestamp(沒此參數表示目前時間日期)
轉換可以閱讀的格式(format)，format(格式)有：
(a)
t: 該月有幾日(28
~ 31)：data(t,
mktime())。
(b)
F: 輸出當月的英文字母(January
~ December)：data(F,
mktime())。
(c)
y: 輸出哪一年(1991
~ 2038)：data(y,
mktime())。
(d) w：該月
1 日是星期幾(1
~ 7)：data(w,
mktime())。
只要將這兩個函數加入程式，就可以輕易製作萬年曆。
(B)表單程式如下：Ex5_6-form.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p><form size="5">
萬年曆列印
</form></p>
<form name="表單"
method="post" action="Ex5_6-action.php">
<p>
輸入列印年度：<input
name="year" type="text"></p>
<p>
選擇月份：<select
name="month"></p>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
<option> 6 </option>
<option> 7 </option>
<option> 8 </option>
<option> 9 </option>
<option> 10 </option>
<option> 11 </option>
<option> 12 </option>
</select>
<input type="submit" value="送出">
</form>
</body>
</html> |
(C)處理程式如下：
Ex5_6-action.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 |
<?php
$addY = $_POST["year"];
$addM = $_POST["month"];
$week = array("星期一","星期二","星期三","星期四",
"星期五","星期六","星期日");
//不計時間取出日期參數，時、分、秒皆以
0
表示
//月=$addM
(輸入)、日=
1(第一天)、年=
$addY (輸入)
$number=date(t,
mktime(0,0,0,$addM,1,$addY)); //當月的天數
$first =date(w,
mktime(0,0,0,$addM,1,$addY)); //
第一天是星期幾
$F=date(F,
mktime(0,0,0,$addM,1,$addY)); //當月的英文字母
echo "<table width='400' border='1'>";
echo "<font size='5'>";
echo $yearYM=$F." ".$addY;
echo "</font>";
echo "<tr>";
for($i=0; $i<7; $i++){
echo "<td align='center'>$week[$i]</td>";
}
echo "</tr>";
echo "<tr>";
$now = 0;
for($i=1; $i<$first; $i++){
echo "<td> </td>";
$now = $now + 1;
}
$day = 1;
while ($day <= $number) {
echo "<td> $day </td>";
$now = $now + 1;
if (($now % 7) == 0){
echo "</tr>";
echo "<tr>";
$now = 0;
}
$day = $day + 1;
}
while ($now <7){
echo "<td> </td>";
$now = $now + 1;
}
echo "</tr>";
echo "</table>";
?> |
5-2-5
範例研討：下拉式輸入時間
(A)
網頁功能
– Ex5_7
雖然下拉式選單提供使用者許多方便，但如果選單的選項太多的話可能就很難製作，譬如我們要允許輸入日期時間，由
1901 ~2030年、1~12
月、1~31
日、0~23
時、0~59分、0~59
秒鐘等之間選擇一個時間，這就不容易了，我們來試看看，期望操作如下：(並且計算
Unix Timestamp)
則接收網頁顯示結果如下：
(B)製作技巧
之前範例的傳送網頁大多沒有使用到
PHP 的功能，我們也來嘗試利用
PHP 網頁來傳送訊息，其變化可能更加豐富。先觀察<select>
選單的特質，如下：
|
<form …….>
<select name=”year”>
<option> 1901 </option>
<option> 1902</option>
…. //1903 ~ 2030
</select>
年 |
假設我們要設計輸入年度選項由
1901 ~2030，如果依照上述編寫的話，可能要輸入很多行。是否可以利用一個
for 迴圈，將
<option> $i </option 連續
$i 由
1901 到
2030 就可成。因此，將
<option> 利用
PHP 來製作如下：
|
<?php
....
echo "<select name='year'>";
for ($i = 1901; $i<=2030; $i++) {
echo “<option> $i </option>”;
}
echo "</select>
年";
...
?> |
(C)表單程式範例：Ex5_7-form.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 |
<?php
echo "<p>
下拉式輸入日期與時間並計算
Unix Timestamp </p>";
echo "<form name='表單'
method='post' action='Ex5_7-action.php'>";
echo "日期與時間：";
//
年選單製作
echo "<select name='year'>";
for ($i=1901; $i<=2030; $i++) {
echo "<option> $i </option>";
}
echo "</select>
年";
//
月選單製作
echo "<select name='month'>";
for ($i=1; $i<=12; $i++) {
echo "<option> $i </option>";
}
echo "</select>
月";
//
日選單製作
echo "<select name='day'>";
for ($i=1; $i<=31; $i++) {
echo "<option> $i </option>";
}
echo "</select>
日";
//
時選單製作
echo "<select name='hour'>";
for ($i=1; $i<=24; $i++) {
echo "<option> $i </option>";
}
echo "</select>
時";
//
分選單製作
echo "<select name='minute'>";
for ($i=0; $i<=59; $i++) {
echo "<option> $i </option>";
}
echo "</select>
分";
//
秒選單製作
echo "<select name='second'>";
for ($i=0; $i<=59; $i++) {
echo "<option> $i </option>";
}
echo "</select>
秒
<BR>";
//
送出按鍵製作
echo "<input type='submit' value='送出'>";
echo "</form>";
?> |
(D)執行程式範例：Ex5_7-action.php
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<?php
$year = $_POST["year"];
$month = $_POST["month"];
$day = $_POST["day"];
$hour = $_POST["hour"];
$minute = $_POST["minute"];
$second = $_POST["second"];
echo "選擇時間是：".$year."年".$month."月".$day." 日".$hour."時".$minute."分".$second."秒<BR>";
$timestamp =
mktime($hour,$minute,$second,$month,$day,$year);
echo "<BR> Unix
時間戳記(timestamp)
= $timestamp <BR>";
?> |
|
主講人：粘添壽博士
course_db 關聯圖
資料庫程式設計：
翻轉電子書系列：
|
