提升Input 用戶體驗的三個小技巧

寫在前面

今天完成了剩下的html的學習毯辅,一個周末認認真真學完了html的基礎知識督怜,也找了很多學習的資源和網(wǎng)站异希,周一開始就要一邊寫論文一邊看前端了,做不同的事情也是一種休息挡育。不過找到了興趣就會很想學巴碗,看書編程寫文章,都是自己喜歡的事情静盅,以前不敢發(fā)布文章良价,總覺得自己語文不好寝殴,現(xiàn)在就把寫作當作是知識的輸出,對自己的檢驗和鍛煉明垢。這個五一真的是要勞動中度過了蚣常。

input用戶體驗提升技巧一

  • <placeholder>
    當用戶看見輸入框中有一個提示是不是覺得很貼心啊,哈哈
<input type="text" name="lastname" placeholder="輸入姓氏">
placeholder效果

input用戶體驗提升技巧二

  • datalist
    不用用戶填痊银,我?guī)湍銓懞么鸢傅治茫氵x一個就好了,是不是就更貼心啦溯革,當然用戶想要自己填別的答案也是可以的
<input type="text" name="animals" list="animals" placeholder="輸入一種動物">
<datalist id="animals">
<option value="dog">
<option value="cat">
<option value="bird">
</datalist>
圖1.datalist效果-剛載入.png
圖2.datalist效果-將鼠標移上去.png

剛載入是圖一的效果贞绳,和平時沒差沐祷,當鼠標移上去就會驚喜的發(fā)現(xiàn)右邊有一個下拉符號颤诀,點一下就會有我們準備好的答案了摧阅。

NOTE: input中的list屬性要和datalist的id相同腥泥,這樣才能綁定到一起

input用戶體驗提升技巧三

  • autocomplete
    用戶可能還不滿意我們準備的答案凌那,怎么辦乏屯?沒關系我們可以記住用戶的輸入让歼,在用戶下一次輸入時就幫用戶補全是掰,簡直不能再貼心了矛绘。
<form>
<input name="book" autocomplete="on">
<input type="submit">
</form>
圖3.1 autocomplete效果

這是載入時的效果耍休,就是個普通的框,然后我輸入html货矮、html5.羊精、css、css5并且都點了提交按鈕囚玫。

圖3.2 autocomplete效果

當我輸入h時喧锦,會提示我是不是想要輸入html或者html5

圖3.3 autocomplete效果

我在框框上雙擊,看到了之前輸入過的所有結果.
用戶體驗是不是很棒的敖僭睢裸违!

NOTE: autocomplete屬性值有 on 和 off,并且也不是input獨有的本昏,form也是有的供汛,可以在form中加入autocomplete=”on“,整個form中所有的元素(包括 input的type是text, search, url, tel, email, password, datepickers, range, and color的)都有這個屬性涌穆。也可以設置整個form是on怔昨,個別元素是off,vice versa.

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末宿稀,一起剝皮案震驚了整個濱河市趁舀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌祝沸,老刑警劉巖矮烹,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件越庇,死亡現(xiàn)場離奇詭異,居然都是意外死亡奉狈,警方通過查閱死者的電腦和手機卤唉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來仁期,“玉大人桑驱,你說我怎么就攤上這事□说埃” “怎么了熬的?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長赊级。 經(jīng)常有香客問我押框,道長,這世上最難降的妖魔是什么此衅? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任强戴,我火速辦了婚禮,結果婚禮上挡鞍,老公的妹妹穿的比我還像新娘。我一直安慰自己预烙,他們只是感情好墨微,可當我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扁掸,像睡著了一般翘县。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谴分,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天锈麸,我揣著相機與錄音,去河邊找鬼牺蹄。 笑死忘伞,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的沙兰。 我是一名探鬼主播氓奈,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鼎天!你這毒婦竟也來了舀奶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤斋射,失蹤者是張志新(化名)和其女友劉穎育勺,沒想到半個月后但荤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡涧至,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年腹躁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片化借。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡潜慎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蓖康,到底是詐尸還是另有隱情铐炫,我是刑警寧澤,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布蒜焊,位于F島的核電站倒信,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏泳梆。R本人自食惡果不足惜鳖悠,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望优妙。 院中可真熱鬧乘综,春花似錦、人聲如沸套硼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽邪意。三九已至九妈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雾鬼,已是汗流浹背萌朱。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留策菜,地道東北人晶疼。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像做入,于是被迫代替她去往敵國和親冒晰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容