人人都是產品經理【起點學院】，BAT實戰(zhàn)派產品總監(jiān)手把手系統(tǒng)帶你學產品、學運營。

產品設計時細節(jié)是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節(jié)問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現(xiàn)藍色字樣，大多會在下面加上下劃線以便識別，不過現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現(xiàn)在出現(xiàn)了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態(tài)鏈接和靜態(tài)鏈接。動態(tài)超鏈接指的是可以通過改變HTML代碼來實現(xiàn)動態(tài)變化的鏈接，例如我們可以實現(xiàn)將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現(xiàn)鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態(tài)鏈接，顧名思義，就是沒有動態(tài)效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優(yōu)化其實就是對網站的站內鏈接的優(yōu)化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態(tài)

鏈接在交互上一般會呈現(xiàn)4種狀態(tài)，即默認狀態(tài)/懸停時狀態(tài)/點擊時狀態(tài)/點擊后狀態(tài)。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現(xiàn)半透明線條

點擊時，有波紋暈開的動態(tài)效果

點擊后，下面線條粗

有時候是3種狀態(tài)，比如百度網和知乎應用：

默認狀態(tài)

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統(tǒng)知乎應用的3種狀態(tài)，而在Android系統(tǒng)沒有用力點擊這一狀態(tài)。

默認狀態(tài)

點擊狀態(tài)

用力點擊會彈出預覽小窗口

有些時候只有2種狀態(tài)，如下圖谷歌網：

默認和點擊后狀態(tài)一樣

鼠標懸停時出現(xiàn)下劃線

默認狀態(tài)

點擊時

而有時候比如在APP里有時候就一直只有一種狀態(tài)，也可以稱靜態(tài)鏈接，之前的可以稱之為動態(tài)鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現(xiàn)都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊 授權發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中對應的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨有的屬性和方法：

• name：表示 <input> 元素的名稱。
• disabled：表示 <input> 元素是否禁止使用。在表單提交時不會包含被禁止的 <input> 元素。
• autofocus：表示頁面加載時，該元素是否會自動獲得焦點。
• required：表示表單提交時，該 <input>元素是否為必填。
• value：表示該 <input> 元素的值。
• validity：返回一個 ValidityState 對象，表示 <input> 元素的校驗狀態(tài)。是只讀屬性。
• validationMessage：表示 <input> 元素校驗失敗時，用戶看到的報錯信息。如果該元素不需要校驗，或者通過校驗，該屬性為空字符串。是只讀屬性。
• willValidate：表示表單提交時，<input> 元素是否會被校驗。是只讀屬性。
• select()：選中 <input> 元素內部的所有文本。
• click()：模擬鼠標點擊當前的 <input> 元素。

而在上述介紹 HTMLInputElement 類型中的屬性時，type 屬性要特別關注一下，因為根據 type 屬性的改變，可以改變<input>的屬性。

省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。

當 type 的值為text/password/number/時，會有以下屬性對 <input> 元素有效。

下面創(chuàng)建一個 type="text" ，一次顯示 25 個字符，但最多允許顯示 50 個字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中對應的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨有的屬性和方法：

• form：只讀屬性，返回對父表單元素的引用。如果此元素未包含在表單元素中，則它可以是同一文檔中 id 屬性同 form 值的 <form> 元素，如果沒有，該值為 null。
• type：只讀屬性，返回字符串textarea。
• value：string類型，返回/設置控件中包含的原始值。
• textLength：只讀屬性，long類型，返回<textarea>元素的value值的長度。與 value.length 相同。
• defaultValue：string類型，返回/設置textarea元素的默認值。
• placeholder：string類型，返回/設置 textarea 元素的占位符，作為對輸入內容的提示。
• rows：unsigned long類型，返回/設置textarea元素的可見文本行數(shù)。
• cols：unsigned long類型，返回/設置 textarea 元素的可見寬度。
• autofocus：boolean類型，返回/設置textarea元素在頁面加載時自動獲取焦點。
• name：返回/設置 textarea 元素的名稱。
• disabled：boolean類型，返回/設置 textarea 元素是否應當被禁用。
• HTMLTextAreaElement.labels：NodeList類型，返回與此select元素關聯(lián)的標簽元素列表。
• maxLength：long類型，返回/設置元素可以輸入的最大字符數(shù)。僅在值更改時才評估此約束。
• minLength：long類型，返回/設置元素可以輸入的最小字符數(shù)。僅在值更改時才評估此約束。
• accessKey：boolean類型，返回/設置訪問 textarea 的鍵盤快捷鍵。
• readOnly：boolean類型，返回/設置 textarea 元素是否為只讀。
• required：boolean 類型，返回/設置 textarea 元素是否為必填項。
• tabIndex：long類型，返回/設置 textarea 元素的 tab 鍵導航順序中元素的位置。

