Casella combo HTML con opzione per digitare una voce

Per sviluppare forme HTML, di solito viene utilizzata una scatola combinata HTML. L'utente può scegliere una decisione da un elenco di opzioni utilizzando questo componente. L'uso di una casella combinata è simile all'utilizzo di un tag selezionato. Inoltre, chiede agli utenti di scegliere una voce di menu da un elenco in base alla loro scelta.

Questo post dimostrerà il metodo per creare e modellare una casella combinata con un attributo di opzione per digitare una voce.

Come creare una casella combinata con attributo opzione per digitare una voce?

La funzionalità di una casella combinata è essenzialmente fornita raggruppando un campo di input HTML per testo e un campo HTML Select. Più specificamente, gli utenti possono inserire il testo nel controllo di input utilizzando il controllo seleziona o direttamente nel campo di testo.

Per creare una casella combinata con un attributo opzione per digitare una voce, prova le istruzioni dichiarate.

Passaggio 1: creare contenitore div

Innanzitutto, crea un contenitore di div e inserisci un "classe"Attributo. Inoltre, specifica un nome per la classe secondo la tua scelta.

Passaggio 2: aggiungi il tag ""

Successivamente, utilizza il “"Tag e specifica il nome dell'elenco a discesa.

Passaggio 3: inserire il tag ""

Dopodiché, inserisci il ""Tag tra il tag. Quindi, aggiungi il "valore"Attributo all'interno del tag e assegnare un valore. Aggiungi testo per l'opzione tra il tag.

Passaggio 4: creare casella per digitare una voce

Ora, utilizza il "Tag e imposta il "tipo"Attributo come"testo". Inoltre, aggiungi un attributo Nome e assegna un valore a questo attributo:

Seleziona il tuo genere

Maschio
Femmina
Altro

Di conseguenza, la casella combinata viene creata con l'opzione per digitare una voce:

Passaggio 5: accedere alla classe del contenitore div

Accedi alla classe del contenitore Div utilizzando il selettore con il nome della classe ".casella combinata".

Passaggio 6: applicare le proprietà CSS

Dopo aver acceduto alla classe, applicare le proprietà sotto l'elenco:

.casella combinata
Bordo: 2 px blu solido;
Altezza: 70px;
larghezza: 170px;
Margine: 50px;
imbottitura: 30px;
Background-color: bisque;

Qui:

• "confine"La proprietà viene utilizzata per impostare un limite attorno all'elemento.
• Impostare il "altezza"Del bordo per specificare l'altezza a un valore specifico.
• "larghezza"La proprietà viene utilizzata per specificare la larghezza dell'elemento.
• "margine"Assegna il lato esterno dello spazio dell'area specificata.
• "imbottitura"Viene utilizzato per impostare lo spazio all'interno del confine definito.
• "colore di sfondo"La proprietà imposta un colore sul retro o sullo sfondo dell'elemento.

Produzione

Si può osservare che è stata creata e disegnata una casella combinata con l'opzione per digitare una voce.

Conclusione

Per creare/creare una casella combinata con l'opzione per digitare una voce, prima, crea un contenitore di diving utilizzando ""Elemento e anche aggiungere un attributo" classe "con un nome particolare. Successivamente, inserisci il “"Tag per la creazione di un elenco a discesa e aggiungi il""Elemento per varie opzioni. Dopodiché, utilizza il "Tag con il "tipo"Attributo come"testo"Per la creazione di una casella di testo. Questo post ha dimostrato il metodo per la creazione della casella combinata con l'opzione per digitare una voce.