Codice di Cascading Style Sheets (CSS) viene spesso utilizzato per formattare il testo e blocchi di contenuti sulle pagine Web, ma molti altri elementi HTML possono essere affrontate da nonché il codice CSS. Elementi dell'interfaccia utilizzati per richiedere informazioni da un utente in un modulo di contatto, ad esempio campi di testo, pulsanti, caselle di controllo e menu a tendina, possono tutti essere stilizzati con i CSS pure. Utilizzare le classi CSS per formattare diversi elementi del modulo HTML.
Istruzioni
1
Modificare le dimensioni degli elementi dell'interfaccia modulo di contatto con le proprietà "larghezza" e "altezza". Ad esempio, aggiungere il seguente codice tra i tag di "head" del documento HTML:
< style type = "text/css" >
.BigButton () {
Larghezza: 100px;
Altezza: 50px;
}
< / stile >
Assegnare un tasto di presentazione alla classe "bigbutton" per renderlo grande:
< input type = "submit" classe = "bigbutton" valore = "Big Button" / >
Questo pulsante grande rende la forma più conveniente per gli utenti con disabilità visive. Aumentare le dimensioni del testo di input utilizzati per raccogliere i nomi, indirizzi, indirizzi e-mail e numeri di telefono pure, così gli utenti possono leggere più facilmente le loro voci. È più facile di stilizzare componenti forma specifica utilizzando un selettore di classe come sopra, perché la maggior parte di loro sono gli elementi di "input", e un selettore di tipo interesserebbe tutti. Utilizzare l'opzione "automatico" per il valore della proprietà "width" o "altezza" per ridimensionare automaticamente tale dimensione.
2
Modificare il colore di sfondo degli elementi form con la proprietà "background". Aggiungere il seguente codice tra i tag di "stile" nella sezione head:
{. Red
Priorità bassa: MistyRose;
}
È possibile utilizzare uno qualsiasi dei nomi di colori CSS o un valore esadecimale come "#00ff00." Poiché gli elementi possono appartenere a più di una classe, fare un grande pulsante con sfondo rosso chiaro con questo codice:
< tipo input = "button" class = "bigbutton rosso" value = "Big Red Button" / >
Rosso è utile indicare parti importanti del modulo, come un campo di numero di previdenza sociale, mentre altri colori potrebbero indicare i campi facoltativi. Input di testo, elementi "textarea", "selezionare" gli elementi, elementi di "Opzioni" ed elementi di "forma" stessi sono interessati dalla proprietà "background". Caselle di controllo e pulsanti di opzione non sono.
3
Aggiungere bordi e/o contorni agli elementi del form con un'altra dichiarazione di classe:
.bordered () {
border: 2px #00f000 solido;
contorno: 1px gray tratteggiata;
}
Caselle di controllo e pulsanti di opzione non hanno bordi applicati a loro, ma possono avere contorni. Tutti gli altri elementi di forma possono avere entrambi. Consultare W3schools.com per un elenco di stili possibili di confine e muta. Utilizzare bordi e contorni per distinguere i campi modulo di contatto più importanti dai vicini simili, come campi numero di telefono primario e secondario.
4
Modificare le proprietà di stile di font e il testo per gli elementi form completare le personalizzazioni. Ad esempio, aggiungere la seguente classe:
.styletext () {
font-size: 16px;
testo-ombra: 1px 1px gray;
}
Pulsanti, input di testo, elementi "textarea" e "select" elementi possono avere il loro testo in stile in questo modo. È inoltre possibile utilizzare la proprietà come "font-weight," "font-family" e "font-style." Colore del testo utilizzando la proprietà "color". Un elemento individuale "opzione" può avere testo colorato in modo diverso rispetto ai suoi vicini. Testare il codice in diversi browser Web affinché che il modulo esegue il rendering correttamente.
Consigli & Avvertenze
- Un altro approccio per lo styling il tuo modulo di contatto è quello di creare classi diverse per i diversi tipi di informazioni richieste dal modulo. Ad esempio, creare una classe per il campo di input del nome, uno per il campo numero di telefono, un altro per l'indirizzo di posta elettronica e così via. Ognuno di questi campi è designato da una classe diversa, così per esempio, il campo nome potrebbe comparire più grande degli altri o il campo email potrebbe impiegare un colore diverso.