下面創(chuàng)建一個高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：

<textarea rows="25" cols="5">initial value</textarea>

注意：處理文本框值的時候最好不要使用 DOM 方法，而應該使用 value 屬性。

選擇文本

<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內容。該方法的語法為：

select(): void

下面看一個示例：

let textbox = document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框獲得焦點時，選中文本框的內容：

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

select 事件

當選中文本框中的文本或使用 select() 方法時，會觸發(fā) select 事件。

let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
    console.log(`Text selected: ${textbox.value}`);
});

取得選中的文本

HTML5 對 select 事件進行了擴展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區(qū)的起點偏移量和終點偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持這兩個屬性。

選中部分文本

HTML5 提供了 setSelectionRange() 方法用于選中部分文本：

setSelectionRange(start, end, direction): void;

• start：被選中的第一個字符的位置索引，從 0 開始。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
• end：被選中的最后一個字符的下一個位置索引。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
• direction：該參數(shù)是可選的字符串類型，表示選擇方向，可以傳入 “forward”/“backward”/“none” 三個值。

下面看一個例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
    function selectText() {
        let input = document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到選中效果，必須讓文本框獲得焦點。

輸入過濾

不同文本框經常需要保證輸入特定類型或格式的數(shù)據，或許數(shù)據需要包含特定字符或必須匹配某個特定模式。而文本框并未提供驗證功能，因此要配合 JavaScript 腳本實現(xiàn)輸入過濾功能。

屏蔽字符

有些輸入框需要出現(xiàn)或不出現(xiàn)特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：

input.addEventListener("keypress", (event) => {
    event.preventDefault();
});

而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達式實現(xiàn)只允許輸入數(shù)字的輸入框：

input.addEventListener("keypress", (event) => {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

還有一個問題需要處理：復制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項檢測是確保沒有按下Ctrl鍵，如下面的例子所示：

textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后這個改動可以確保所有默認的文本框行為不受影響。這個技術可以用來自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個實現(xiàn)了剪切板相關的事件以及通過JavaScript訪問剪切板數(shù)據的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規(guī)范。以下是與剪切板相關的 6 個事件：

• beforecopy：發(fā)生復制操作前觸發(fā)。
• copy：發(fā)生復制操作時觸發(fā)。
• beforecut：發(fā)生剪切操作前觸發(fā)。
• cut：發(fā)生剪切操作時觸發(fā)。
• beforepaste：發(fā)生粘貼操作前觸發(fā)。
• paste：發(fā)生粘貼操作時觸發(fā)。

剪切板事件的行為及相關對象會因瀏覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜單時觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會在 copy、cut 和 paste 事件在所有瀏覽器中都會按預期觸發(fā)。

在實際的事件發(fā)生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā)送或從中檢索數(shù)據前修改數(shù)據。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut和 paste 事件。

剪貼板的數(shù)據通過 clipboardData 對象來獲取，且clipboardData 對象提供 3 個操作數(shù)據的方法：

• getData(format)：從剪貼板獲取指定格式的數(shù)據，接收的參數(shù)為指定獲取的數(shù)據格式，如果沒有指定數(shù)據格式或指定數(shù)據格式不存在，則此方法返回一個空字符串。
• setData(format, data)：給剪貼板賦予指定格式的數(shù)據，第一個參數(shù)指定數(shù)據格式，第二個參數(shù)為第一個參數(shù)賦予數(shù)據。如果指定數(shù)據格式不存在，則將其添加到數(shù)據存儲的末尾；如果指定數(shù)據格式存在，則將數(shù)據替換在指定數(shù)據格式的位置。
• clearData(format)：刪除指定格式的數(shù)據，接收的參數(shù)為指定要刪除的數(shù)據格式，如果指定格式不存在，則此方法不執(zhí)行任何操作；如果此參數(shù)為空字符串或未提供，則將刪除所有格式的數(shù)據。

而 clipboardData 對象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經授權訪問剪貼板，只能在剪貼板事件期間訪問 clipboardData 對象；IE 會在任何時候都暴露 clipboardData 對象。因此，要兼容兩者，最好在剪貼板事件期間使用該對象。

function getClipboardText(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有數(shù)字，那剪貼時，就需要使用paste事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認行為：

input.addEventListener("paste", (event) => {
    let text = getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問getData()方法。

自動切換

在 JavaScript 中，可以用在當前字段完成時自動切換到下一個字段的方式來增強表單字段的易用性。比如，常用手機號分為國家好加手機號。因此，我們設置 2 個文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

當文本框輸入到最大允許字符數(shù)后，就把焦點移到下一個文本框，這樣可以增加表單的易用性并加速數(shù)據輸入。如下所示：

<script>
    function tabForward(event){
        let target = event.target;
        if (target.value.length == target.maxLength){
            let form = target.form;
            for (let i = 0, len = form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds = ["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox = document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

這里，tabForward() 函數(shù)通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測輸入是否達到了最大長度。如果兩者相等，就通過循環(huán)表中的元素集合找到當前文本框，并把焦點設置到下一個元素。

注意：上面的代碼只適用于之前既定的標記，沒有考慮可能存在的隱藏字段。

HTML5

HTML5 新增了一些表單提交前，瀏覽器會基于指定的規(guī)則進行驗證，并在出錯時顯示適當?shù)腻e誤信息。而驗證會基于某些條件應用到表單字段中。

必填字段

表單字段中添加 required 屬性，用于標注該字段是必填項，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通過 JavaScript 檢測對應元素的 required 屬性來判斷表單字段是否為必填項：

let isRequired = document.forms[0].elements["account"].required;

也可以檢測瀏覽器是否支持 required 屬性：

let isRequiredSupported = "required" in document.createElement("input");

注意：不同瀏覽器處理必填字段的機制不同。Firefox、Chrome、IE 和Opera 會阻止表單提交并在相應字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會阻止提交表單。

更多輸入類型

HTML5 為 <input> 元素增加了幾個新的 type 值。如下所示：

這些輸入表名字段應該輸入的數(shù)據類型，并且提供了默認驗證。如下所示：

<input type="email" name="email">
<input type="url" name="homepage">

要檢測瀏覽器是否支持新類型，可以在 JavaScript 中創(chuàng)建 <input> 并設置 type 屬性，之后讀取它即可。老版本中會將我只類型設置為 text，而支持的會返回正確的值。如下所示：

let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");

數(shù)值范圍

而上面介紹的幾個如 number/range/datetime/datetime-local/date/month/week/time 幾個填寫數(shù)字的類型，都可以指定 min/max/step 等幾個與數(shù)值有關的屬性。step 屬性用于規(guī)定合法數(shù)字間隔，如 step="2"，則合法數(shù)字應該為 0、2、4、6，依次類推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數(shù)。

也可以使用 stepUp() 和 stepDown() 方法對 <input> 元素中的值進行加減，它倆會接收一個可選參數(shù)，用于表示加減的數(shù)值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10

輸入模式

HTML5 還為文本添加了 pattern 屬性，用于指定一個正則表達式。這樣就可以自己設置 <input> 元素的輸入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的開頭和末尾分別假設有^和$。這意味著輸入內容必須從頭到尾都嚴格與模式匹配。

與新增的輸入類型一樣，指定 pattern 屬性也不會阻止用戶輸入無效內容。模式會應用到值，然后瀏覽器會知道值是否有效。通過訪問 pattern 屬性可以讀取模式：

let pattern = document.forms[0].elements["count"].pattern;

使用如下代碼可以檢測瀏覽器是否支持pattern 屬性：

let isPatternSupported = "pattern" in document.createElement("input");

檢測有效性

HTML5 新增了 checkValidity() 方法，用來檢測表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會被視為無效，字段值不匹配 pattern 屬性也會被視為無效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，繼續(xù)
} else {
    // 字段無效
}

要檢查整個表單是否有效，可以直接在表單上調用checkValidity()方法。這個方法會在所有字段都有效時返回true，有一個字段無效就會返回false：

if(document.forms[0].checkValidity()){
    // 表單有效，繼續(xù)
} else {
    // 表單無效
}

validity 屬性會返回一個ValidityState 對象，表示 <input> 元素的校驗狀態(tài)。返回的對象包含一些列的布爾值的屬性：

• customError：如果設置了 setCustomValidity() 就返回 true，否則返回false。
• patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
• rangeOverflow：如果字段值大于 max 的值則返回true。
• rangeUnderflow：如果字段值小于 min 的值則返回true。
• stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
• tooLong：如果字段值的長度超過了 maxlength 屬性指定的值則返回true。
• typeMismatch：如果字段值不是 "email" 或"url" 要求的格式則返回true。
• valid：如果其他所有屬性的值都為false 則返回true。與checkValidity()的條件一致。
• valueMissing：如果字段是必填的但沒有值則返回true。

因此，通過 validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("請指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請指定電子郵件地址.");
    } else {
        console.log("值無效.");
    }
}

禁用驗證

通過指定 novalidate 屬性可以禁止對表單進行任何驗證：

<form method="post" action="/signup" novalidate>
    <!-- 表單元素 -->
</form>

也可以在 JavaScript 通過 noValidate 屬性設置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate = true; // 關閉驗證

如果一個表單中有多個提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過該按鈕無需驗證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗證的提交按鈕">
</form>

也可以使用 JavaScript 設置 formNoValidate 屬性：

// 關閉驗證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

總結

以上總結了 <input> 和 <textarea> 兩個元素的一些功能，主要是 <input> 元素可以通過設置 type 屬性獲取不同類型的輸入框，可以通過監(jiān)聽鍵盤事件并檢測要插入的字符來控制文本框的內容。

還有一些與剪貼板相關的事件，并對剪貼的內容進行檢測。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗證相關的屬性和方法。

輯導語：B端產品往往由于業(yè)務體量龐大，導致信息復雜，同時對業(yè)務的精確性的要求很高；服務于B端的業(yè)務，不能夠出信息錯誤，填錯一個信息，就會引發(fā)巨大的問題。本文結合筆者自己的工作經驗，總結了大型B端業(yè)務中表單的設計方法，供小伙伴參考。

一、表單的定義

表單是信息添加、錄入的通用形式；其作為獲取用戶輸入的重要交互方式，也承擔著將問題和答案進行配對的角色。

二、表單的設計原則

設計原則是任何一種解決方案的指路燈，它們體現(xiàn)解決方案應包含的基本目標。

針對互聯(lián)網表單設計，我倡導的原則如下：

1. 盡量減少痛苦；
2. 說明填寫完成路徑；
3. 考慮情境；
4. 確保一直溝通。

三、表單的結構

我們先看看表單的結構，表單主要由5部分組成：

1. 標題：這個元素幫助用戶引導完成表單填寫的整個過程，尤其在你對信息進行分組方便用戶填寫時，特別有用。
2. 標簽：告訴用戶相對應的輸入字段的含義。
3. 輸入域：包含了文本框、密碼框、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
4. 提示信息：包含幫助信息、占位符和反饋信息提示。
5. 操作按鈕：包括提交按鈕、保存按鈕、復位按鈕和一般按鈕；用于將表單數(shù)據傳送到服務器上。

四、表單的表現(xiàn)形式

1. 標簽

標簽根據標簽與輸入域的位置關系，分為：左對齊、右對齊、頂部對齊、內聯(lián)標簽、圖標標簽和浮動標簽。

每種標簽樣式都有自身的優(yōu)點與局現(xiàn)性，根據不同的場景選擇適合的標簽樣式，能提高用戶閱讀效率，同時還能降低信息填寫時的錯誤率。

1）頂部對齊：根據Matteo Penzo 發(fā)布的關于標簽放置的文章表明：采用頂部對齊的標簽樣式，瀏覽表單所需的時間最短；如果希望用戶能快速掃描填寫表單，頂部對齊的標簽是一個不錯的選擇。

頂部對齊的結構，使得能放下更長的標簽；但對于縱向空間是一個挑戰(zhàn)，當填寫信息過多時，表單就會很長。

• 優(yōu)點：有最快的瀏覽和處理速度，同時標簽長度彈性大。
• 缺點：非常占縱向空間。

2）左對齊：左對齊標簽，文字開頭按閱讀視線對齊，符合人們的閱讀習慣，是有利于閱讀的。

瀏覽表單所需時間最長，但是緩慢完成率并不總是一件壞事——如果表單要求敏感數(shù)據(例如提供駕駛證、身份證、銀行卡號等，可以故意減緩用戶的填寫速度，來確保填寫的準確性）。

左對齊的結構需要更多的橫向空間，因此在移動端的呈現(xiàn)上可以是個問題。

此外，在屏幕空間有限的情況下，也會一定程度上限制了標簽和輸入框的長度。

• 優(yōu)點：文字開頭按閱讀視線對齊，方便閱讀，節(jié)約縱向空間。
• 缺點：填寫速度慢，標簽長度和輸入框彈性小。

3）右對齊：右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯(lián)。

對于簡短的表格，右對齊的標簽可以有很快的完成時間；但由于標簽長短不同，左邊緣參差不齊，整體掃讀表單的時候不容易了解全部信息。

與左對齊類似，在屏幕空間有限的情況下，也會一定程度上限制了標簽和輸入框的長度。

• 優(yōu)點：時間較短，節(jié)約縱向空間。
• 缺點：整體可讀性低，標簽長度和輸入框彈性小。

4）內聯(lián)標簽：內聯(lián)標簽由于它對空間的占比很小，往往運用于移動端的界面設計中；但如果在交互上處理不好，會有很大的缺陷。

內聯(lián)標簽是用作提示性文字，來告訴用戶應該填寫什么內容，但用戶在填寫的適合，它就會消失；因此用戶無法仔細檢查他們是否寫下了所要求的內容，這增加了錯誤的可能性。

另外一個問題是：用戶可能會把占位符文本誤認為預填數(shù)據，因此忽略它（正如尼爾森諾曼集團的眼動追蹤研究所證實的）。

5）圖標標簽：圖標標簽是內聯(lián)標簽的一種演化形式，在一定程度上緩解用戶的困惑和自我懷疑的心理。

但就圖標而言，用戶需要時間來反應它所代表的意思——若表意性不強或者并不是常見的圖標樣式，用戶就要思考和猜測它的含義。

此外，輸入項一多，還得記憶那個圖標所對應的意思。

• 優(yōu)點：空間占比小；在一定程度上緩解用戶的困惑和自我懷疑。
• 缺點：可能造成用戶的認知負擔，增加用戶記憶成本。

6）浮動標簽：用戶在輸入時，內部標題（提示信息）進行浮動位移，即節(jié)省了空間，提示性信息依舊在。

但相比其他幾種標簽樣式來說，需要一定的開發(fā)成本。

• 優(yōu)點：空間占比小，無需用戶對標簽進行記憶
• 缺點：需要一定的開發(fā)成本

關于標簽樣式的選擇

2. 輸入域

輸入域是表單的核心主體，包含了文本框、選擇器、開關、復選框、單選框、步驟條、滑塊、上傳、標簽頁等控件（按類型分）。

選擇適合的控件樣式，能在一定程度上提高表單填寫的效率。

在輸入域中，存在多種控件樣式，那么在設計產品的過程中，我們該如何選擇，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經驗。供大家參考。

1）文本框

文本框包含了單行文本框和多行文本框。

針對單行文本框的設計建議：

a. 選擇適合的大小，它的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

如下圖即一典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話，容易誤導用戶對所需輸入金額的判斷，造成極大不安全感。

b. 采用字段掩碼，自動匹配特定數(shù)字的輸入格式。

例如：電話、身份證、銀行卡等；按照7加減二法則，根據用戶的記憶結構來最大化提升閱讀體驗。

c. 彈出鍵盤應與需要輸入的文本類型相匹配（移動端）。

d. 涉及到金額輸入時，當用戶輸入的金額超過千時，出現(xiàn)最高分位提示，每多輸入一位，最高分位隨之增加。

e. 文字輸入最好有自動補全、自動建議功能，減少不必要的文字輸入，減少出錯。

例如：填寫地址欄通常是表單中最成問題的部分，像地址自動填充（基于用戶的定位和輸入提供準確的建議）的工具使用戶能以更少打字量完成輸入。

f. 有限制輸入時，給予用戶明確的提示，增加用戶感知，減少出錯率。

知識擴展：什么是7加減二法則？

早在19世紀中葉，愛爾蘭哲學家漢米爾頓觀察到，有一個神奇的7±2效應；意思就是人們的短時記憶的信息量是7個，可能會上下浮動2個。

針對多行文本框的設計建議：

使用可拉伸的文本框比固定框更好，從使用體驗講，可變化的文本框使頁面整體效果更統(tǒng)一。

固定文的文本框當輸入文本超過其設置的寬度，會出現(xiàn)內滾動條，當頁面上出現(xiàn)兩個滾動條時（大頁面的滾動條），在使用操作上會帶來一定的混亂。

2）選擇框

包括下拉列表、選框、開關、日期選擇器等。

對于選擇框有如下幾個建議：

a. 避免設置默認值：除非您認為大部分用戶將選擇該值，尤其是必填字段。

為什么？

因為你可能會增加錯誤，用戶會快速掃描表單，所以他們可能會跳過一些已經有默認值的字段。

但是這個規(guī)則不適用于智能的默認值，也就是根據用戶的信息設置的默認值；因為智能的默認值可以使表單更快，更準確地完成。

例如：根據定位數(shù)據預先選擇用戶所在的國家/地區(qū)。

不過，請謹慎使用。

b. 當選項很多時，提供檢索功能。

c. 提示信息要明確，要讓用戶明確自己選擇的是什么。

3）單選框與復選框

a. 按一定的邏輯進行選項排序，例如根據發(fā)生的可能性、難易程度、風險大小來排序。

b. 選項應該易于理解，容易區(qū)分。

c. 盡可能提供默認選項。

4）關于控件的選擇

a. 選擇框優(yōu)于輸入框。

任何高密度的操作，都會引起用戶的不適；因此，在輸入項的選擇時，用選擇來代替鍵盤輸入。

• 一方面：簡化用戶的操作，點擊次數(shù)遠小于輸入，減少用戶的操作密度；
• 另一方面：減輕用戶的認知、記憶負擔。

相較于輸入框，選擇操作步驟少，相對來說效率較高；同時，用戶用思考輸入值，也不用承擔輸入錯誤要重新輸入的風險。

用戶可以通過選擇項，清晰明確的知道有哪些值可以選擇，對于一些無關緊要，或者用戶較難理解的輸入項，可以預制默認值，可以照顧到各階段的用戶。

b. 單選框與下拉選擇框。

單選框較為適合選項較少（少于五個），同時選擇項之間較為類似，需要強調或對比時，可以優(yōu)先考慮單選框。

另外，當選項能見度和快速響應優(yōu)先時，也建議優(yōu)先考慮單選框。

因為相較于下拉選擇，用戶可以通過展示出來的選項，直接選中目標選項，提升輸入效率。

下拉選擇框較為適合選項較多（超過五個），有默認選項或者選擇項之間有較大差異，同時下拉選擇，最好不要引起隨后輸入項數(shù)量以及頁面的變化；否則下拉選擇的收起以及頁面的變化，易引起用戶不適。

若選項過多，超過二十個，最好引入模糊匹配以及一定排序規(guī)則（首字母排序、數(shù)字排序等），方面用戶提前預知選項的大致位置，或通過模糊檢索找到相應的選項。

5）關于必填項

大多數(shù)情況下，所有字段都是必填項，只有幾個字段是可選的，一般用“*”標記必填字段。

但星號并不適合所有類型的用戶，記得之前客戶問星號是什么意思？

它是頁面中的標簽還是描述中的標簽；同時，并且紅色會從用戶方面引起負面關聯(lián)，因為紅色表示錯誤。

為了避免這種誤解，可采用文本框內暗提示。

它也是一個比較清晰標志必填項的方式，并且還很節(jié)省空間，也能在一定程度上起到視覺降噪的作用。

3. 提示信息

提示信息可以分為引導性提示（幫助文字、輸入框提示、錯誤提示信息）和反饋性提示兩種。

這里主要想講講錯誤提示的設計：

1）關于錯誤提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發(fā)現(xiàn)——在表單頂部顯示所有錯誤信息，會給用戶的記憶造成較高的認知符合，會強制用戶回憶每個錯誤輸入框中的錯誤消息。

錯誤信息提示在輸入框行間顯示是減少記憶認知負荷的有效方法。

它可以幫助當場識別錯誤而不是靠回憶錯誤，縮短反應時間，提高表單填寫效率。

因此，錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。

下面來看一個簡單的例子，如下圖：

當我們在錄入客戶信息時，假設填寫錯誤手機號碼，按照上面的論述，錯誤提示可以最直觀的顯示在這4個位置。

哪一個位置是最佳位置呢？

答案是：右邊。理由如下：

a. 錯誤信息提示右邊，符合人們從左到右的閱讀習慣；用戶視覺路徑自然流暢，很大程度上減少了用戶的精力和視覺工作。

放在左邊則恰恰相反，同時左邊與用戶期望相違背，因為左側放置更高優(yōu)先級的元素，是我們的直覺。

但事實上用戶需要專注于糾正他們的輸入，因此輸入框應該是更重要的元素。

b. 對于上邊的錯誤信息提示，有著更高的認知負荷。

當標簽頂部對齊時，錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音，用戶注意力被分散，很難專注于其中一個，并且可能混淆它們。

c. 放置下邊的錯誤信息提示，雖然不符合從左到右的閱讀習慣，但它確與自然的從上倒下的閱讀流程相對應。

手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。

雖然它可能會增加用戶閱讀文本時的認知負荷（與類比上邊的錯誤信息提示），但可以通過將它們隔開足夠的間隔來防止這種情況。

綜上所述，如果是web端請選擇放置在右邊，如果是移動端則放置在下邊。

當然，如果開發(fā)時間有限，都選擇放置下邊也可以，方便適配。

2）幫助信息

有時候需要幫助性信息，來輔助用戶完成表單填寫。

當文本簡短的時候，可以直接放在改輸入框的附近。

當文案過長的時候，就需要做氣泡框——獲取鼠標焦點，則展開信息，失去焦點則消失（在氣泡展開時，切忌勿擋住input輸入框）。

也有些產品是將幫助信息放在頁面頂部，如果是針對全局幫助性信息，則可以采用這種方式。

如果只是針對某個元素提醒，則應將兩者放在一起，讓用戶知道當前處于什么地方，在針對什么進行引導、輔助。

五、復雜業(yè)務表單布局結構探索

在復雜業(yè)務表單設計中采用單列布局，大家有沒有遇到過類似的問題，例如：

• 客戶1：“單列右側空白區(qū)域過大，留白多，表單太長啦。”
• 客戶2：“單列縱向占比大，表單太長，我看不到全部內容。”
• 客戶3：“怎么不采用多列，多列我能看的內容多啊”等等…

針對這些問題，我們團隊從自身的業(yè)務出發(fā)，對復雜業(yè)務表單布局進行了相應的探索。

1. 多列與單列的探索

首先，我們根據下圖的規(guī)則對復雜業(yè)務的表單布局進行多方案的實驗：

方案一：采用4列布局，標簽頂對齊。

那為什么標簽不采用右對齊呢？

四列布局，頁面已經很擁擠，加上標簽長度長短不一且最大長度也無法確定（用戶自定義），所以放置采用了標簽頂對齊。

總體上來看，縮減的長圖并不理想。

方案二：三列布局，標簽右對齊的方式。

由于三列布局，頁面空間較大，嘗試著把標簽右對齊，總體上達到了縮減表單長度的目的。

但字段若出現(xiàn)換行，則頁面信息模塊是混亂的。

根據CXL研究所的發(fā)現(xiàn)：單列表單比多列表單完成得更快一些。在這項研究中，參與測試的人完成單列表單的平均速度比多列表單快15.4秒；多列布局雖然縮減了表單長度，空間利用率也提高了，但整體的填寫效率降低了，這與表單設計原則相違背。

同時從開發(fā)效率來看，單列成本較低（多列需要做響應式）；從業(yè)務承載上看，單列擴展性更強，適合復雜多樣的業(yè)務場景（多列適合交單一的場景）。

綜上，最后還是采用單列布局。

2. 單列布局在復雜業(yè)務中運用

面臨的問題該如何解決？

我們團隊重新審視了客戶的這些反饋：空白區(qū)域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。

我們嘗試把這些問題翻譯成：我無法預知表單的填寫內容，我想要是把空白的地方也利用上我是不是就看全了整個表單。

如果是這樣，用戶的本質述求就是想要掌控感。

對現(xiàn)有的單列布局做了以下幾個處理：

• a. 采用卡片式布局，區(qū)分內容；
• b. 增加引導式的定位錨點；
• c. 在錨處加入微動效反饋，給予用戶確定感。

感謝閱讀！本文給表單設計提供了一個基本的指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。

如果你還有什么好的想法和建議，可以在評論里留言討論。

參考文獻：

http://www.woshipm.com/pd/1058591.html

http://www.woshipm.com/pd/4083149.html

http://www.woshipm.com/pd/3854174.html

https://ant.design/docs/spec/research-form-cn

https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6#.dw95zpy42

https://www.jianshu.com/p/bcd76917753e

本文由 @Nick 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協(xié)議