Welcome 歡迎來到「睡醒來聽 PHP 與 MySQL」系列！

DAY16 今天要學甚麼?今天開始製作表單拉~~會有詳細介紹功能

🔶章節:
🔹[開頭] 0:00
🔹[介紹表單的重要性]
🔹[表單的組成部分]
🔹[創建基本的 PHP 表單]
🔹[9個常見的 HTML 表單控制選項]
🔹[PHP]
🔹[什麼是「name」屬性]
🔹[簡單的表單處理]
🔹[取得表單傳資料]
🔹[成果]
🔹[小提醒]
🔹[總結]

如果影片中不清楚，需要補充的地方我會再添加到這邊~
👆教學中的[練習]程式碼一併附上，影片中會有每組的講解、說明更清楚👆

創建基本的 PHP 表單

<form action="process.php" method="post">
    <input type="text" name="username" placeholder="使用者名稱">
    <input type="password" name="password" placeholder="密碼">
    <input type="email" name="email" placeholder="電子郵件">
    <button type="submit">註冊</button>
</form>

9個常見的 HTML 表單控制選項

1. 文字輸入框（Text Input）

基本結構

<input type="text" name="input_name" id="input_id" value="initial_value">

呈現範例

    <form>
        <label for="username">名字：</label>
        <input type="text" id="username" name="username"><br><br>
    </form>

2. 密碼輸入框（Password Input）

基本結構

<input type="password" name="password" id="password_id">

呈現範例

    <form>
        <label for="password">密碼：</label>
        <input type="password" id="password" name="password"><br>
    </form>

3. 單選按鈕（Radio Buttons）

基本結構

<input type="radio" name="group_name" value="option_value" id="option_id">
<label for="option_id">選項文本</label>

呈現範例

    <form>
        <input type="radio" id="color_red" name="color" value="red">
        <label for="color_red">紅色</label><br>

        <input type="radio" id="color_green" name="color" value="green">
        <label for="color_green">綠色</label><br>

        <input type="radio" id="color_blue" name="color" value="blue">
        <label for="color_blue">藍色</label><br>
    </form>

4. 核取方塊（Checkboxes）

基本結構

<input type="checkbox" name="group_name" value="option_value" id="option_id">
<label for="option_id">選項文本</label>

呈現範例

    <form>
        <input type="checkbox" id="fruit_apple" name="fruit" value="apple">
        <label for="fruit_apple">蘋果</label><br>

        <input type="checkbox" id="fruit_banana" name="fruit" value="banana">
        <label for="fruit_banana">香蕉</label><br>

        <input type="checkbox" id="fruit_orange" name="fruit" value="orange">
        <label for="fruit_orange">橘子</label><br>
    </form>

5. 下拉選單（Select Dropdown）

基本結構

<select name="select_name" id="select_id">
    <option value="option_value1">選項1</option>
    <option value="option_value2">選項2</option>
    <!-- 其他選項 -->
</select>

呈現範例

    <form>
        <label for="fruit_select">水果：</label>
        <select id="fruit_select" name="fruit">
            <option value="apple">蘋果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橘子</option>
            <option value="grape">葡萄</option>
        </select>
    </form>

6. 日期輸入（Date Input）

基本結構

<input type="date" name="date_name" id="date_id">

呈現範例

    <form>
        <label for="date_input">選擇日期：</label>
        <input type="date" id="date_input" name="date">
    </form>

7. 時間輸入（Time Input）

基本結構

<input type="time" name="time_name" id="time_id">

呈現範例

    <form>
        <label for="time_input">選擇時間：</label>
        <input type="time" id="time_input" name="time">
    </form>

8. 數字輸入（Number Input）

基本結構

<input type="number" name="number_name" id="number_id" min="min_value" max="max_value" step="step_value">

呈現範例

    <form>
        <label for="number_input">輸入數字：</label>
        <input type="number" id="number_input" name="number" min="1" max="10" step="1">
    </form>

9. 檔案上傳（File Upload）

基本結構

<input type="file" name="file_name" id="file_id">

呈現範例

    <form>
        <label for="file_upload">選擇檔案：</label>
        <input type="file" id="file_upload" name="uploaded_file">
        <input type="submit" value="上傳">
    </form>

簡單的表單處理

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $password = $_POST["password"];
    $email = $_POST["email"];

    // 在這裡可以將資料存入資料庫或進行其他操作
    // 這裡只是一個示範，實際中可能需要更多的處理步驟

    echo "註冊成功，歡迎加入！";
}
?>

在 PHP 中取得從網頁表單傳送過來的資料

1. 表單創建和提交(index.php)

<form action="process.php" method="post">
    <input type="text" name="username" placeholder="使用者名稱">
    <input type="password" name="password" placeholder="密碼">
    <button type="submit">提交</button>
</form>

2. PHP 中取得表單資料(process.php)

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $password = $_POST["password"];

    echo "你輸入的使用者名稱是：" . $username . "<br>";
    echo "你輸入的密碼是：" . $password;
}
?>

下一集會說明如何驗證資料是否符合規定，以確保用戶輸入的數據合乎預期，同時保護用戶的隱私和數據安全~~ 感謝大家收看！