Come posso impostare il valore predefinito per un HTML <select> Elemento?

Come posso impostare il valore predefinito per un HTML <select> Elemento?

Nello sviluppo web, pur realizzando una forma, abbiamo bisogno di componenti diversi, come campi di input, pulsanti, pulsanti di radio, liste di controllo e molti altri. Il menu a discesa è uno di questi componenti che viene aggiunto in un modulo per selezionare un'opzione da un elenco di menu. Questo può essere realizzato in una pagina Web utilizzando un elemento HTML costituito da diverse opzioni specificate all'interno dell'elemento HTML.

Questo studio dimostrerà il metodo per impostare un valore predefinito per un elemento HTML.

Come specificare il valore predefinito per l'elemento HTML?

A volte, il "selezionato"L'attributo deve essere aggiunto per l'impostazione di un'opzione predefinita. All'interno dell'elenco a discesa, l'opzione con l'attributo selezionato verrà mostrata per impostazione predefinita.

La sintassi seguente visualizza come rendere un'opzione un valore predefinito:

Dai un'occhiata all'esempio seguente per la dimostrazione!

Esempio: impostazione del valore predefinito per l'elemento HTML

In HTML, prima, aggiungi un elemento div con il nome della classe "contenuto". All'interno di questo elemento:

  • Aggiungi un elemento di intestazione

    .

  • Quindi, aggiungi il

    elemento con un certo contenuto. IL elemento all'interno del

    L'elemento viene utilizzato per rendere il testo audace.

  • Includere l'HTML “"Elemento con il nome e l'ID degli attributi.
  • Come abbiamo discusso in precedenza, l'elemento selezionato contiene le opzioni disponibili nel menu a discesa. Queste opzioni sono specificate con HTML ""Elemento.

Quindi, guarda lo snippet di codice di seguito offerto in cui la seconda opzione è specificata con l'attributo "selezionato"Per definirlo come valore predefinito:


Linuxhint


Scegli i tuoi post:



In questo caso, "Autore tecnico"Verrà selezionato e visualizzato come opzione predefinita:

Andiamo alla sezione CSS, dove useremo diverse proprietà di stile CSS per modellare gli elementi HTML.

Stile "contenuto" di stile

.contenuto
larghezza: 370px;
Altezza: 280px;
Bordo: 1px Solid #874C62;
Margine: auto;
Background-color: RGB (34, 32, 32);
imbottitura: 18px;
raggio di confine: 6px;

IL ".contenuto"Viene utilizzato per accedere all'elemento Div HTML con il contenuto di classe. La spiegazione delle proprietà CSS sopra menzionate è elencata di seguito:

  • "larghezza"La proprietà regola la larghezza dell'elemento.
  • "altezza"La proprietà determina l'altezza dell'elemento.
  • "confine"La proprietà specifica il bordo attorno all'elemento. Il valore specifica la larghezza del bordo, lo stile del bordo e il colore del bordo.
  • "margine"La proprietà specifica la quantità di spazio attorno all'elemento.
  • "colore di sfondo"Specifica il colore di sfondo dell'elemento.
  • "imbottitura"Viene utilizzato per aumentare lo spazio attorno al contenuto dell'elemento.
  • "raggio di confine"È la proprietà che rende gli angoli dell'elemento.

Elemento "P" di stile

.contenuto p
Font-size: 20px;
Colore: #FFF;

IL

L'elemento del contenuto Div è disegnato con le seguenti proprietà:

  • "dimensione del font"Imposta la dimensione del carattere dell'elemento.
  • "colore"La proprietà regola il colore del carattere dell'elemento.

Elemento "Seleziona" di stile

Selezionare
imbottitura: 5px;
raggio di confine: 5px;
contorno: nessuno;
Font-size: 18px;

L'elemento Select viene applicato con le seguenti proprietà:

  • "contorno"La proprietà specifica un bordo o un contorno attorno all'elemento, principalmente quando viene selezionata.
  • IL "imbottitura","raggio di confine", E "dimensione del font"Le proprietà svolgono funzioni come indicato sopra.

Elemento "H1" di stile

.Contenuto H1
Testo-align: centro;
Font-size: 45px;
Colore: #E485B9;

IL

L'elemento è decorato con le seguenti proprietà:

  • "allineamento"La proprietà regola l'allineamento del testo dell'elemento.
  • "dimensione del font" E "colore"Proprietà ha disegnato l'elemento in un certo senso come indicato sopra.

Il GIF seguente mostra il risultato finale del codice:

Ecco come è possibile impostare il valore predefinito per un elemento HTML.

Conclusione

L'elemento HTML comprende diversi menu che sono selezionabili. Questi menu sono specificati all'interno dell'elemento HTML. Per impostare il valore predefinito per un elemento HTML, è necessario specificare l'attributo "selezionato"Per questa opzione. Questo studio ha descritto l'elemento HTML e il metodo per impostare il suo valore predefinito con un esempio pratico.