Caixa de combinação html com opção para digitar uma entrada

Para desenvolver formulários HTML, uma caixa de combinação HTML geralmente é utilizada. O usuário pode escolher uma decisão de uma lista de opções utilizando este componente. Usar uma caixa de combinação é semelhante ao uso de uma tag de seleção. Além disso, ele pede aos usuários que escolham um item de menu de uma lista de acordo com a escolha deles.

Esta postagem demonstrará o método para criar e estilizar uma caixa combinada com um atributo de opção para digitar uma entrada.

Como criar uma caixa de combinação com atributo de opção para digitar uma entrada?

A funcionalidade de uma caixa combinada é essencialmente fornecida agrupando um campo de entrada HTML para texto e um campo de seleção HTML. Mais especificamente, os usuários podem inserir o texto no controle de entrada usando o controle de seleção ou reto no campo de texto.

Para criar uma caixa combinada com um atributo de opção para digitar uma entrada, experimente as instruções declaradas.

Etapa 1: Crie Div Container

Primeiro, crie um recipiente de div e insira um “aula”Atributo. Além disso, especifique um nome para a classe de acordo com sua escolha.

Etapa 2: Adicionar “” tag

Em seguida, utilize o “”Tag, e especifique o nome da lista suspensa.

Etapa 3: Insira “” tag

Depois disso, insira o “”Tag entre a tag. Então, adicione o “valor”Atributo dentro da tag e atribua um valor. Adicione texto para a opção entre a tag.

Etapa 4: Crie uma caixa para digite uma entrada

Agora, utilize o “”Tag e defina o“tipoAtributo como “texto”. Além disso, adicione um atributo de nome e atribua um valor a este atributo:

Selecione o seu sexo

Macho
Fêmea
Outro

Como resultado, a caixa de combinação é criada com a opção de digitar uma entrada:

Etapa 5: Access Div Container Class

Acesse a classe Div Container, utilizando o seletor com o nome da classe “.caixa combo”.

Etapa 6: aplique propriedades CSS

Depois de acessar a aula, aplique as propriedades abaixo da listada:

.caixa combo
borda: 2px azul sólido;
Altura: 70px;
Largura: 170px;
margem: 50px;
preenchimento: 30px;
Background-Color: Bisque;

Aqui:

• ““fronteira”A propriedade é usada para definir um limite ao redor do elemento.
• Colocou o "altura”Da fronteira para especificar a altura para um valor específico.
• ““largura”A propriedade é utilizada para especificar a largura do elemento.
• ““margem”Aloca o lado externo do espaço da área especificada.
• ““preenchimento”É usado para definir o espaço dentro do limite definido.
• ““cor de fundo”Propriedade define uma cor na parte traseira ou fundo do elemento.

Saída

Pode -se observar que uma caixa combinada com a opção de digitar uma entrada foi criada e estilizada.

Conclusão

Para criar/fazer uma caixa combinada com a opção de digitar uma entrada, primeiro, fazer um contêiner div usando o “”Elemento e também adicione um atributo de“ classe ”com um nome específico. Em seguida, insira o “”Tag para criar uma lista suspensa e adicionar o“”Elemento para várias opções. Depois disso, utilize o “”Tag com a“tipoAtributo como “texto”Para criar uma caixa de texto. Este post demonstrou o método para criar a caixa de combinação com a opção de digitar uma entrada.