iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
Modern Web

~網頁入門~系列 第 30

Day30 – PHP – 表單實作

  • 分享至 

  • xImage
  •  

search.php 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            border-style: double;
            padding: 20px;
            background-color: powderblue;
            font-family: courier;
        }
    </style>
</head>
<body>
    <form action="result.php" method="POST">
        <div>
            <span>請輸入姓名 : </span>
            <!-- required 輸入框不得為空 -->
            <input type="text" name="name" id="name" required><br><br>

            <span>請選擇性別 : </span>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">男</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">女</label><br><br>

            <label for="area">請選擇住址行政區 : </label>
            <select name="adminis" id="area">
                <option value="Taipei">台北市</option>
                <option value="NewTaipei" selected>新北市</option>
                <option value="Taoyuan">桃園市</option>
                <option value="Taichung">台中市</option>
                <option value="Kaohsiung">高雄市</option>
                <option value="Tainan">台南市</option>
            </select><br><br>
        </div>
        <br>
        <input type="submit" value="送出">
    </form>
</body>
</html>
  • required --- 輸入框不得為空

result.php 文件

<?php
    $name = $_POST["name"];
    $gender = $_POST["gender"];
    $adminis = $_POST["adminis"];

    if($gender == "male"){
        echo "嗨~ 住在".$adminis."的".$name."先生, 恭喜您抽中一台iPhone";
    } else {
        echo "嗨~ 住在".$adminis."的".$name."女士, 恭喜您抽中一台iPhone";
    }
?>

https://ithelp.ithome.com.tw/upload/images/20191016/20120959Jd83uC1N7f.jpg

https://ithelp.ithome.com.tw/upload/images/20191016/20120959xxQulkFbsG.jpg

https://ithelp.ithome.com.tw/upload/images/20191016/20120959QT04ZvQcmf.jpg

如果把 PHP 語法插入 HTML 文件內,就可以把 data 存進陣列裡用 foreach 叫出來

search.php 文件

<?php
    $adminis = array(
        "Taipei" => "台北市",
        "NewTaipei" => "新北市",
        "Taoyuan" => "桃園市",
        "Taichung" => "台中市",
        "Kaohsiung" => "高雄市",
        "Tainan" => "台南市"
    );
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            border-style: double;
            padding: 20px;
            background-color: powderblue;
            font-family: courier;
        }
    </style>
</head>
<body>
    <form action="result.php" method="POST">
        <div>
            <span>請輸入姓名 : </span>
            <!-- required 輸入框不得為空 -->
            <input type="text" name="name" id="name" required><br><br>

            <span>請選擇性別 : </span>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">男</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">女</label><br><br>

            <label for="area">請選擇住址行政區 : </label>
            <select name="adminis" id="area">
                <?php foreach($adminis as $area_english => $area_chinese):?>
                        <option value="<?= $area_chinese?>"><?= $area_chinese?></option>
                <?php endforeach;?>
            </select><br><br>
        </div>
        <br>
        <input type="submit" value="送出">
    </form>
</body>
</html>
  • 在 HTML 中分開的 PHP,foreach():endforeach; 搭配使用。
  • <?php echo?> 可以寫成 <?= ?>

result.php 文件

<?php
    $name = $_POST["name"];
    $gender = $_POST["gender"];
    $area = $_POST["adminis"];
    
    if($gender == "male"){
        echo "嗨~ 住在".$area."的".$name."先生, 恭喜您抽中一台iPhone";
    } else {
        echo "嗨~ 住在".$area."的".$name."女士, 恭喜您抽中一台iPhone";
    }  
?>

https://ithelp.ithome.com.tw/upload/images/20191016/20120959rGSBOgO9Wb.jpg

https://ithelp.ithome.com.tw/upload/images/20191016/20120959EsPBIEC5d6.jpg

https://ithelp.ithome.com.tw/upload/images/20191016/20120959X7Eb0j4Qk8.jpg


上一篇
Day29 – PHP – 陣列與迴圈的應用
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-28 05:56:40

一切都是從基礎開始的! 恭喜你已經踏出第一步
恭喜完賽 /images/emoticon/emoticon42.gif

我要留言

立即登入留言