{"id":15548,"date":"2024-02-10T09:52:36","date_gmt":"2024-02-10T12:52:36","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15548"},"modified":"2024-02-10T10:12:06","modified_gmt":"2024-02-10T13:12:06","slug":"html-criar-campo-com-lista-em-formulario","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15548","title":{"rendered":"HTML: Criar Campo com Lista em Formul\u00e1rio"},"content":{"rendered":"\n

Se voc\u00ea trabalha com desenvolvimento web, ir\u00e1 chegar diversos momentos em que ser\u00e1 necess\u00e1rio criar campo (input) com lista em um formul\u00e1rio HTML e isso \u00e9 t\u00e3o importante que decidir registrar como fa\u00e7o nesse blog.<\/p>\n\n\n\n

Com campos com listas, ou inputs do tipo lista, permitem que usu\u00e1rios selecionem uma op\u00e7\u00e3o dentre v\u00e1rias poss\u00edveis. Isso facilita muito a coleta de informa\u00e7\u00f5es e ajuda a garantir que os dados fornecidos sejam consistentes. Sim, consistentes porque, a depender do tipo (input), o usu\u00e1rio ser\u00e1 for\u00e7ado a usar apenas os itens da lista, n\u00e3o ter\u00e3o a op\u00e7\u00e3o de digitar qualquer coisa. S\u00e3o op\u00e7\u00f5es pr\u00e9-definidas, como sele\u00e7\u00e3o de categorias, pa\u00edses, estados, entre outros. <\/p>\n\n\n

\n
\"HTML:
HTML: Criar Campo com Lista em Formul\u00e1rio<\/figcaption><\/figure><\/div>\n\n\n

Dica:<\/strong> clique aqui e veja outros posts relacionados a esse.<\/a><\/p>\n\n\n\n

Criando uma lista com select<\/h2>\n\n\n\n

No exemplo a seguir mostro uma lista usando o elemento select <\/strong>do HTML:<\/p>\n\n\n\n

<<\/font>label<\/font> <\/font>for<\/font>=<\/font>"lang"<\/font>><\/font>Linguagens de programa\u00e7\u00e3o<\/<\/font>label<\/font>><\/font>\n      <<\/font>select<\/font> <\/font>name<\/font>=<\/font>"languages"<\/font> <\/font>id<\/font>=<\/font>"lang"<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"javascript"<\/font>><\/font>JavaScript<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"php"<\/font>><\/font>PHP<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"java"<\/font>><\/font>Java<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"golang"<\/font>><\/font>Golang<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"python"<\/font>><\/font>Python<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"c#"<\/font>><\/font>C#<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"C++"<\/font>><\/font>C++<\/<\/font>option<\/font>><\/font>\n        <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"erlang"<\/font>><\/font>Erlang<\/<\/font>option<\/font>><\/font>\n      <\/<\/font>select<\/font>><\/font>\n\n<\/pre>\n\n\n\n
Nesse exemplo, o usu\u00e1rio n\u00e3o tem liberdade de digitar, ele \u00e9 for\u00e7ado a escolher um item existente.<\/p>\n\n\n\n
E se quiser usar um placeholder? Um valor de exibi\u00e7\u00e3o? O elemento <select><\/code> n\u00e3o possui um atributo de “placeholder” como o <input><\/code>. Mas, podemos adicionar uma op\u00e7\u00e3o adicional no in\u00edcio do seu <select><\/code> que funcione como um “placeholder”:<\/p>\n\n\n\n
<<\/font>select<\/font> <\/font>name<\/font>=<\/font>"selecao"<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>""<\/font> <\/font>disabled<\/font> <\/font>selected<\/font> <\/font>hidden<\/font>><\/font>Selecione uma op\u00e7\u00e3o<\/<\/font>option<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"opcao1"<\/font>><\/font>Op\u00e7\u00e3o 1<\/<\/font>option<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"opcao2"<\/font>><\/font>Op\u00e7\u00e3o 2<\/<\/font>option<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"opcao3"<\/font>><\/font>Op\u00e7\u00e3o 3<\/<\/font>option<\/font>><\/font>\n<\/<\/font>select<\/font>><\/font><\/pre>\n\n\n\n
Criando uma lista com input do tipo list <\/h2>\n\n\n\n
Abaixo posto um exemplo e em seguida explico sobre ele:<\/p>\n\n\n\n
<<\/font>input<\/font> <\/font>list<\/font>=<\/font>"browsers"<\/font> <\/font>name<\/font>=<\/font>"browser"<\/font> <\/font>id<\/font>=<\/font>"browser"<\/font>><\/font>\n<<\/font>datalist<\/font> <\/font>id<\/font>=<\/font>"browsers"<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"Internet Explorer"<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"Firefox"<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"Google Chrome"<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"Opera"<\/font>><\/font>\n  <<\/font>option<\/font> <\/font>value<\/font>=<\/font>"Safari"<\/font>><\/font>\n<\/<\/font>datalist<\/font>><\/font>\n<\/pre>\n\n\n\n
<\/p>\n\n\n\n
um elemento <input><\/code> com um atributo list<\/code>, que cria uma caixa de sele\u00e7\u00e3o de texto, mas permite que o usu\u00e1rio insira texto livremente ou escolha de uma lista pr\u00e9-definida. Aqui est\u00e1 a explica\u00e7\u00e3o detalhada:<\/p>\n\n\n\n
    \n
  1. <input list=\"browsers\" name=\"browser\" id=\"browser\"><\/code>:\n