CSS disabilitato

CSS disabilitato

Un foglio di stile a cascata è una parte importante della creazione e della progettazione di una pagina web. "Disabled" è un selettore in CSS e viene utilizzato nei tag per disabilitare gli elementi di HTML. Questo selettore viene applicato ai moduli HTML inclusi campi di testo, pulsanti, caselle di controllo, ecc. In questo articolo, vedremo come viene applicata la funzione disabile ai diversi elementi in HTML.

Campo di testo disabilitato

Un campo di testo è una sezione in cui l'utente inserisce il suo input che deve essere archiviato nel sito Web. Questo campo di testo è sviluppato come un campo di testo abilitato per ottenere il valore dall'utente. Ma in alcuni casi, per limitare l'input dell'utente in merito a qualsiasi etichetta o informazione dell'utente, potremmo dover disabilitare alcuni campi di testo. In questo esempio, vedremo come il campo di testo può essere disabilitato tramite HTML e CSS.

Iniziamo il codice con la sezione testa. Il titolo è dato alla pagina web su cui stiamo lavorando. Successivamente, utilizziamo il tag di stile per aggiungere tutte le proprietà di styling al contenuto che creiamo nel corpo HTML. Oltre al semplice campo di testo disabilitato, utilizziamo anche alcuni elementi aggiuntivi per elaborare facilmente il funzionamento e la funzionalità degli elementi disabili e abilitati.

Nel tag di stile, abbiamo prima il campo di testo di input abilitato. Creiamo tre campi di testo nella parte HTML-due sono abilitati mentre il terzo è disabilitato. Il tipo di input per il campo è "testo". Significa che accetterà solo un testo. Quindi, utilizziamo i tag CSS per i campi di testo abilitati.

1
Input [type = text]: abilitato

Questo modellerà solo quei campi di testo che sono impostati per essere abilitati. Applichiamo il grigio chiaro come colore di sfondo su entrambi i campi. Allo stesso modo, dopo il campo di testo abilitato, il CSS viene dichiarato per il campo di testo disabilitato. Per discriminare il campo di testo disabilitato da quello abilitato, il colore di sfondo è grigio scuro e il colore del carattere è impostato su bianco.

Per applicare alcuni effetti su tutti i campi, abilitati o disabilitati, utilizziamo solo la parola "input". In questo modo, gli stili vengono applicati a tutti e tre i campi di testo. Il primo effetto è il margine-top. Questa funzione di "margine" è l'area superata della forma. Ad esempio, il campo di testo rettangolare ha il margine di 10 pixel dalla direzione in alto. Significa che nella direzione in alto, il campo è di 10 pixel verso l'alto.

1
2
3
Input
margine-top: 10px;

Allo stesso modo, dopo il margine, il bordo della forma viene applicato anche con le dimensioni del bordo e il colore che è impostata come marrone. Per la dimensione del testo immessa nel campo di testo, per rendere il testo facilmente leggibile, impostiamo la dimensione del carattere su 16 pixel.

1
2
3
4
5
bordo: 1px marrone solido;
Font-size: 16px;

Un'altra caratteristica utilizzata in CSS è l'intero contenuto che viene creato nel corpo HTML per apparire al centro della pagina web. Usiamo semplicemente il tag per il corpo. Questo perché il contenuto viene creato nella sezione del corpo dei tag HTML. Poiché tutto il contenuto è nel tipo di testo, utilizziamo semplicemente l'allineamento del testo al centro.

1
2
3
4
5
Corpo
Testo-align: centro;

Lungo il campo di testo, c'è un'intestazione o un'etichetta che viene data per dimostrare lo scopo del campo di testo o che i dati devono essere inseriti nel campo di testo. Questa etichetta è anche disegnata tramite CSS. Il peso di un carattere è la proprietà applicata al testo per renderlo audace, corsivo, ecc. Qui, abbiamo selezionato il peso come in grassetto.

1
Font-weight: audace;

Ora, dirigendosi verso la sezione del corpo di HTML, l'intestazione viene data usando il

etichetta. Poiché i campi di testo e i pulsanti sono la parte di un modulo, il tag viene applicato qui. Dichiariamo un singolo tag per il campo di testo abilitato.

1
2
3


L'etichetta è data come "età". Il campo di testo viene dichiarato attraverso il tipo di input. Il valore è la sezione che contiene il nome o il segnaposto per trasportare qualsiasi parola visualizzata nel campo di testo. IL
Il tag è per la rottura, che passa alla riga successiva. Ora, il campo di testo disabilitato viene dichiarato utilizzando l'etichetta "indirizzo". Dopo aver fornito il testo di input, dichiariamo "disabilitato" per rendere disabilitato il campo di testo.

1

Dopodiché, il corpo della forma è chiuso. Anche i tag HTML sono chiusi.

Quando eseguiamo il file sul browser, vedrai che l'output assomiglia all'immagine allegata. Vengono visualizzate tutte e tre le etichette insieme ai campi di testo. Due di loro sono abilitati, mentre il terzo è disabilitato. Tutto lo stile CSS che abbiamo fatto è applicato al contenuto. Il campo disabilitato è buio da discriminare tra quello abilitato e disabilitato.

Ora vedremo come funziona questa forma. Possiamo inserire i valori nei primi due campi in quanto sono abilitati. Il nome e l'età sono inseriti nei campi.

Ora vediamo il campo di testo disabilitato. Vedrai che non può essere modificato come nei campi precedenti.

Area di testo disabilitato

Useremo un'area di testo per renderla disabilitata come nel campo. Tutti i codici per la testa e il corpo dell'HTML sono applicati allo stesso modo. Un nuovo pulsante di funzionalità è disegnato nel corpo. Ciò include il colore, l'altezza e la larghezza del pulsante.

All'interno della sezione del corpo dell'HTML, viene creata un'area di testo. Definiamo le righe e le colonne per formare un rettangolo specificato per lo scopo di scrittura. La parola "disabilitato" viene aggiunta al tag per disabilitare il funzionamento dell'area di testo.

1

Oltre a ciò, aggiungiamo un pulsante alla pagina web; non sarà disabilitato. Successivamente, un modulo viene chiuso seguendo il tag.

Quando la pagina Web viene eseguita sul browser, viene creata un'area di testo con l'istruzione predefinita fornita quando abbiamo usato il tag dell'area di testo all'interno del corpo HTML. Questo non può essere modificato o rimosso a causa del lavoro disabile.

Conclusione

Disabilitato è una funzione che viene utilizzata per disabilitare alcuni funzionamenti del contenuto di HTML. Parlando del suo esempio, è applicato al modulo. Abbiamo visto principalmente che, pur compilando qualsiasi modulo sul sito Web, alcuni campi non possono essere modificati in base alle esigenze della nostra idoneità. Questo viene fatto rendendo quel campo disabilitato. Abbiamo spiegato i due elementi che possono essere disabilitati nei tag HTML e CSS che sono i campi di testo e l'area di testo. Entrambi gli elementi fanno parte del tag del modulo, quindi la creazione del campo di testo e l'area di testo sono eseguite all'interno del tag del modulo. Altrimenti, solo il testo apparirà sulla pagina web.