Come progettare forme in CSS

Fare la tua forma esteticamente di bell'aspetto è un compito significativo se si desidera migliorare l'esperienza dell'utente. Una forma HTML è più comunemente composta da alcuni campi di input, menu e un pulsante, pertanto, è possibile applicare varie proprietà CSS per migliorare l'aspetto della forma. Ti presenteremo alcuni modi che possono essere applicati per abbellire i moduli HTML.

Iniziamo.

Imposta la larghezza dei campi di input

Sappiamo tutti che i campi di input hanno una certa larghezza per impostazione predefinita, tuttavia, possiamo alterare la larghezza in base al nostro desiderio. Per modificare la larghezza di un campo di input, seguire il codice seguente.

Html

Immettere il nome

Qui abbiamo creato un campo di input.

CSS

Input
larghezza: 80%;

Stiamo assegnando al campo di input una larghezza dell'80%.

Nota: La larghezza di un campo di input può essere specificata in Px, Em, E percentuale.

Produzione

La larghezza del campo di input è stata modificata secondo il nostro desiderio.

Aggiungi spazio all'interno dei campi di input

Per migliorare lo spazio all'interno del campo di input, utilizzare la proprietà di imbottitura CSS. Inoltre, per aggiungere spazio all'esterno del campo di input, quando ci sono più campi di input, regolare il margine del campo di input.

CSS

input [type = text]
larghezza: 80%;
imbottitura: 15px 20px;
Margine: 9px 0px;

Oltre a dare al campo di input un po 'di larghezza, gli abbiamo anche dato un po' di imbottitura e margini.

Produzione

Lo spazio è stato aggiunto all'interno e all'esterno del campo di input.

Come puoi vedere nel codice sopra, abbiamo usato type = text per modellare il campo di input. Esistono anche altri tipi sulla base dei quali è possibile modellare i campi di input come type = password (questo sarà solo campi di password) o type = numero (questo sarà solo campi di numero di stile), ecc.

Aggiunta di bordi ai campi di input

È possibile regolare le dimensioni e il colore dei campi di input usando le proprietà del bordo CSS, inoltre, per aggiungere più stile come gli angoli arrotondati, utilizzare la proprietà.

CSS

input [type = text]
larghezza: 80%;
imbottitura: 15px 20px;
Margine: 9px 0px;
Bordo: 2 px blu solido;
raggio di confine: 5px;

Nel codice sopra, stiamo assegnando un bordo di 2px ai campi di input insieme a un colore blu. Inoltre, per fare gli angoli intorno abbiamo impostato il raggio di confine su 5px.

Produzione

Il raggio di confine e bordo dei campi è stato regolato secondo il desiderio.

Un'altra cosa divertente che puoi fare è aggiungere solo il bordo inferiore, usando la proprietà del fondo del bordo come questa.

CSS

input [type = text]
larghezza: 80%;
imbottitura: 15px 20px;
Margine: 9px 0px;
confine: nessuno;
Border-Bottom: 2px Blu solido;

Qui abbiamo impostato il bordo dei campi di input su nessuno e assegnato un bordo inferiore di 2px.

Produzione

Un bordo inferiore è stato aggiunto con successo.

Tuttavia, hai notato che è apparso uno schema quando ci siamo concentrati sul campo di input. E se vogliamo rimuoverlo.

Come rimuovere il profilo del campo di input usando la messa a fuoco

Per alterare o impostare lo stile quando un campo di input è focalizzato, è possibile utilizzare ":messa a fuoco"Selettore e per rimuovere lo schema sul focus di un campo di input, è possibile utilizzare il"contorno"Proprietà e impostare il suo valore su"nessuno".

CSS

input [type = text]: focus
contorno: nessuno;

Produzione

Lo schema è stato rimosso con successo.

Aggiungi colore ai campi di input

Semplicemente usando le proprietà del colore come colore e colore di sfondo puoi aggiungere rispettivamente il testo e lo sfondo dei campi di input.

CSS

input [type = text]
larghezza: 80%;
imbottitura: 15px 20px;
Margine: 9px 0px;
Background-color: bisque;
colore blu;

Nel codice sopra, stiamo fornendo un colore bisque sullo sfondo dei campi di input e il colore blu al testo.

Produzione

Abbiamo fornito un po 'di colore sullo sfondo e il testo.

Come aggiungere uno stile al focus dei campi di input

È possibile aggiungere un po 'di colore bordo o sfondo o qualsiasi stile CSS ai campi di input al focus usando lo stato di messa a fuoco: ogni volta che l'utente fa clic sul campo, viene dato un certo stile.

CSS

input [type = text]: focus
Background-color: Skyblue;

Il colore di sfondo del campo di input cambierà in Skyblue quando l'utente fa clic su di esso.

Produzione

Lo styling personalizzato all'attenzione viene aggiunto al campo di input correttamente.

Aggiunta di un'immagine o icona nel campo di input

Per rendere i tuoi campi di input più interessanti, puoi aggiungere immagini o icone. Ecco come lo fai.

CSS

input [type = text]
Immagina di background: URL ('Email.png ');
Posizione di sfondo: 10px 6px;
Size di sfondo: 30px;
Ripeat background: no-ripetizione;
imbottitura: 12px 20px 12px 40px;

Nel codice sopra, abbiamo prima aggiunto un'icona e -mail e regolato le dimensioni e la posizione all'interno del campo di input utilizzando varie proprietà CSS.

Produzione

Un'icona e -mail è stata aggiunta nel campo di input correttamente.

Aggiungi stile ai menu

Spesso dobbiamo aggiungere menu in forme HTML, quindi è necessario lo stylingle. Questo può essere fatto utilizzando alcune proprietà CSS di base. Ecco un esempio.

Html

Calcio
Cricket
Hockey

Nel codice sopra, abbiamo creato un menu molto semplice.

CSS

Selezionare
larghezza: 80%;
imbottitura: 20px;
confine: nessuno;
raggio di confine: 5px;
Background-color: LightGray;

opzione
Font in stile: corsivo;
Font-size: 20px;

Usando alcune proprietà CSS di base come bordo, raggio di confine e colore di sfondo abbiamo disegnato il menu. Inoltre, abbiamo anche dato un po 'di stile alle opzioni.

Produzione

Il menu è stato disegnato.

Aggiunta di stile ai pulsanti

I pulsanti sono una parte cruciale di una forma e questi possono essere progettati utilizzando le proprietà CSS. Ecco un esempio.

Html

Qui abbiamo semplicemente creato un campo di input del tipo di invio.

CSS

input [type = innd]
Background-color: Pink;
Font-weight: audace;
confine: nessuno;
imbottitura: 20px 25px;
DECORAZIONE DEL TESTO: Nessuno;
Margine: 6px 4px;

Utilizzando varie proprietà CSS come sfondo, font-peso e imbottitura, abbiamo disegnato il pulsante.

Produzione

Il pulsante è stato disegnato.

Conclusione

Rendere attraente la tua forma HTML è assolutamente necessario e puoi farlo dando stile a diversi elementi che fanno parte della forma come campi di input, menu o pulsanti. Puoi usare varie proprietà CSS per modellare questi elementi come; larghezza, colore di sfondo, colore, bordo, radia di bordo e molti altri. Inoltre, è possibile aggiungere icone o immagini all'interno dei campi di input. Tutto questo e molto altro sulle forme di styling in CSS è evidenziato in questo post.