HTML 表單元素完整實作教學

HTML 表單是網頁互動的核心，用於蒐集使用者輸入資料。本文透過完整的註冊表單範例，詳細展示各類表單元素的寫法與屬性設定。

表單基本架構

<form action="DoFormAction.htm">
  <fieldset style="width=800px">
    <legend>請輸入以下的信息然後進行註冊</legend>
    <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">
      ... 表單欄位 ...
    </table>
  </fieldset>
</form>

常見輸入元素

• 文字方塊：<input type="text" size="20" style="width:150px" />
• 密碼方塊：<input type="password" size="20" style="width:150px" />
• 單選按鈕：同組 name 屬性，搭配 value 区分值，可用 checked 預選
• 標籤關聯：<label for="id"> 讓點擊文字也能選擇單選項
• 下拉選單：<select> 包含 <option>，可用 selected 預設值
• 分組下拉：<optgroup label="群組名"> 實現選項分類
• 列表方塊：<select size="3" multiple="multiple"> 允許多選
• 核取方塊：同 name 分組，可多選
• 檔案上傳：<input type="file" name="myPic" />
• 多行文字：<textarea rows="5" cols="50"></textarea>

提交與重置按鈕

• <input type="submit" value="確定" /> - 提交表單
• <input type="reset" value="清空" /> - 重置表單
• <input type="image" src="..." onclick="..." /> - 圖片按鈕（同樣會提交資料）

JavaScript 互動範例

文章另附簡易 JavaScript 函數 show_page(num)，示範點擊圖片彈出產品名稱並跳轉頁面的邏輯。