O Chrome agora é compatível com datalist para input[type=text] no Chrome 20. O datalist ajuda os desenvolvedores a fornecer valores recomendados e permite que os usuários tenham a liberdade de escrever valores arbitrários ao mesmo tempo. A partir do Chrome 23, também é possível usar datalist para input[type=range] e input[type=color].
input[type=range]
O datalist para input[type=range] introduz a capacidade dos desenvolvedores de mostrar indicadores ao lado do controle deslizante, conforme mostrado abaixo:
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
<option>10</option>
<option>15</option>
<option>30</option>
<option>50</option>
<option>90</option>
</datalist>
Quando você move o símbolo do controle deslizante na entrada, cada uma das marcações é ajustada para que os usuários possam se ajustar facilmente a esses valores.
input[type=color]
O input[type=color] já é compatível com o Chrome e o Opera. Os usuários podem escolher cores arbitrárias sem precisar de plug-ins JavaScript.
Ao adicionar datalist a input[type=color], os usuários agora podem escolher uma cor entre as amostras selecionadas pelo desenvolvedor, além de escolher uma cor arbitrária de um seletor por conta própria.
<input type="color" value="#000000" list="colors" />
<datalist id="colors">
<option>#ff0000</option>
<option>#0000ff</option>
<option>#00ff00</option>
<option>#ffff00</option>
<option>#00ffff</option>
</datalist>
Observe que datalist para input[type=color] aceita apenas valores de cor hexadecimais (por exemplo, #ff0000) e valores como #f00 ou red não vão funcionar.
Para conferir esses novos recursos em ação, acesse uma página de demonstração.