網頁設計小眉角:一些少見卻好用的 HTML & CSS

一、清除 input 的值

input 的欄位預設會記錄輸入的值,以方便使用者在重複輸入的時候可以透過下拉直接點選,如帳號、電子信箱等等。但有時我們十分確定使用者不會在該欄位輸入兩次一模一樣的數值,或是不希望其他使用者發現我們輸入什麼內容時,會希望關掉 input 的紀錄功能,這時,你可以在 input 加入 autocomplete="off" 的屬性,這個屬性預設是 on 開啟,也就是會紀錄 input 的輸入內容。但,當你改成 off 後,下次你在該欄位輸入資訊時,瀏覽器就不會紀錄任何內容。

<input type="text" autocomplete="off">

二、在 input 內顯示一段預設的文字,並在使用者點選該欄位後清空內容。

通常這個功能較常出現在比較複雜的表單中,由於預期使用者需要輸入較多的內容,因此需要透過文字說明該欄位需要輸入什麼內容,用以減少使用者輸入錯誤資訊的機會。舉個例子:假設有個要輸入電子信箱的欄位,我們希望可以在該欄位預設出現『請輸入電子信箱』的文字,並在使用者點選該欄位後,自動清除這段文字,這時,你可以使用 placeholder 來達到這個效果,設置方式如下:

<input type="text" placeholder="請輸入電子信箱">

三、透過 a 連結打電話

一般的 a 連結除了可以連結不同頁面外,也可以用來連接市話及手機號碼,很適合用在手機頁面的相關欄位中,語法如下

市話:<a href="tel:+886-2-23456789">打市話</a>
手機:<a href="tel:+886-912345678">打手機</a>

四、可編輯的區塊

當我們要編輯某段網頁的內容時,會在該區塊附近設定一個編輯的按鈕或 icon,使用者點選後會跳到相對應的表單頁以便接下來的內容調整。但在 HTML5 中,有一個 contenteditable 的屬性,只要設定該屬性,就可以直接編輯對應的標籤內容,使用上會更加直觀。

<div contenteditable="true">這段文字內容可以直接編輯</div>

五、禁止欄位的輸入或修改

有時候,我們會希望禁止使用者修改表單中的內容,又希望欄位中的資訊可以顯示出來,這時我們可以在 input 的欄位中加入 readonly 的屬性,方式如下:

<input type="text" value="這個欄位的內容無法修改喔" readonly>

你想針對這個欄位做一些樣式的調整,則可以使用 :read-only 來達成,方法如下:

input:read-only{
    color: #333;
}

注意:這個效果只能當成 UX 體驗的優化,使用者如果有心破解這個限制,只需要將 html 下載回本機端,並將 readonly 移除即可。如果表單的資訊有安全或隱私上的考量,需要同時搭配後端做輸入的限制。

六、停用特定的按鈕或連結

如果你想停用特定的按鈕或連結,例如當課程報名的時間截止後,我們會希望原本的報名按鈕失效,這時可以使用 pointer-events: none; ,範例如下:

a {
    pointer-events: none;
}

注意:這個效果只能當成 UX 體驗的優化,使用者如果有心破解這個限制,只需要將 CSS 下載回本機端,並將 pointer-events 移除即可。如果按鈕連結的頁面有安全或隱私上的考量,需要同時搭配後端做限制。

七、清除 iOS 的 button 樣式

在 Windows、MAC、Android 要改變一個 button 的樣式時,可以透過更改背景、邊線、文字大小、顏色及設定圓角來達成。但在 iOS 的系統下,遇到 button 或 input type 等於 submit、reset 的時候會失效,因為 iOS 有自己統一的預設 button 樣式,這時,該怎麼處理呢?

遇到這種情況時,我們只要在 button 的標籤裡設定 appearance: none; css 的屬性,就可以清除 iOS 的預設樣式所帶來的影響。範例如下:

button,
[type="submit"],
[type="reset"] {
    appearance: none;
}

八、form 之外的欄位要如何與指定的 form 連動?

如果你要設計兩個文字輸入欄位的表單,多半會將 input 包在 form 裡面,如下所示:

<form>
    <input type="text" value="欄位一">
    <input type="text" value="欄位二">
    <input type="submit" value="確認">
</form>

但,如果因為版面的規劃的需要,將部分表單內容設置在 form 之外時,如果沒有經過特別的設定,按下傳輸鍵後,form 之外的欄位內容就不會被傳遞出去,要解決這個問題只需要給 form 一個 id 名稱,並將 form 之外的欄位設置 form 的屬性,屬性內容即是該 form 的 id 名稱即可。案例如下:

<form id="form_id">
    <input type="text" value="欄位一">
    <input type="submit" value="確認">
</form>

<input type="text" value="欄位二" form="form_id">

九、讓手機支援 momentum-based scrolling (iOS only)

我們在手機端瀏覽長網頁的時候,會希望當使用者滑動內容時,網頁會依據滑動的力量、時間及速度緩緩停止,而非在手指頭離開螢幕的瞬間立即停止,這效果稱為 momentum-based scrolling

讓手機支援 momentum-based scrolling 的方式也很簡單,我們只需要在 scroll 的區域設定 -webkit-overflow-scrolling,參數有兩個:

  • 不支援 momentum-based scrolling:-webkit-overflow-scrolling: auto;
  • 支援 momentum-based scrolling:-webkit-overflow-scrolling: touch;

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

回到頂端