Day_17 html form標籤

2023 iThome 鐵人賽

DAY 17

Modern Web

三十天持續努力挑戰py系列第 17 篇

15th鐵人賽

clevens1008

團隊NUTC_IMAC_WEB_桑貝比

2023-10-02 00:18:50

232 瀏覽

分享至

HTML 表單（Form）是網頁中用於收集使用者輸入資訊的一種標準方式。它允許使用者輸入文字、選擇選項、上傳檔案等，然後將這些資訊發送到伺服器以進行處理。以下是 HTML 表單的基本組成部分和一些常用的元素。
<form> 元素：HTML 表單始於 <form> 元素，它定義了一個表單，通常包圍了表單內的所有元素。<form> 元素有一個必需的屬性 action，用於指定表單資料提交後將資料發送到的伺服器端腳本的，且宣告這個表單的資料會被用 http post 的方法送到 "/process_form.php" 這隻遠端程式。。

<form action="process_form.php" method="post">
  <!-- 表單元素將在這裡添加 -->
</form>

form表單裡可以使用多種元素，這邊用input來做示範。

<input type="text" name="username" placeholder="請輸入使用者名稱">
<input type="password" name="password" placeholder="請輸入密碼">
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="checkbox" name="subscribe" value="yes"> 訂閱

<textarea> 元素：<textarea> 元素用於創建多行文字輸入框，通常用於使用者輸入長文本或評論。

<textarea name="comments" rows="4" cols="50"></textarea>

<select> 元素：<select> 元素用於創建下拉選單，供使用者從多個選項中選擇一個或多個。

        <select name="country">
            <option value="usa">美國</option>
            <option value="canada">加拿大</option>
            <option value="uk">英國</option>
        </select>

最後加上submit，以把資料送出，以下是全部的程式碼。

<body>
    <form action="process_form.php" method="post">
        <input type="text" name="username" placeholder="請輸入使用者名稱">
        <input type="password" name="password" placeholder="請輸入密碼">
        <input type="radio" name="gender" value="male"> 男性
        <input type="radio" name="gender" value="female"> 女性
        <input type="checkbox" name="subscribe" value="yes"> 訂閱
        <select name="country">
            <option value="usa">美國</option>
            <option value="canada">加拿大</option>
            <option value="uk">英國</option>
        </select>
        <p><input type="submit" value="送出資料"></p>
    </form>

</body>