通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表。
| <datalist id="contactList"> <option value="a@qq.com"></option> <option value="b@qq.com"></option> </datalist> <input type="email" id="contatcs" list="contactList"> |
min和max
通过设置min和max特性，可以将range输入框的数值输入范围限定在最低值和最高值之间。可以只设置一个，也可以两个都设置，也可以都不设置。
step
对于输入型控件，设置其step特性能够指定输入值递增或者递减的粒度。
required
一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。
拖放API
draggable属性
如果网页元素的draggable元素为true，这个元素就是可以拖动的。
| <div draggable="true">Draggable Div</div> |
拖放事件
拖动过程会触发很多事件，主要有下面这些：
-
dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。
| draggableElement.addEventListener('dragstart', function(e) { console.log('拖动开始！'); }); |
dataTransfer对象
拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。
| draggableElement.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Hello World!'); }); |
dataTransfer对象的属性有：
-
dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。
dataTransfer对象的方法有：
-
setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
