高效輸入1

開始有效輸入，速度帶來轉化。

<form class="date-and-time-picker>
	<label for="date">
		<span>What day do you want to leave?</span>
		<input id="date" type="date"></input>
	</label>
	<label for="time">
		<span>What time do you want to leave?</span>
		<input id="time" type="time"></input>
	</label>
</form>

HTML5 表單（google連結）
MDN 上的輸入型別

資料列表，結合了預定義的列表功能和靈活的文字輸入形式。即當使用者開始輸入時，將看到建議的列表選項。但並不意味著使用者必須選擇其中的一個選項，因此資料列表非常方便、靈活。它的語法也很簡單。

將預設預定義的選項放在 datalist 標籤中，每個選項設定一個你想設的值，為 datalist 設定 ID，input 應該具有 list 屬性，list 屬性應該與 datalist ID 保持一致。程式碼如下所示：

<input list="nanodegress">
<datalist id="nanodegress">
	<option value="Android"></option>
	<option value="Data Analyst"></option>
	<option value="Front End"></option>
	<option value="Full Stack"></option>
	<option value="Intro to Programming"></option>
	<option value="IOS"></option>
	<option value="Tech Enterpreneur"></option>
</datalist>

MDN 上的資料列表

高效輸入2

幫助使用者更快速地填充表單。

<label>Click me <input type="text" id="User" name="Name" /></label>

使用 label “for” 屬性 繫結到 input "id"屬性上

<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

MDN 上的標籤

MDN 上的佔位符

日曆、拼寫錯誤、自動填充、數字輸入、範圍輸入

MDN 上的輸入

到目前為為止，學習了很多單個輸入方面的知識。嘗試不同的輸入型別；知道如何在正確的情形下選擇正確的型別；向輸入上新增實用的標籤，確保使用者在輸入時始終知道輸入的是什麼；使用自動填充屬性，幫助瀏覽器自動填充常見的誰讓欄位；使用不同的驗證屬性來驗證使用者的輸入，甚至在使用者提交表單之前就能驗證；使用 constraints validation API 驗證更復雜的輸入。

---

更快的表單

表單原則

• 儘量讓表單簡短易懂，避擴音供任何多餘的資訊，並儘量啟用自動填充
• 提供實用的提示，提供標籤元素提供提示
• 提供實時反饋，反饋形式多種多樣，通過即時驗證對輸入提供反饋

完整的表單原則

表單角色扮演，可以幫助我們以局外人的角度看待問題。發現表單與現實生活中表述的差異。資料庫中的這種【名：值】對，不是人類互動，是告訴機器處理文件需要填寫的欄位，並不是我們看待世界的方式。角色扮演可以幫助我們瞭解網路互動中的一些看似奇怪的細節。