表單的部分其實一直是我在大學時期沒有學好的東西
後端程式設計甚至是我大學所有與資訊相關的科目中
成績最低的，真的很多事情不是你以為過了就過了
沒學好的還是會回來找你的

表單練習

分為HTML Form與PHP Form兩個部分
注意！預設的http port號為80！如果是https就是443！

安裝xampp或是Appserv，並且開啟Apache和MySQL


建立專案，在以下路徑建立一個叫做form的資料夾

xampp：C:\xampp\htdocs
AppServ：C:\AppServ\www

安裝編譯器

使用Brackets可以用他的Live Preview功能
Brackets：http://brackets.io/

設定Live Preview

  3. 之後要修改Live Preview的網址請到File>Project Settings裡修改，記得如果Port號不同也要修改

表單範例

HTML部分的表單 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    echo "<h1>Hello world! Welcome User!</h1>";
?>
<br>
<form>
    姓名：<input type="text" name="UserName" placeholder="輸入姓名"><br><br>
    密碼：<input type="password" name="Password" placeholder="輸入密碼"><br><br>
    性別：<input type="radio" name="Sex">男 <input type="radio" name="Sex">女<br><br>
    生日：<input type="date" name="Date"><br><br>
    工作狀況：<select name="Job">
    <option value="" selected disabled hidden>請選擇</option>
    <option value="student">學生</option>
    <option value="fulltime">全職</option>
    <option value="parttime">兼職</option>
    <option value="await">待業</option>
    </select><br><br>
    內容：<textarea name="Content" placeholder="輸入詳細內容"></textarea><br><br>
    <input type="submit" value="送出表單">
</form>

結果：

預設的method是GET，表單輸入的內容會出現在網址的部分
如果使用的是POST表單的輸入內容就不會出現在網址

PHP部分的表單

在PHP中，用$_GET與$_POST這兩個變數來儲存資料
我們在剛剛的form裡新增action呼叫PHP Script以及將他的method設為post 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    echo "<h1>Hello world! Welcome User!</h1>";
?>
<br>
<form>
    姓名：<input type="text" name="UserName" placeholder="輸入姓名"><br><br>
    密碼：<input type="password" name="Password" placeholder="輸入密碼"><br><br>
    性別：<input type="radio" name="Sex">男 <input type="radio" name="Sex">女<br><br>
    生日：<input type="date" name="Date"><br><br>
    工作狀況：<select name="Job">
    <option value="" selected disabled hidden>請選擇</option>
    <option value="student">學生</option>
    <option value="fulltime">全職</option>
    <option value="parttime">兼職</option>
    <option value="await">待業</option>
    </select><br><br>
    內容：<textarea name="Content" placeholder="輸入詳細內容"></textarea><br><br>
    <input type="submit" value="送出表單">
</form>

新增一個PHP Scipt命名為newProfile.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
<?php 
$username=$_POST["username"];

if($_POST["sex"]=="female"){
    $sex="女性";
}else{
    $sex="男性";
}
$date=$_POST["date"];
echo "<h1>Hello world! Welcome ".$username."!</h1><br>".
    "你的密碼是：".$_POST["password"]."<br>".
    "你的性別是：".$sex."<br>".
    "你的生日是：".$_POST["date"]."<br>";
switch($_POST["job"]){
    case "student":
        echo "你是個學生<br>";
        break;
    case "fulltime":
        echo "你是個全職工作者<br>";
        break;
    case "parttime":
        echo "你是個兼職工作者<br>";
        break;
    case "await":
        echo "你是個米蟲<br>";
        break;
}
$content=$_POST["content"];
echo "詳細內容: ".$content;

?>

最後輸出結果：