HTML 表單進階：input types、autofill、檔案上傳

為什麼 input type 不能都用 text

<input type="text"> 能收任何文字，但用錯 type 有兩個代價：

行動裝置彈出錯誤鍵盤：type="text" 在手機上彈出全鍵盤；type="tel" 彈出數字鍵盤；type="email" 彈出有 @ 的鍵盤。用戶要多點幾步才能切換鍵盤，UX 直接下降。
瀏覽器無法提供原生驗證與自動填入：type="email" 瀏覽器會檢查格式；type="url" 會驗證協定；type="number" 行動裝置可以直接用數字輸入法。

常用 input types 完整清單

文字與聯絡

<!-- 一般文字（預設） -->
<input type="text" name="username">
 
<!-- Email：驗證格式 + 行動裝置 @ 鍵盤 -->
<input type="email" name="email" autocomplete="email">
 
<!-- 電話：數字鍵盤，不驗證格式 -->
<input type="tel" name="phone" autocomplete="tel">
 
<!-- URL：驗證協定格式 -->
<input type="url" name="website" autocomplete="url">
 
<!-- 多行文字 -->
<textarea name="bio" rows="4"></textarea>

數字與範圍

<!-- 數字：步進、最小最大值 -->
<input type="number" name="qty" min="1" max="99" step="1">
 
<!-- 滑桿 -->
<input type="range" name="volume" min="0" max="100" value="50">

日期與時間

<!-- 日期選擇器（yyyy-mm-dd） -->
<input type="date" name="birthday" autocomplete="bday">
 
<!-- 時間（hh:mm） -->
<input type="time" name="meeting-time">
 
<!-- 日期+時間（local，不帶時區） -->
<input type="datetime-local" name="event-start">
 
<!-- 年月（不選日） -->
<input type="month" name="card-expiry">

注意：datetime-local 不帶時區資訊，如果要跨時區就要在送出時手動加 offset 或改用文字欄位。

密碼與搜尋

<!-- 密碼：遮罩顯示，建議加 autocomplete -->
<input type="password" name="password" autocomplete="current-password">
<input type="password" name="new-password" autocomplete="new-password">
 
<!-- 搜尋：行動裝置顯示搜尋鍵盤，語意上是搜尋框 -->
<input type="search" name="q">

顏色

<!-- 顏色選擇器 -->
<input type="color" name="brand-color" value="#3b82f6">

autocomplete：讓瀏覽器填對欄位

autocomplete 告訴瀏覽器這個欄位是什麼資料，讓自動填入功能正確對應。

<form autocomplete="on">
  <input type="text"     name="name"        autocomplete="name">
  <input type="text"     name="given-name"  autocomplete="given-name">
  <input type="text"     name="family-name" autocomplete="family-name">
  <input type="email"    name="email"       autocomplete="email">
  <input type="tel"      name="phone"       autocomplete="tel">
 
  <!-- 地址 -->
  <input type="text"     name="address"     autocomplete="street-address">
  <input type="text"     name="city"        autocomplete="address-level2">
  <input type="text"     name="postal"      autocomplete="postal-code">
  <select                name="country"     autocomplete="country">...</select>
 
  <!-- 信用卡 -->
  <input type="text"     name="cc-number"   autocomplete="cc-number">
  <input type="text"     name="cc-name"     autocomplete="cc-name">
  <input type="month"    name="cc-exp"      autocomplete="cc-exp">
  <input type="text"     name="cc-csc"      autocomplete="cc-csc">
</form>

要關閉自動填入（例如 OTP 欄位）：

<input type="text" name="otp" autocomplete="one-time-code">
<!-- 或完全關閉 -->
<input type="text" autocomplete="off">

檔案上傳

<!-- 基本：允許任何檔案 -->
<input type="file" name="attachment">
 
<!-- 限制類型：MIME type 或副檔名 -->
<input type="file" name="image" accept="image/*">
<input type="file" name="pdf"   accept=".pdf,application/pdf">
<input type="file" name="doc"   accept=".doc,.docx,application/msword">
 
<!-- 多選 -->
<input type="file" name="photos" accept="image/*" multiple>
 
<!-- 行動裝置直接開相機（不選圖庫） -->
<input type="file" name="photo" accept="image/*" capture="environment">
<!-- capture="user" 是前鏡頭，capture="environment" 是後鏡頭 -->

capture 屬性只在行動裝置有效，桌面瀏覽器會忽略它。

檔案上傳後的處理（FileReader 讀取內容、Blob 操作）見 File API。

表單原生行為 — form 提交、validation、fieldset
File API — 用 JavaScript 讀取上傳的檔案內容
表單 UX 最佳實踐 — label 關聯、錯誤訊息、tab order

Terry Yao's Blog

目錄