Elucubrato da saibal
Addì 25 settembre 2002
I Form: segreti e trucchi di personalizzazione
I form sono senza dubbio uno strumento fondamentale per qualsiasi sito web. Ci offrono la possibilità di ricevere comunicazioni di ogni tipo e rappresentano, quindi, un canale aperto di comunicazione con i nostri visitatori.
Indipendentemente dal linguaggio utilizzato (lato server come ASP, PHP o PERL oppure lato client come HTML) tutti i moduli hanno in comune una struttura visibile al navigatore, scritta in html semplice. Ecco un banalissimo esempio:
1 2 3 4
<form name="saibal" action="....." method="post"> <input name="prova" type="text" size="25"> <input type="submit" name="submit" value="Invia"> </form>
Per determinare la tecnologia utilizzata basterà "leggere" l'action del form e vedere a che tipo di pagina punta (mi riferisco al tipo di estensione presente).
In questo articolo, con l'ausilio di javascript e fogli di stile, tenterò di spiegare qualche suggerimento che può essere utile nella realizzazione "strutturale" di un qualsiasi modulo. Per chi volesse avere una panoramica generica sulla scrittura di form può leggere l'Introduzione ai FORM della guida HTML.
Chiunque abbia avuto a che fare con la costruzione di un form si sarà certamente accorto della differenza che può esserci, in alcuni casi, nella visualizzazione a video tra Explorer e Netscape (in particolare la versione 4.x; per fortuna l'uscita di Netscape 6.x ha decisamente ridotto il divario).
In pratica (mi rivolgo a chi non abbia mai avuto modo di verificarlo) i singoli elementi del form vengono rappresentati con dimensioni diverse a seconda del browser utilizzato; ciò dipende, principalmente, dalla natura stessa dei navigatori che, tra le particolarità che caratterizzano il loro DOM, hanno anche una differente interpretazione dei campi.
Penso sia capitato a molti di realizzare un bel modulo (perfettamente integrato con il resto del sito se visto con Explorer) e di scoprire, invece, che con Netscape la grafica veniva "stravolta" da qualche textarea apparentemente troppo lunga.
Uno degli obiettivi del tutorial sarà proprio quello di cercare di ovviare a questo problema. Personalmente conosco due ottime soluzioni per riuscire ad ottenere moduli di dimensioni a video praticamente identiche, sia con IE che con NN: un metodo utilizza esclusivamente javascript mentre l'altro si avvale dei css.
Prima di continuare, però, vorrei dare risposta ad una domanda che sembra essere molto diffusa (almeno tra chi è alle prime armi): come eliminare lo spazio lasciato da un form quando inserito in una tabella? (problema che peraltro non si presenta con Netscape 6.x).
Ho impostato appositamente il bordo della tabella ad "1" per far notare che tra il bottone di submit e la fine della tabella stessa c'è uno spazio ben visibile anche se, nel codice, non abbiamo inserito nessun <br> dopo la chiusura del tag </form>.
Ebbene, probabilmente i puristi dell'html storceranno il naso nel leggere quanto sto per scrivere ma, come spesso accade, il fine giustifica i mezzi; provate a riscrivere la stessa pagina spostando i tag di apertura e di chiusura del form tra i tag <tr> della tabella, in questo modo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Spazio form</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <form name="saibal" action="....." method="post"> <td> <input name="prova" type="text" size="25"> <input type="submit" name="submit" value="Clicca & Godi"> </td> </form> </tr> </table> </body> </html>
Vi sarete accorti che è scomparso l'antiestetico spazio che poteva rovinarci il layout del sito. Se, per scrivere questo codice, utilizzate programmi come Homesite o Dreamweaver, è probabile che vi venga segnalato un errore… ma personalmente non mi preoccuperei più di tanto; è vero che, come già detto, il metodo utilizzato non è del tutto ortodosso per le specifiche del W3C ma, aggiungerei anche, che i broswer attualmente in circolazione (compreso l'odiato/amato Netscape 4.x) non hanno mai dato problemi di visualizzazione.
Se invece non ne volete proprio sapere di andare contro le specifiche ufficiali utilizzate questo semplice foglio di stile (da inserire tra i tag <head> della pagina):
1 2 3
<style type="text/css"> form {margin-bottom : 0; } </style>
Inutile aggiungere che il css non funzionerà con Netscape 4.x .
Torniamo adesso al problema di come creare moduli "universalmente" uguali, indipendentemente dal browser utilizzato.
La prima soluzione utilizzerà solamente javascript; personalmente non è il metodo che preferisco (vi accorgerete in seguito della comodità dei css) ma potrebbe essere utile a chi non ha molta dimestichezza con i fogli di stile.
- 2.811 visite
Vota: 91%
Loading ...
Elucubrazioni
Trash e dintorni
Pere di fosforo
My Ubuntu
Guide e Articoli
Editoriali
Motociclettando
Php for Geek
Tesi di Laurea
Lascia un Commento