date、number、color、range等是HTML5新增的input组件，必须结合JavaScript发挥作用。  IE不支持
<input type="date" name="selectdate" />    外观是个日期域： 年/月/日

<input type="number" name="setnumber" value="5" min="3" max="20" />
<input type="color" name="selectcolor" value="#ff00ff" />
<input type="range" name="selectrange" value="5"  min="3" max="20" />   与Number一样，都是让用户选择数字，只是range界面是水平的滚动条。
<input type="search" name="searchword" />

列表组件

<select size="1" name="sport">
    <option>游泳</option>
    <option>跑步</option>
    <option>骑车</option>
    <option>打篮球</option>
</select>

select产生空的列表，option设置列表中的选项
multiple属性，表示此域中的选项可以多选，只要按ctrl 或shift就可以一次选择多个
且size=1，下拉列表就会变成滚动条列表

datalist（HTML5新功能，IE不支持）
<datalist></datalist>与 <option>标记组成，必须与<input>的list属性一起使用
例子：
    <input list="browsers" />   ------input组件

     <datalist id="browsers">   ----必须制定id名称

          <option value="IE"></option>
          <option value="Firefox"> </option>
          <option value="Chrome"></option>
</datalist>
input list属性与datalist的id名相同，即可