寫在前面
今天完成了剩下的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.
