偶然間看到了篇不錯的文檔,創建令人驚嘆的密碼表單, 才發現原來表單要做得符合直覺也是有些學問在裡面的,遂記錄如下。
將相關字段分組在一個表單中#
我之前習慣把註冊和登錄分開來做,使用的不少網站也是這樣。所以就導致了一種情況,在使用瀏覽器的密碼自動保存時,往往註冊完後要登錄,就得再輸一遍代碼。但是我還不知道具體要怎麼實現。
使用自動填充屬性#
autocomplete 這個 attribute 我還是第一次見,查閱文檔後,發現這個還蠻有用的。Chromium 理解的密碼表單樣式
例如 <input name=bc autocomplete="section-home homeAddress">
<input type="text" autocomplete="username">
<input type="password" autocomplete="current-password">
<input type="submit" value="Sign In!">
而關於 autocomplete 和 autofill 的區別
我查了下有這樣的回答
- autocomplete 是 HTML5 新增的屬性,用於指定瀏覽器是否應該啟用表單自動完成功能,以及提供有關字段中預期信息類型的指導。
- autofill 是瀏覽器自帶的自動填充功能,它會根據用戶之前輸入過的值來預測用戶下一次可能輸入的值,並在用戶輸入時自動填充。autofill 不僅考慮了之前輸入過的值,還考慮了字段的含義和結構。例如,Google Chrome 實現了解析輸入字段以猜測其類型和結構。
使用隱藏字段傳遞隱含信息#
這點對於我來說也是挺新鮮的。才知道儘管有些信息沒必要讓用戶輸入,但還是有必要在表單中所包含,以便於密碼管理器。
文檔中是這樣講的
the user agent is allowed to provide the user with autocompletion values, but does not provide any further information about what kind of data the user might be expected to enter. User agents would have to use heuristics to decide what autocompletion values to suggest.
目前我的理解是,autocomplete 用來提升瀏覽器字段的類型,而 autofill 用來控制是否使用該功能
尾巴#
還是第一次看 html 的文檔,不是太能看得下去,因為內容太多了,信息量比較大,但確實有用