[開發] 靜態頁面－Input

2023 iThome 鐵人賽

DAY 15

Modern Web

職缺資訊平台—Jobscanner系列第 15 篇

15th鐵人賽

shan33

2023-09-30 12:53:47

236 瀏覽

分享至

input

input 是用在 form 中的元素，使用者透過 input 的互動操作填寫表單。(不同裝置以及瀏覽器的 input 呈現方式可能不太相同。)

<input /> input 預設 Type 為 text

常用：

Type	說明
hidden	隱藏 input，用來儲存使用者不需要看到的欄位
text	一般文字
password	輸入的內容會以 * 呈現，通常用在密碼欄位
submit	送出表單的按鈕
reset	重設按鈕，清除整份表單填寫的內容
button	和 submit 類似，但沒有送出表單的作用
radio	單選框
checkbox	多選框

時間相關：(Chrome 會跳出 picker 方便選擇)

Type	說明
month	選擇指定年份的月份，不包含時區
week	選擇指定年份的週數，不包含時區
time	選擇時間，不包含時區
date	選擇年月日

格式相關：

Type	說明
email	僅接受 email 格式
tel	手機裝置會跳出數字鍵盤，須額外使用 pattern 屬性定義要驗證的格式
url	僅接受 URL 格式
number	僅接受數字
range	使用 slider 選擇 range

其他：

Type	說明
color	選擇顏色，Chrome 會跳出 color picker
file	選擇本機檔案
image	使用 image 作為 submit 按鈕
search	會以 name/value 的形式送出表單 (Chrome 的 Search Input 有清除鍵)

補充

輸入框狀態

要有好的使用者體驗，可以考慮在各種狀態下使用不同的樣式作區別

例如：

Default：預設狀態，無任何互動情況下
Hover：搭配 :hover selector
Focus：搭配 :focus selector
Typing
Entered
Disabled
Error
Error focus

參考自 Text input states

補充`:focus-visible` 和 `:focus`

:focus-visible 和 :focus 兩者都是為了凸顯當下哪個元素被 focus

但，:focus 有時候不符合需求，例如：
點擊按鈕時，通常不會希望看到 focus 出現的那圈 outline (focus ring)
使用鍵盤 Tab 選到按鈕時，又會希望看到 focus ring

可以使用 :focus-visible 這個偽類進行調整，而主要會套用:focus-visible的情境如下：

若元素支援鍵盤輸入，例如 input、textarea，套用 :focus-visible樣式
透過鍵盤裝置觸發的 focus，都會套用 :focus-visible樣式

範例：

滑鼠點擊按鈕，僅套用 :focus ，鍵盤 Tab 選取 :focus 、:focus-visible 都會套用
滑鼠點擊/鍵盤 Tab 選取 input，:focus、:focus-visible 都會套用

<style>
    :focus {
        background-color: pink;
    }
    :focus-visible {
        outline: 3px solid red;
    }
</style>

<button>Button A</button>
<input type="text" />

滑鼠的 focus 由點擊造成，鍵盤 Tab 的 focus 只是選取。
:focus-visible 用在需要指示使用者，選到的這個元素在這裡。