INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Stilizzare i form Html con i Css

Design di siti Web con HTML e CSS
Disegno di siti Web con HTML, CSS e Dynamic HTML.

Anche i form Html sono soggetti a possibili stilizzazioni mediante l'utilizzo dei Css, è possibile applicare ai principali elementi del modulo in questione tutte le stilizzazioni grafiche proprietarie dei box e dei text, per maggiori dettagli è possibile consultare le Referenze Css messe a disposizione in questo sito.

Vediamo come cambiare la grafica di un form, il codice da inserire fra i tag <head> e </head> è il seguente: 

<style type="text/css">
   .form {
      background: #FFFF00;
      color:#FF0000;
      font-family: Tahoma;
      font-size: 11px;
      border: Solid 1px #000000;
   }
</style>
Non c'è molto da spiegare...

.form - definiamo il nome della classe che poi richiameremo all'interno dell'input, possiamo tranquillamente rinominarla
background: #FFFF00 - definiamo lo sfondo del form
color:#FF0000; font-family: Tahoma; font-size:11px; - definiamo il tipo, la dimensione in pixel e il colore del font
border: Solid 1px #000000; - definiamo la dimensione e il colore dei bordi

Ora all'interno del <body> e </body> proviamo ad inserire un form con il seguente codice: 
<form>
   <input type="text" class="form">
   <input type="button" value="Invia" class="form">
</form>
L'attributo class="form" richiama la classe del Css a cui ci riferiamo, questo è il risultato ottenuto:
Possiamo definire due diverse classi, una per le textbox ed una per i bottoni, elementi più utilizzati nelle pagine Web interattive, ma possiamo agire anche sulle textarea e sulle selectbox, la prima si comporta in maniera analoga alle textbox, la seconda, purtroppo, non offre la possibilità di appiattire il bordo come abbiamo fatto finora... ma in compenso permette di stilizzare le singole option: 
<form>
   <select>
      <option style="background: #FF0000;">Opzione # 1</option>
      <option style="background: #0000FF;">Opzione # 2</option>
      <option style="background: #00FF00;">Opzione # 3</option>
   </select>
</form>
Ecco cosa accade:
Possiamo, in fine, agire anche direttamente su di un elemento di un form, ad esempio modificando lo stile del cursore del mouse al passaggio su di un elemento, nell'esempio che segue faremo in modo da far apparire la manina classica dei link al passaggio su di un bottone: 
<input type="button" value="Invia" class="form" style="cursor: Hand;">
Facile vero? Ora potete divertirvi a cambiare i vostri form con i Css fino ad ottenere l'effetto desiderato.

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Guadagna col tuo sito grazie a TradeD... Riavviare IIS Effetto ombra su testo con Photoshop Guida XHTML Riscrivere le URL con Asp Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Referenze dei Tag Html HTTP 500 internal server error Introduzione ad Ajax ed Asp con Jscri... Breve guida a jQuery Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS
Corsi online Guadagna col sito Hosting 20 euro Mr.Webmaster PHP&Linux ExtroWebSite gDesign NetFree TutorialWeb Dablones AiutoPC AspCode MorpheusWeb WebIsland WebmasterRisorse PCSelf