datalist

Oi Luis, tudo bem? 😊

Entendo sua dúvida sobre o uso do datalist e como lidar com caracteres especiais e espaços nos valores.

A questão é que o atributo value é o que define o valor que será enviado no formulário.

Se você precisa de um valor diferente para exibição e para o envio, você pode usar o atributo value para o valor "técnico" (sem espaços ou caracteres especiais) e o conteúdo da tag <option> para a exibição.

Por exemplo:

<label for="estilo">Estilo Musical:</label>
<input type="text" id="estilo" name="estilo" list="estilosMusicais">
<datalist id="estilosMusicais">
  <option value="eletronica">Eletrônica</option>
  <option value="hard_rock">Hard Rock</option>
  <option value="sertanejo">Sertanejo</option>
</datalist>

Nesse caso, o usuário verá "Eletrônica", "Hard Rock" e "Sertanejo", mas o valor enviado será "eletronica", "hard_rock" e "sertanejo".

Sobre a tag <option> com fechamento, ela funciona da mesma forma, o que importa é o atributo value.

A boa prática de não usar espaços, acentos e caracteres especiais no value é para evitar problemas com a URL e com o processamento dos dados no servidor. 📖

Espero ter ajudado! 💪

🎓 Para saber mais:

• HTML <datalist> Tag.
• HTML <option> Tag.
• Como usar HTML datalist.

Sua solução não funciona! eu também testei ela. No caso, ficam os dois valores aparecendo... tanto o "valor técnico", quanto do de exibição.