Boîte combo HTML avec option pour taper une entrée

Pour développer des formulaires HTML, une boîte combo HTML est généralement utilisée. L'utilisateur peut choisir une décision dans une liste d'options en utilisant ce composant. L'utilisation d'une boîte combo est similaire à l'utilisation d'une balise de sélection. De plus, il demande aux utilisateurs de choisir un élément de menu à partir d'une liste en fonction de leur choix.

Ce message montrera la méthode pour créer et styliser une boîte combo avec un attribut d'option pour taper une entrée.

Comment créer une boîte combo avec un attribut d'option pour taper une entrée?

La fonctionnalité d'une boîte combo est essentiellement fournie en regroupant un champ de saisie HTML pour le texte et un champ de sélection HTML. Plus précisément, les utilisateurs peuvent entrer du texte dans le contrôle d'entrée à l'aide du contrôle de sélection ou directement dans le champ de texte.

Pour créer une boîte combo avec un attribut d'option pour taper une entrée, essayez les instructions déclarées.

Étape 1: Créer un conteneur div

Tout d'abord, créez un conteneur div et insérez un «classe" attribut. Spécifiez également un nom pour la classe en fonction de votre choix.

Étape 2: Ajouter la balise «»

Ensuite, utilisez le «”Tag, et spécifiez le nom de la liste déroulante.

Étape 3: Insérez la balise «»

Après cela, insérez le «”Tag entre la balise. Ensuite, ajoutez le "valeur”Attribut à l'intérieur de la balise et attribuez une valeur. Ajouter du texte pour l'option entre la balise.

Étape 4: Créez une boîte pour taper une entrée

Maintenant, utilisez le «”Tag et définissez le"taper«Attribut comme«texte". Ajoutez également un attribut de nom et attribuez une valeur à cet attribut:

Sélectionnez votre sexe

Homme
Femme
Autre

En conséquence, la boîte combo est créée avec la possibilité de saisir une entrée:

Étape 5: Accès à la classe de conteneurs Div

Accédez à la classe DIV Container en utilisant le sélecteur avec le nom de classe «.boîte combo".

Étape 6: Appliquer les propriétés CSS

Après avoir accédé à la classe, appliquez les propriétés ci-dessous:

.boîte combo
Border: 2px bleu massif;
hauteur: 70px;
Largeur: 170px;
marge: 50px;
rembourrage: 30px;
Color d'arrière-plan: bisque;

Ici:

• "frontière»La propriété est utilisée pour fixer une frontière autour de l'élément.
• Met le "hauteur”De la bordure pour spécifier la hauteur à une valeur spécifique.
• "largeur”La propriété est utilisée pour spécifier la largeur de l'élément.
• "marge"Attribution du côté extérieur de l'espace de la zone spécifiée.
• "rembourrage”Est ​​utilisé pour régler l'espace à l'intérieur de la limite définie.
• "Couleur de l'arrière plan»La propriété définit une couleur à l'arrière ou à l'arrière-plan de l'élément.

Sortir

On peut observer qu'une boîte combo avec la possibilité de taper une entrée a été créée et stylée.

Conclusion

Pour créer / créer une boîte combo avec l'option pour taper une entrée, tout d'abord, faites un conteneur div en utilisant le ««Élément et ajoutez également un attribut« classe »avec un nom particulier. Ensuite, insérez le «”Tag pour créer une liste déroulante et ajouter le"”Élément pour diverses options. Après cela, utilisez le «"Tag avec le"taper«Attribut comme«texte»Pour créer une zone de texte. Ce message a démontré la méthode de création de la boîte combinée avec l'option pour taper une entrée.