表單在網站中常常會使用到，像是平常各個網站最常使用的登入畫面、註冊時填寫資料的頁面、網購時輸入的資料 ......等等，都會使用到表單，是個很實用的功能。接著就來學學表單畫面的製作吧！

表單(畫面)製作

要製作表單，最主要的兩個標籤分別是 <form> 標籤和 <input> 標籤

<form> 標籤

將表單的內容放進 <form> </form> 裡，有點像是表格的 <table> 標籤

<form>
    表單內容
</form>

<input> 標籤

<input> 標籤可以說是表單最重要的標籤，它可以根據放入的 type 屬性產生不同的輸入元素。

• <input type="text"> --> 單行文字輸入框
• <input type="radio"> --> 單選選項按鈕
• <input type="checkbox"> --> 複選選取方塊
• <input type="email"> --> 信箱格式輸入
• <input type="file"> --> 上傳檔案
• <input type="password"> --> 密碼輸入框
• <input type="submit"> --> 送出表單按鈕

表單內容包括了各種不同類型的輸入元素，例如：文本字段、輸入框、複選框、單選按鈕、提交按鈕 …….等等。

接下來就來一一介紹如何製作這些輸入元素吧！

文字輸入框

<input type="text">

<form>
    <p>name:</p>
    <input type="text" name="firstname" id="firstname"><br>
    <p>name:</p>
    <input type="text" name="lastname" id="lastname">
</form>

單選按鈕

<input type="radio">

<form>
    <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>
</form>

<form>
    <input type="radio" name="gender" value="male" id="male" checked>
    <label for="male">男生</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">女生</label>
</form>

放入 checked 就會變成預設選項

<label> 中的 for 屬性 = 相關元素的 id 屬性，可以將它們綁定在一起，以便於連接後端之後的運作。

複選方塊

<input type="checkbox">

<form>
    <span>選擇顏色 : </span>
    <input type="checkbox" name="colors" value="red" id="red">
    <label for="red">紅色</label>
    <input type="checkbox" name="colors" value="blue" id="blue">
    <label for="blue">藍色</label>
    <input type="checkbox" name="colors" value="green" id="green">
    <label for="green">綠色</label>
</form>

提交按鈕

<input type="submit">

定義一個按鈕，用於將表單數據提交給表單處理程序。
表單處理程序在 <form> 標籤的 action 屬性中指定，之後講到後端會再說明。

<form action="">
    <input type="submit" value="送出">
</form>

另外，我們也常常會使用到下拉選單，它會用到 <select> 標籤

單選下拉選單

<option> 標籤定義一個在選擇列表中的選項

<form>
    <label for="food_menu">請選一項食物</label>
    <select name="food" id="food_menu">
        <option value="sushi" selected>壽司</option>
        <option value="bbq">燒烤</option>
        <option value="hotpot">火鍋</option>
    </select> 
</form>

放入 selected 就會變成預設選項

目前表單只有出現畫面而已，想要真正能夠運作，就必須連接到後端。下一次，我們要進入 PHP 的世界，之後就會讓表單活起來囉～