Caja combinada HTML con la opción de escribir una entrada

Para desarrollar formularios HTML, generalmente se utiliza un cuadro combinado HTML. El usuario puede elegir una decisión de una lista de opciones utilizando este componente. Usar un cuadro combinado es similar a usar una etiqueta Seleccionar. Además, les pide a los usuarios que elijan un elemento de menú de una lista de acuerdo con su elección.

Esta publicación demostrará el método para crear y diseñar un cuadro combinado con un atributo de opción para escribir una entrada.

Cómo crear un cuadro combinado con el atributo de opción para escribir una entrada?

La funcionalidad de un cuadro combinado se proporciona esencialmente al agrupar un campo de entrada HTML para texto y un campo de selección HTML. Más específicamente, los usuarios pueden ingresar texto en el control de entrada utilizando el control Seleccionar o directamente en el campo de texto.

Para crear un cuadro combinado con un atributo de opción para escribir una entrada, pruebe las instrucciones establecidas.

Paso 1: Crear contenedor Div

Primero, cree un contenedor DIV e inserte un "clase" atributo. Además, especifique un nombre para la clase de acuerdo con su elección.

Paso 2: Agregar "" Etiqueta

A continuación, utilice el ""Etiqueta, y especifique el nombre de la lista desplegable.

Paso 3: insertar la etiqueta ""

Después de eso, inserte el ""Etiqueta entre la etiqueta. Luego, agregue el "valorAtributo dentro de la etiqueta y asignar un valor. Agregar texto para la opción entre la etiqueta.

Paso 4: Crear cuadro para escribir una entrada

Ahora, utiliza el ""Etiqueta y configure el"tipo"Atributo como"texto". Además, agregue un atributo de nombre y asigne un valor a este atributo:

Selecciona tu género

Masculino
Femenino
Otro

Como resultado, el cuadro combinado se crea con la opción de escribir una entrada:

Paso 5: Acceso a la clase de contenedores Div

Acceda a la clase de contenedor Div utilizando el selector con el nombre de la clase ".caja combo".

Paso 6: Aplicar propiedades CSS

Después de acceder a la clase, aplique las propiedades de la lista a continuación:

.caja combo
borde: 2px azul sólido;
Altura: 70px;
Ancho: 170px;
margen: 50px;
relleno: 30px;
Color de fondo: Bisque;

Aquí:

• "bordeLa propiedad se utiliza para establecer un límite alrededor del elemento.
• Selecciona el "altura"Del borde para especificar la altura a un valor específico.
• "anchoSe utiliza la propiedad para especificar el ancho del elemento.
• "margen"Asigna el lado exterior espacial del área especificada.
• "relleno"Se usa para configurar el espacio dentro del límite definido.
• "color de fondoLa propiedad establece un color en la parte posterior o el fondo del elemento.

Producción

Se puede observar que se ha creado y diseñado un cuadro combinado con la opción de escribir una entrada.

Conclusión

Para crear/hacer un cuadro combinado con la opción de escribir una entrada, primero, haga un contenedor Div utilizando el ""Elemento y también agregue un atributo de" clase "con un nombre en particular. A continuación, inserte el ""Etiqueta para crear una lista desplegable y agregue el""Elemento para varias opciones. Después de eso, utilice el ""Etiqueta con el"tipo"Atributo como"texto"Para crear un cuadro de texto. Esta publicación demostró el método para crear el cuadro combinado con la opción de escribir una entrada.