高效输入

版权声明：如有转载请注明出处 http://blog.csdn.net/modurookie ,谢谢 https://blog.csdn.net/MoDuRooKie/article/details/82887277

高效输入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 上的输入

扫描二维码关注公众号，回复： 4474667 查看本文章

到目前为为止，学习了很多单个输入方面的知识。尝试不同的输入类型；知道如何在正确的情形下选择正确的类型；向输入上添加实用的标签，确保用户在输入时始终知道输入的是什么；使用自动填充属性，帮助浏览器自动填充常见的谁让字段；使用不同的验证属性来验证用户的输入，甚至在用户提交表单之前就能验证；使用 constraints validation API 验证更复杂的输入。

---

更快的表单

表单原则

• 尽量让表单简短易懂，避免提供任何多余的信息，并尽量启用自动填充
• 提供实用的提示，提供标签元素提供提示
• 提供实时反馈，反馈形式多种多样，通过即时验证对输入提供反馈

完整的表单原则

表单角色扮演，可以帮助我们以局外人的角度看待问题。发现表单与现实生活中表述的差异。数据库中的这种【名：值】对，不是人类互动，是告诉机器处理文档需要填写的字段，并不是我们看待世界的方式。角色扮演可以帮助我们了解网络互动中的一些看似奇怪的细节。