起因

最近經(jīng)常在群里看到諸如以下這些問題：

怎么按鍵盤的Enter鍵提交表單呢？

移動端怎么聚焦時讓鍵盤變成數(shù)字鍵呢？

移動端如何綁定鍵盤右下角【提交按鈕】事件？

移動端鍵盤右下角【提交】如果換成【搜索】呢？

針對這些問題分享下我對使用表單的一些建議。

優(yōu)化前

• 用戶名:

• 密碼:

• 搜索詞:

• 手機號:

• 年齡:

• 自我介紹:

// 驗證信息

// 異步 or 同步提交

alert('保存中');

});

以上代碼是常見的表單元素的結(jié)構(gòu)，一般是綁定提交按鈕的click事件，然后處理驗證用戶輸入的信息，符合條件后用ajax異步或者某種方式跳轉(zhuǎn)。

也有些fe會套一層form標簽，但還是綁定的click事件。

優(yōu)化點

針對以上的表單元素優(yōu)化點如下：

始終使用form標簽

只要是表單元素始終在元素外層包裹form標簽，說好的我們一起手拉手語義化呢？

始終綁定submit事件

不單獨的對【提交】按鈕綁定click事件，對整個表單綁定submit提交事件，這樣可以讓整個表單內(nèi)的文本框獲得Enter提交的VIP待遇，并且在移動端中可以讓文本框聚焦時鍵盤的右下角是【前往】。

再加上對表單里元素值的驗證+聚焦，可以達到【輸入->回車->錯誤->輸入->回車->提交】一氣呵成的體驗。

這個可以解決上面的問題1、問題3

input元素的type

input元素的type屬性決定著她的功能，應該根據(jù)自己的業(yè)務場景合理的使用她。

類型

說明

ios

android

備注

password

密碼框

-

-

在有密碼需求時使用，在某些系統(tǒng)下(如ios)會調(diào)起系統(tǒng)內(nèi)置鍵盤，更加安全

tel

電話框

直接調(diào)出系統(tǒng)默認的數(shù)字鍵盤

調(diào)起數(shù)字鍵盤

如果期望輸入是數(shù)字類型，可以優(yōu)化考慮該屬性

解決上面的問題2

number

數(shù)字框

調(diào)起輸入法的數(shù)字鍵盤

如果沒裝輸入法，會調(diào)起系統(tǒng)的全數(shù)字鍵盤(不是線數(shù)字)

調(diào)起數(shù)字鍵盤

優(yōu)先考慮使用tel

search

搜索框

-

-

在移動端中使用該屬性可以使鍵盤右下角變身成【搜索】按鈕，么么噠。

解決上面的問題4

email

郵箱

-

-

會調(diào)起字母鍵盤，并且有@符號

url

網(wǎng)址

-

-

會調(diào)起字母鍵盤，更適合輸入域名網(wǎng)址

當然還有一些date、time等，但要考慮到兼容性，也視項目情況而定。

placeholder占位

合理的使用placeholder占位，但要考慮兼容性。兼容方案：

使用value模擬需要注意提交時判斷value是否是默認占位的值，比較坑

使用span標簽定位顯示，需要考慮到直接設置元素值時的觸發(fā)情況

maxlength

如果已知元素理想的輸入長度，不妨設置下元素的最大長度屬性，并且兼容性很好哦。從一定程度上避免了用戶的誤輸入，從而提升用戶體驗。

label

表單元素的描述文字應該使用label標簽包裹，并且使用for屬性指向表單元素，從而達到點擊描述文字可以聚焦文本框的效果，如：

用戶名:

聚焦時的狀態(tài)

在文本框聚焦時理論來說應該讓用戶感知出來，而不是紋絲不動。

聚焦時頁面的位置

聚焦時考慮頁面滾動到焦點元素的最佳可視范圍。

你還需要考慮在移動端中聚焦時頁面老跑偏...

表單的異步提交狀態(tài)

當表單異步提交過程中需要向后端發(fā)送數(shù)據(jù)，可能會經(jīng)歷 提交中、提交出錯、提交成功 的狀態(tài)，還要考慮到提交中再次提交(重復提交)的問題。

比如在提交時設置提交按鈕的disabled = true，并且使其變灰，顯示【提交中...】是不是更友好些呢？手拉手的問題我就不再說了...

再延伸

在任何考慮ctrl快捷鍵的時候都要考慮mac上使用command替換方案

考慮到用戶網(wǎng)絡慢，在用戶沒有加載完成js時提交了表單后端原生支持 - 后端即使純form提交也可以正常的接收

默認阻止 - 在form標簽默認阻止οnsubmit="return false"，js初始化時處理掉

autocomplete - 根據(jù)業(yè)務場景判斷是否使用自助補全功能，可以在整個表單form添加，也可以在input元素添加

移動端文本聚焦時fixed失效

表單中重置按鈕

其他表單元素的研究

簡單的寫了個demo: https://github.xuexb.com/demo/form/new.html ，demo還有特優(yōu)化，比如聚焦時提示層的位置，還有聚焦時移動頁面的最佳可視位置，而這個位置又分很多版本，比如微信里聚焦會有安全提示占空間，而一些瀏覽器的bar高度又不一樣，再加上屏幕的尺寸不一有很多道道的。

demo中使用了部分 @zbfe/zui 的組件。

總結(jié)

以上是生活随笔為你收集整理的html css移动form表单位置,表单form的研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。