Come disabilitare i campi di forma usando CSS

Un modulo HTML è un componente di un documento HTML frequentemente utilizzato per ottenere l'input dell'utente. I moduli HTML sono costituiti da componenti, come campi di input, campi di accesso, liste di controllo, pulsanti di radio, un pulsante di invio, menu e molti altri. Tuttavia, in alcuni scenari, gli utenti vogliono disabilitare o nascondere il campo di input per soddisfare il prerequisito, come controllare una casella. In CSS, gli eventi possono essere disabilitati utilizzando il "Disabilitato" E "Eventi di puntatore" proprietà.

Questo articolo spiegherà i metodi per disabilitare il campo di forma usando CSS.

Come disabilitare i campi di forma usando CSS?

Per disabilitare qualsiasi campo di modulo in HTML, gli utenti possono utilizzare la proprietà CSS o "Disabilitato"Attributo. A tale scopo, abbiamo elencato i metodi per disabilitare i campi del modulo:

• Metodo 1: come disabilitare i campi di forma usando CSS “puntatore-evento" Proprietà?
• Metodo 2: come disabilitare il campo del modulo usando "Disabilitato"Attributo?

Metodo 1: come disabilitare i campi di forma usando la proprietà "puntatore-evento" CSS?

Per disabilitare il campo del modulo utilizzando la proprietà CSS, creare un modulo utilizzando le istruzioni fornite.

• Innanzitutto, aggiungi un ""Elemento per creare un modulo.
• Successivamente, usa il “"Elemento per incorporare l'etichetta nella forma e il""L'elemento verrà utilizzato per specificare i campi di forma.
• IL "per"Attributo allegato l'etichetta con il campo di input attraverso"id".
• Il tipo di input come "testo"Viene utilizzato per impostare il campo di testo nel modulo.
• Il tipo di input "invia"Viene utilizzato per aggiungere un pulsante al modulo.

Ad esempio, abbiamo creato tre diversi campi di testo e tre pulsanti:

Inserisci il tuo nome di battesimo




Inserire il cognome




Inserisci la tua età

Disabilita il campo di forma tramite CSS
Ora, disabilita il campo del modulo usando la proprietà CSS. Ad esempio, disabiliteremo il campo del modulo il cui tipo di input è "numero". A tale scopo, accedi al campo del modulo attraverso "input [type = numero]"E imposta il valore del CSS"Eventi di puntatore"Proprietà come"nessuno" come segue:

input [type = numero]
Event puntatore: nessuno;

Dall'output seguente, puoi vedere che il "Inserisci la tua età"Il campo è completamente disabilitato:

Andiamo avanti verso la sezione successiva per disabilitare il campo del modulo attraverso l'attributo HTML "Disabilitato".

Metodo 2: come disabilitare il campo del modulo usando l'attributo "disabilitato"?

Per disabilitare il campo del modulo usando "Disabilitato"Attributo, attraversare l'istruzione data:

• Aggiungi l'elemento con "contenuto"Nome classe per creare un modulo:
• Regola il campo del modulo secondo l'istruzione discussa nella prima sezione:
• Applicare il "Disabilitato"Attributo al campo del modulo che si desidera disabilitare. Ad esempio, disabiliteremo il "Prossimo"Pulsante:

Inserisci il tuo nome di battesimo




Inserire il cognome




Inserisci la tua età

Produzione

Applicare CSS a .Classe di contenuti
".contenuto"La classe viene utilizzata per accedere al modulo. Nel ".Classe di contenuto ", imposta la proprietà"imbottitura"Per aggiungere spazio intorno ai campi di forma:

.contenuto
imbottitura: 10px;

Elemento di input di stile in cui “type = invia”

input [type = innd]
larghezza: 100px;
imbottitura: 5px;
Background-color: RGB (200, 158, 224);
raggio di confine: 5px;

Il codice sopra accetta l'elemento di input in cui il tipo è uguale a invio. Applicare lo stile su campi selezionati utilizzando le proprietà di seguito:

• "larghezza"Viene utilizzato per impostare la larghezza dei campi selezionati.
• "imbottitura"Viene utilizzato per impostare spazio attorno agli elementi selezionati.
• IL "colore di sfondo"La proprietà viene utilizzata per impostare lo sfondo.
• "raggio di confine"La proprietà imposta i bordi di elementi selezionati.

Elemento "disabilitato" di stile

Input: disabilitato
Box-Shadow: 1px 1px 1px 1px RGB (230, 229, 229);
Bordo: 1px Solid #999999;
Background-color: #DDD1D1;
Colore: #666666;

Modella l'elemento su cui il "Disabilitato"L'attributo viene applicato utilizzando le proprietà multiple:

• "Box-Shadow"Imposta un'ombra attorno all'elemento.
• "confine"La proprietà viene utilizzata per impostare il bordo attorno all'elemento disabilitato.

Produzione

Abbiamo fornito i metodi per disabilitare il campo del modulo usando CSS.

Conclusione

Per disabilitare i campi di forma utilizzando CSS, gli utenti possono utilizzare la proprietà CSS "Eventi di puntatore"O l'attributo HTML"Disabilitato". Per disabilitare il campo del modulo, creare un modulo, quindi impostare la proprietà CSS "Event puntatore" come "nessuno"Su un tipo di input specifico per disabilitarlo. Tuttavia, gli utenti possono utilizzare direttamente l'attributo "disabilitato" su un campo di modulo specifico per disabilitarlo. Questo post ha spiegato il metodo per disabilitare il campo del modulo usando CSS.