【Html】實用的 <input> 表單屬性

2025-06-27回覆文章

本篇重點

了解各個場景適合的 <input> 屬性
移除 <input type="number"> 上下箭頭的方法
如何依需求控制行動裝置的鍵盤類型

開發表單時，善用 <input> 的屬性可以讓輸入更直覺，並且提升使用者體驗，特別是行動裝置效果顯著

`type="number"`：限制只能輸入數字

限制輸入數值，可搭配 min、max、step 控制範圍與增減幅度，部分瀏覽器會顯示上下箭頭，可控制輸入的數值，適合用於金額、數量等欄位。

html

<label
  >type="number"：
  <input type="number" min="1" max="100" step="5" />
</label>

type="number"：限制只能輸入數字

移除上下箭頭的方法

如果不想要有上下箭頭，可以使用 css 移除

html

<label
  >移除上下箭頭：
  <input class="remove_arrow" type="number" min="1" max="100" step="5" />
</label>

css

input[type="number"].remove_arrow::-webkit-outer-spin-button,
input[type="number"].remove_arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].remove_arrow {
  -moz-appearance: textfield;
}

`type="tel"`：在手機上顯示數字鍵盤

不會驗證格式，但在行動裝置上會顯示數字輸入鍵盤，適合輸入電話。

html

<label
  >type="tel"：
  <input type="tel"/>
</label>

type="tel"：在手機上顯示數字鍵盤

`type="email"`：基本 Email 格式驗證

不會主動驗證格式，執行送出表單才會驗證信箱格式，適合輸入信箱。

html

<label>type="email"：
  <input type="email" />
</label>
<button>送出</button>

type="email"：基本 Email 格式驗證

`type="url"`：基本 url 格式驗證

不會主動驗證格式，執行送出表單才會驗證網址格式，適合輸入網址。

html

<label
  >type="url"：
  <input type="url"/>
</label>
<button>送出</button>

type="url"：基本 url 格式驗證

`type="date"`：日期選擇器

提供內建的月曆選擇器，可搭配 min、max 控制日期範圍，適合輸入日期。

html

<label
  >type="date"：
  <input type="date" min="2023-01-01" max="2025-12-31"/>
</label>

type="date"：日期選擇器

`type="month"`：月份選擇器

提供內建的月份選擇器，可搭配 min、max 控制日期範圍，適合輸入月份。

html

<label
  >type="month"：
  <input type="month" min="2024-01" max="2025-12"/>
</label>

type="month"：月份選擇器

`type="datetime-local"`：日期時間選擇器

提供內建的日期時間選擇器，可搭配 min、max 控制日期範圍，step 增加秒數選項，適合輸入日期時間。

html

<label
  >type="datetime-local"：
  <input type="datetime-local" min="2025-01-01T08:00" max="2025-12-31T18:00"/>
</label>

增加秒數選項

html

<label
  >type="datetime-local"：
  <input type="datetime-local" step="1"/>
</label>

type="datetime-local"：日期時間選擇器

`type="time"`：時間選擇器

提供內建的時間選擇器，可搭配 step 增加秒數選項，適合輸入時間。

html

<label
  >type="time"：
  <input type="time" />
</label>

增加秒數選項

html

<label
  >type="time"：
  <input type="time" step="1"/>
</label>

type="time"：時間選擇器

`type="range"`：滑桿式數字輸入

提供內建的滑桿，搭配 min、max 控制數值範圍，適合用在音量、亮度、分數等場景。

html

<label
  >type="range"：
  <input type="range" min="0" max="100" step="10" />
</label>

type="range"：滑桿式數字輸入

`type="color"`：色彩選擇器

提供內建的色彩選擇工具，回傳 hex 色碼，適合輸入色彩。

html

<label
  >type="color"：
  <input type="color"/>
</label>

type="color"：色彩選擇器

`inputmode`：行動裝置上切換適合的鍵盤

不改變輸入型態（type），使用 inputmode 也可以在行動裝置顯示對應的鍵盤類型，例如 numeric、email 鍵盤等。

html

<label
  >inputmode="numeric"：
  <input type="text" inputmode="numeric" />
</label>
<label
  >inputmode="email"：
  <input type="text" inputmode="email" />
</label>

inputmode：行動裝置上切換適合的鍵盤

健忘筆記

使用 Can I use 查詢屬性在每個瀏覽器的相容性

結論

HTML5 提供了多種實用的 <input> 屬性，可以減少 JavaScript 驗證的需求，並且提升使用者操作上的便利性。特別是在行動裝置上，不同的 type 搭配 inputmode 能提供對應的輸入鍵盤，打造更直覺、流暢的表單體驗。

【Html】實用的 <input> 表單屬性

本篇重點

`type="number"`：限制只能輸入數字

移除上下箭頭的方法

`type="tel"`：在手機上顯示數字鍵盤

`type="email"`：基本 Email 格式驗證

`type="url"`：基本 url 格式驗證

`type="date"`：日期選擇器

`type="month"`：月份選擇器

`type="datetime-local"`：日期時間選擇器

增加秒數選項

`type="time"`：時間選擇器

增加秒數選項

`type="range"`：滑桿式數字輸入

`type="color"`：色彩選擇器

`inputmode`：行動裝置上切換適合的鍵盤

結論

延伸閱讀

作者

發表於

更新於

許可協議

你可能也想看

評論

文章目錄

follow.it

廣告

最新文章

廣告