web o etichette di forma sono un elemento essenziale della forma. Essi identificano per l'utente che cosa dovrebbe essere immesso o controllati al fine di completare la forma. È possibile effettuare la forma più attraenti utilizzando i CSS per lo stile degli elementi del modulo, tra cui l'elemento etichetta. Ecco i passi per lo styling un'etichetta modulo.

istruzione

1

Ecco una forma semplice, senza stile con solo due caselle di immissione.

2


Ecco il codice HTML per questo semplice modulo.

3 Ci sono molte regole CSS che possono essere applicate all'elemento etichetta. Diamo un'occhiata ad alcuni.

4

Questa regola CSS cambia il colore del testo:
etichetta {

color: #009;

}

5

Queste regole renderanno l'etichetta di un elemento a livello di blocco, assegnare una larghezza, e galleggiare l'elemento a sinistra. L'effetto di questo è di allineare le caselle di input ordinatamente sulla destra.
etichetta {

color: #009;
width: 100px;
display: block;
float: left;

}

6

Con l'aggiunta di una regola per align del testo, possiamo fare le etichette appaiono in stretta vicinanza alla casella di input, ma in linea sulla destra.
etichetta {

color: #009;
width: 100px;
display: block;
float: left;
text align: right;

}

7

L'etichetta è troppo vicino alla casella di input, in modo che possiamo aggiungere una regola per dare imbottitura sul lato destro dell'etichetta.
etichetta {

color: #009;
width: 100px;
display: block;
float: left;
text align: right;
padding-right: 3px;

}

8

potrebbero essere aggiunte altre norme quali l'aggiunta di un colore di sfondo.
etichetta {

color: #009;
width: 100px;
display: block;
float: left;
text align: right;
padding-right: 3px;
background: #FFC;

}

9 Regole per le frontiere, l'interlinea, la dimensione del carattere e le altre proprietà CSS potrebbero essere aggiunti pure, a seconda l'aspetto della pagina e gli elementi in forma. Come si può vedere, qualsiasi proprietà che può essere utilizzata in CSS può essere utilizzato per lo stile l'elemento etichetta.