Day5 輸入欄位、下拉選單和按鈕

2026 iThome 鐵人賽

DAY 5

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 5 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-19 11:33:34

37 瀏覽

分享至

網頁不再只有文字，認識互動元件

在昨天的文章中，我們學會了如何用HTML呈現標題與段落文字。但網頁之所以好玩，是因為使用者可以跟網頁進行互動，不論是註冊會員、填寫問卷，還是登入Google帳號，都必須透過網頁的表單元件來接收使用者輸入的資料。

今天我們就來認識<body>中，負責與用這個網頁的人進行互動的三大重要基礎元件：輸入欄位（Input）、下拉選單（Select） 與 按鈕（Button）。

輸入欄位 `<input>`

<input>標籤是HTML中功能最變幻莫測的元件，它只需要一個標籤（不需要寫</input>），只要調整它的type（類型）屬性，就能瞬間變成完全不同的外觀與功能！

舉例幾種我們常遇到的幾種type類型：

<input type="text" placeholder="輸入使用者名稱">
<input type="password" placeholder="請輸入密碼">
<input type="date">

這三個分別是：

單行文字輸入框
密碼輸入框（輸入時文字會自動變成小黑點）
日期選擇器（會自動跳出日曆讓你選）

小技巧：`placeholder`

placeholder 叫做提示文字，它會在欄位還是空的時候，用淡淡的灰色字體顯示在欄位裡，提示使用者這裡應該輸入什麼，當使用者一開始打字，這些提示字就會自動消失，是提升體驗非常貼心的設計。

下拉選單`<select>`與`<option>`

當我們想讓使用者填寫生日月份、或是居住縣市時，為了避免打錯字，最好的方式就是直接給他們一個清單讓他們用「選」的，這時候就必須請出下拉選單：由外層的<select>搭配內層的<option>標籤。

<label>請問您住哪個縣市？</label>
<select>
    <option value="taipei">台北市</option>
    <option value="taichung">台中市</option>
    <option value="kaohsiung">高雄市</option>
</select>

外層的<select>負責建立出那個可以點擊下拉的「框框」，而內層的每一個<option>則是下拉出來的「選項內容」。

額外介紹

在HTML中，<label>標籤是專門用來為表單元件（例如輸入框、下拉選單、單選鈕等）提供文字標籤說明的語意化標籤，它最主要的作用是建立文字與元件之間的聯繫，不僅能提升網頁的親和力，還能優化操作體驗。

核心作用

擴大點擊範圍（點字也能選中）：當使用者用滑鼠或手指點擊<label>包覆的文字時，瀏覽器會自動將游標聚焦到對應的輸入框或選中該選項（適合手機畫面上很小的單選鈕或複選框）。
無障礙輔助：盲人或視障者在使用螢幕閱讀器時，系統讀到輸入框時會自動朗讀與它關聯的文字，否則使用者會不知道這個框框要填什麼。

範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="username">使用者名稱：</label>
    <input type="text" id="username" placeholder="請輸入名稱">
</body>
</html>

按鈕`<button>`

當使用者填完所有欄位後，最後一步絕對是按下送出按鈕，在HTML中，我們使用<button>標籤來建立按鈕。

<button type="button">加入購物車</button>
<button type="submit">確認送出表單</button>

type="button"：代表這是一顆普通按鈕，通常後續會搭配JavaScript來點擊觸發某些好玩的功能。
type="submit"：代表這是送出按鈕，點擊後會把使用者剛剛在畫面上填的所有資料，打包送到後端伺服器去。

總結

今天我們學會了如何用<input>建立多種功能的輸入框、用<select>製作方便的下拉選單，並用<button>觸發動作，有了這些元件，我們的網頁從純文字時代，開始能與使用者對話了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/submit-subpage" method="POST">
    <input type="text" placeholder="輸入使用者名稱">
    <input type="password" placeholder="請輸入密碼">
    <input type="date"></br>
    <label>請問您住哪個縣市？</label>
    <select>
        <option value="taipei">台北市</option>
        <option value="taichung">台中市</option>
        <option value="kaohsiung">高雄市</option>
    </select></br>
    <button type="submit">確認送出表單</button>
</form>
</body>
</html>