
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come rendere più belli e usabili i Form utilizzando i CSS
Tra gli aspetti meno noti, ma più utili, nell’uso dei CSS possiamo annoverare le varie possibilità che ci offrono per definire l’aspetto visuale dei form. In questo articolo vedremo come con poche istruzioni sia possibile dare un tocco di stile a questi elementi per adeguarli al design globale delle nostre pagine: a cosa serve studiare con cura la scelta dei colori o dei font se poi siamo costretti a rassegnarci di fronte alla grigia monotonia di un modulo?
Chiariamo subito un aspetto cruciale. Sulla definizione degli stili per i form i browser recenti (diciamo dalla versione 5 in poi per quelli più comuni) non offrono affatto un supporto uniforme. Opera fallisce miseramente anche sugli aspetti più semplici; Explorer 5/6 per Windows presenta incompatibilità complessivamente marginali.
I browser basati su Gecko (quindi Mozilla e Netscape 6/7) sono, insieme a Explorer 5 per Mac, gli strumenti che offrono il supporto più ampio degli standard in questo particolare ambito. Proprio per questo, abbiamo deciso di concentrarci solo sulle applicazioni cross-browser, citando quando opportuno alcune funzionalità degne di rilievo che al contrario offrono un supporto solo parziale.
Questo articolo, infine, può essere visto come un’utile continuazione di un altro già pubblicato in questa sezione, I Form: segreti e trucchi di personalizzazione, dove vengono presi in considerazione anche alcuni aspetti di compatibilità con Netscape 4.
Iniziamo col dare un’occhiata al documento di esempio. All’inizio della pagina un form “senza stile” su cui eserciteremo la nostra abilità. Per allineare gli elementi del modulo abbiamo usato una classica tabella. È tuttora il metodo più valido e semplice, a meno di non sfruttare le capacità di posizionamento dei CSS.
Iniziamo dunque la nostra opera di riscrittura. Andiamo avanti.
Cominciamo la nostra opera di restyling (visualizza l’esempio) dall’elemento contenitore <form>. Nell’esempio abbiamo assegnato al form l’id “form2” di cui abbiamo definito poi gli stili.
Su cosa possiamo agire? Sui più importanti elementi visuali e di formattazione: colore di sfondo, padding e margini, bordi. Abbiamo anche agito sulla proprietà width. Ciò può essere utile per dare al form una dimensione fissa e che si adatti al nostro layout.
Essendo infatti un elemento blocco (come un paragrafo <p>, per intenderci) un form occupa di default tutta la larghezza della pagina. La scelta di settare una dimensione fissa diventa poi quasi obbligatoria se si usano bordi: provate a impostare un bordo senza larghezza. L’effetto visivo non è dei più esaltanti. È possibile poi impostare le caratteristiche dei font. Se non abbiamo particolari esigenze, esse saranno ereditate da tutti gli elementi interni, dal testo ai caratteri dei campi input. Ecco il codice:
#form2 {
background: #FFFFFF;
padding: 10px;
width: 500px;
border: 1px solid #000000;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
Subito dopo passiamo a modificare i campi di testo. La classe usata per modificarne la presentazione è “input.testo“. Anche qui per ottenere buoni risultati visivi si possono modificare il colore di sfondo e il font. In questo caso è importante, ovviamente, impostare un colore ben in contrasto con lo sfondo, e magari dare un bel grassetto. Se vogliamo spaziare rispetto al bordo esterno del campo il punto di inserimento del testo si può agire sul padding (basterà quello sinistro).
La proprietà più importante è però quella dei bordi: in questo modo riusciamo a modificare davvero radicalmente l’aspetto tradizionale dell’input. La scelta è ampia e comprende tutte le opzioni per il bordo definite nei CSS: solid, dotted, dashed, double, groove, ridge, inset, outset. A voi l’onere e il piacere di provare le varie soluzioni.
Nell’esempio abbiamo anche settato la larghezza con width: problemi di allineamento e dimensioni risolti in un colpo solo. Un modo elegante ed efficace per fare a meno dell’attributo “size”. Potremo invece continuare a usare un altro importante attributo, “maxlenght”, quello che ci consente di impostare il numero massimo di caratteri che l’utente può inserire. Anche qui il codice del CSS:
input.text {
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
border: 1px solid #000000;
padding-right: 5px;
padding-left: 5px;
width: 140px;
}
Dai campi di testo al pulsante di invio. Le opzioni di formattazione sono simili a quelle viste per i textfields. E anche qui è con i bordi che operiamo i cambiamenti più visibili e importanti. Il codice, in base a quello che abbiamo già detto, dovrebbe essere auto-esplicativo:
input.pulsante {
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
text-align: center;
padding: 5px;
width: 140px;
border: 1px solid #000000;
margin-top: 10px;
}
Vediamo ora qualcosa di più interessante e di interattivo.
Finora ci siamo concentrati su proprietà cross-browser e con nessun problema di compatibilità (non considero nemmeno Netscape 4, per cui rimando all’articolo citato all’inizio). Mi piace però segnalarvi un paio di proprietà davvero interessanti che ahimè non trovano supporto nel più diffuso tra i browser: Explorer 5/6 su Windows. I possessori di Mozilla, Netscape 6/7 o Explorer Mac potranno invece valutarne efficacia e attrattive.
Si tratta del supporto di tre delle cosiddette pseudo-classi. Nei CSS una pseudo-classe definisce lo stile di un elemento in base allo stato. L’utilizzo più classico e diffuso è quello dei vari :link, :hover o :visited per Definire gli stili dei link con i CSS: tra estetica e usabilità.. Come i link, anche i campi di un form possono avere particolari condizioni di stato.
Esempio: quando inseriamo il cursore in un campo di testo, si dice che quel campo ha in quel momento il focus. Bene: un ottimo effetto può essere quello di cambiare il colore di sfondo dell’input quando esso riceve il focus. Ecco il semplicissimo frammento di codice:
input.text:focus {
background: #CCCCFF;
}
Allo stesso modo possiamo usare le pseudo-classi :hover e :active per modificare il comportamento e il colore di un pulsante al passaggio del mouse e quando viene premuto: in pratica un rollover. È importante in questo caso definire prima lo stile per :hover rispetto a quello di :active. Codice:
input.pulsante:hover {
background: #CCCCFF;
}
input.pulsante:active {
background: #00CCFF;
}
Per ottenere lo stesso effetto in Explorer Win dobbiamo ricorrere ad uno swap della classe, come ben spiegato da Saibal nell’I Form: segreti e trucchi di personalizzazione.
Nell’esempio 3 ci siamo un pò divertiti. Abbiamo testato la capacità di impostare un’immagine di sfondo per gli elementi di un form. Diciamo che è per siti moooolto cool e per maniaci della texture, ma funziona bene in tutti i browser degni di questo nome. Nell’esempio noterete la texture soprattutto nella textarea, elemento su cui l’effetto è più visibile e realistico, viste le dimensioni. Il codice usato per la textarea vale per tutti (vi rimando alla pagina per il codice completo del CSS):
textarea.sfondo {
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: #CCCCCC url(sfondo.gif);
width: 140px;
border: 1px solid #000000;
padding-right: 5px;
padding-left: 5px;
}
L’esempio 4 riguarda invece l’elemento <select>. Qui le possibilità di intervento sono minori ma gli effetti comunque interessanti. Tanto per cominciare: non è possibile modificare l’aspetto con i bordi. E questo è un problema: perchè in un modulo come quelli visti prima, stonerebbe un pò un select con il classico bordo rialzato. Ma andiamo oltre. Possiamo tranquillamente impostare le caratteristiche dei font, il colore di sfondo e la larghezza (attenzione se avete testi per le opzioni un pò lunghi!). Ecco come abbiamo definito gli stili del nostro select:
#select {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
width: 170px;
}
È possibile poi intervenire anche sui componenti di questo tipo di elemento: parlo del classico <option>, ma anche del meno noto ma utilissimo <optgroup>. Nell’esempio abbiamo creato appunto tre gruppi di opzioni assegnando a ciascuno una classe:
<select name=”select” id=”select” size=”1″>
<option value=”” selected id=”selezionato”>Scegli la provincia</option>
<optgroup class=”opt1″ label=”Lombardia”>
…………………………………
</optgroup>
<optgroup class=”opt2″ label=”Toscana”>
…………………………………
</optgroup>
<optgroup class=”opt3″ label=”Sicilia”>
………………………………..
</optgroup>
</select>
Per ciascuna classe abbiamo impostato semplicemente un diverso colore di sfondo, lasciando che venissero ereditate le impostazioni per i font:
.opt1 {
background: #CCCCCC;
}
.opt2 {
background: #CCCCFF;
}
.opt3 {
background: #FFCCFF;
}
L’effetto non è solo esteticamente gradevole, ma rende più facilmente leggibili le diverse opzioni. La stessa cosa si può fare sul tag <option>, ma se sono molte risulta un pò complicato impostare un gran numero di classi per ciascuna di esse.
Ricordiamo che è possibile intervenire sui Coloriamo scroll-bars e form con i CSS, ma solo con Explorer 5.5/6 per Win.
Rimangono un pò fuori dal gioco checkbox e Radio Button. L’unica proprietà su cui vale la pena intervenire per questi minuscoli campi è il colore di sfondo. Se poi volete un checkbox enorme vi basta impostare adeguatamente la proprietà width…A voi il piacere della scoperta. Alla prossima.
Se vuoi aggiornamenti su Moduli con stile: usare i CSS con i form inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Parliamo di Arduino/Galileo come board completa per realizzare progetti completamente compatibili con le board più comuni, con la marcia in […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
L’uso di asm.js permette di convertire in Javascript codice scritto in linguaggi come C e C++, potendo quindi eseguire il codice su un comune browser web.
RSGallery2 consente di creare e gestire delle gallerie di immagini in Joomla
Otto vulnerabilità critiche. L’aggiornamento Microsoft di giugno corregge problemi di Windows, Explorer, Word, PowerPoint e Media Player. In totale 21 falle corrette
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.