Creare moduli di invio (o form)

Ogni sito che abbia un minimo di interattività utilizza un modulo con il quale gestire le informazioni digitate dall'utente: sia esso visibile o invisibile, un complesso sistema o un semplice guestbook delle visite. In questa lezione vedremo come possiamo realizzare un form efficiente nella nostra pagina senza andare a toccare il codice, osservando invece quali sono gli strumenti che l'interfaccia di Dreamweaver ci propone.

Innanzitutto bisogna inserire il modulo, l'elemento basilare. Per farlo basta cliccare su Inserisci, quindi selezionare Modulo ed infine ancora Modulo. Il nostro form verrà automaticamente creato nella pagina, nella posizione in cui avevamo lasciato il nostro cursore. Per permettere di distinguerlo, viene tratteggiato (solo in fase di progettazione e non nel vero output) con un tratteggio rosso.

Occorre quindi modificare le varie impostazioni: tipologia di passaggio delle informazioni, pagina di destinazione e così via. Cliccando sul form appena creato, per selezionarlo, basta guardare in basso, in corrispondenza del pannello Proprietà: sarà qui che troveremo tutte le opzioni di modifica che ci servono. Per prima cosa, possiamo dargli un ID (da non sottovalutare considerando l'uso degli id che si fa con javascript e jQuery: basti pensare ad un semplice plugin di validazione) oppure gestire l'attributo action, method e decidere anche la destinazione del collegamento, proprio come un link.

Qui di seguito è possibile vedere una schermata del programma in fase di modifica di un form.

Ovviamente, anche per quanto riguarda il form è presente un preciso menu contestuale che permette una veloce modifica dei parametri ed un rispettivo Modifica Tag form

A questo punto si può cominciare ad esaminare la quantità di controlli che possono essere inseriti nel modulo. L'elenco si può richiamare tramite il menu Inserisci Modulo

Sono presenti tutti i componenti e controlli d'uso più consueto

Giusto per fare un esempio, un casella di testo Spry offrirà delle opzioni diverse nel pannello delle Proprietà: non solo si potrà decidere se dare un limite minimo o massimo di caratteri, ma anche scegliere se validare automaticamente il campo secondo determinati standard (ad esempio validare automaticamente il testo inserito come un indirizzo email, un numero di telefono o un numero di previdenza sociale).

Per facilitare il lavoro dell'utente inoltre sono stati realizzati dei gruppi di controlli, come ad esempio il Gruppo di Caselle di Controllo Gruppo di Pulsanti di Scelta

Continuando a parlare dei moduli, vediamo come aggiungere i vari tipi di componenti ai form appena creati elabora_dati.php

Una semplice schermata: username e password da inserire, facoltà di "ricordare" i dati dell'accesso e un pulsante di invio dei dati. Vediamo adesso come realizzarlo nella pratica. Innanzitutto creiamo il form (si è già spiegato come si fa). Tra le sue proprietà andiamo a modificare tre caratteristiche:

• il metodo di invio dei dati
• la pagina di destinazione
• il target del collegamento

Insomma, qualcosa di molto simile allo screenshot riportato qui di seguito.

Ora non rimane che aggiungere i vari controlli Inserisci > Modulo > Campo di Testo Etichetta Username:

Automaticamente verrà creata la nostra prima casella di testo Tipo Riga Singola Password

Ora è il turno della casella di controllo Inserisci > Modulo > Casella di Controllo

Siamo quasi alla fine: non rimane che il pulsante Inserisci > Modulo > Pulsante Valore Proprietà Invio Reset

Anche per quanto riguarda i form la rassegna è conclusa: per tutti i controlli la traccia da seguire per una corretta impostazione è questa e non c'è bisogno di perdere tempo per osservarli uno ad uno. Tocca passare, invece, ad un argomento sicuramente degno di nota: i fogli di stile CSS ed il loro utilizzo.