Creare moduli Web

Nella vista Progettazione, il modulo è indicato da un bordo rosso tratteggiato. Se non vedi questo contorno, seleziona Visualizza > Ausili visivi > Elementi invisibili.

Impostate le proprietà del modulo HTML nella finestra di ispezione Proprietà (Finestra >Proprietà):

a.Nella finestra del documento, fate clic sul bordo del modulo per selezionarlo.

b.Nella casella Nome modulo, digitate un nome univoco per identificare il modulo.

L'assegnazione di un nome consente di fare riferimento al modulo o di gestirlo con un linguaggio di script, ad esempio JavaScript o VBScript. Se non assegnate un nome al modulo, Dreamweaver genera un nome utilizzando la sintassi formn e incrementa il valore di n per ogni modulo aggiunto alla pagina.

c.Nella casella Azione, specificate il percorso della pagina o dello script che verrà utilizzato per elaborare i dati del modulo, digitando il percorso oppure facendo clic sull'icona della cartella per accedere alla pagina o allo script appropriato. Esempio: processorder.php.

d.Nel menu a comparsa Metodo, selezionate il metodo per trasmettere i dati del modulo al server.

Impostate le opzioni desiderate tra le seguenti:

Predefinito Utilizza l'impostazione predefinita del browser per inviare i dati del modulo al server. In genere, il valore predefinito è il metodo GET.

GET Accoda il valore all'URL di richiesta della pagina.

POST Incorpora i dati del modulo nella richiesta HTTP.

Non utilizzate il metodo GET per inviare moduli lunghi. La lunghezza massima degli URL è di 8192 caratteri. Se i dati inviati superano questo limite, possono verificarsi troncamenti che determinano risultati di elaborazione inaspettati o errati.

Le pagine dinamiche generate dai parametri passati dal metodo GET possono essere contrassegnate poiché tutti i valori necessari per rigenerare la pagina sono contenuti nell'URL visualizzato nella casella Indirizzo del browser. Al contrario, le pagine dinamiche generate dai parametri passati dal metodo POST non possono essere contrassegnate.

Per le password o i nomi utente riservati, i numeri di carta di credito o altre informazioni riservate, il metodo POST può risultare più sicuro del metodo GET. Tuttavia, le informazioni inviate dal metodo POST non sono cifrate e potrebbero essere facilmente intercettate da un hacker. Per garantire la sicurezza, utilizzate una connessione protetta a un server protetto.

e.(Opzionale) Nel menu a comparsa Tipo di codifica, specificate il tipo di codifica dei dati inviati al server per l'elaborazione.

L'impostazione predefinita di application/x-www-form-urlencode viene in genere utilizzata insieme al metodo POST. Se state creando un campo di caricamento file, specificate il tipo MIME multipart/form-data.

f.(Opzionale) Nel menu a comparsa Destinazione, specificate la finestra in cui visualizzare i dati restituiti dal programma richiamato.

Se la finestra con il nome non è già aperta, si apre una nuova finestra con quel nome. Impostate i seguenti valori di destinazione:

_blank Apre il documento di destinazione in una nuova finestra senza nome.

_parent Apre il documento di destinazione nella finestra superiore a quella in cui è visualizzato il documento corrente.

_self Apre il documento di destinazione nella stessa finestra in cui è stato inviato il modulo.

_top Apre il documento di destinazione nel corpo della finestra corrente. Questo valore può essere utilizzato per essere certi che il documento di destinazione occupi l'intera finestra anche se il documento originale era visualizzato in un frame.

Inserite oggetti modulo nella pagina:

a.Posizionate il punto di inserimento dove desiderate che venga visualizzato l'oggetto modulo all'interno del modulo.

B.Selezionate l'oggetto nel menu Inserisci > Modulo oppure nella categoria Moduli del pannello Inserisci.

c.Compilate la finestra di dialogo Attributi di accessibilità tag Input. Per ulteriori informazioni, fate clic sul pulsante Aiuto nella finestra di dialogo.

d.Impostate le proprietà degli oggetti.

e.Inserite un nome per l'oggetto nella finestra di ispezione Proprietà.

Ogni campo di testo, campo nascosto, casella di controllo e oggetto elenco/menu deve avere un nome univoco che identifichi l'oggetto nel modulo. I nomi degli oggetti modulo non possono contenere spazi o caratteri speciali. Potete utilizzare qualunque combinazione di caratteri alfanumerici e un carattere di sottolineatura (_). Tenete presente che l'etichetta assegnata all'oggetto rappresenta il nome della variabile che memorizzerà il valore del campo, ovvero i dati immessi. Questo è il valore inviato al server per l'elaborazione.

f.Per associare un'etichetta a un oggetto campo di testo, casella di controllo o pulsante di scelta nella pagina, fate clic accanto all'oggetto e digitate il testo dell'etichetta.

Usa interruzioni di riga, interruzioni di paragrafo, testo preformattato o tabelle per formattare i moduli.Non puoi inserire un modulo in un altro modulo (ovvero non puoi sovrapporre i tag), ma puoi includere più di un modulo in una pagina.

Quando progetti moduli, ricorda di etichettare i campi del modulo con testo descrittivo per far sapere agli utenti a cosa stanno rispondendo, ad esempio "Digita il tuo nome" per richiedere informazioni sul nome.

Usa le tabelle per fornire struttura agli oggetti del modulo e alle etichette dei campi.Quando usi le tabelle nei moduli assicurati che tutti i tag table siano inclusi tra i tag form.

Specifica il nome di un oggetto campo file.

Specifica il numero massimo di caratteri che possono essere visualizzati nel campo.

Specifica il numero massimo di caratteri che il campo potrà contenere. Se l'utente sfoglia per individuare il file, il nome e il percorso del file possono superare il valore Max Chars specificato.Tuttavia, se l'Utente cerca di digitare il nome e il percorso del file, il campo file consentirà solo il numero di caratteri specificato dal Valore MAX.

Viene visualizzata la finestra di dialogo Seleziona file di origine immagine.

Specifica il nome del pulsante. Due nomi riservati, Invia e Reimposta, indicano al modulo di inviare i dati del modulo all'applicazione di elaborazione o allo script, o di reimpostare tutti i campi del modulo sui valori originali, rispettivamente.

Specifica l'immagine da utilizzare per il pulsante.

Consente di inserire testo descrittivo nel caso in cui l'immagine non riesca a caricarsi nel browser.

Imposta l'attributo di allineamento dell'oggetto.

Avvia l'editor di immagini predefinito e apre il file di immagine per la modifica.

Consente di applicare le regole CSS all'oggetto.

Selezionate Inserisci > Modulo > Gruppo pulsanti di scelta.

Impostate le opzioni della finestra di dialogo e fate clic su OK.

a.Nella casella Nome, inserite un nome per il gruppo di pulsanti di scelta.

 Se i pulsanti di scelta sono impostati per inviare i parametri al server, i parametri sono associati al nome. Ad esempio, se al gruppo assegnate il nome myGroup e viene impostato il metodo GET, ovvero il modulo deve trasmettere i parametri URL invece dei parametri del modulo quando l'utente fa clic sul pulsante di invio, l'espressione myGroup="CheckedValue" viene passata nell'URL al server.

b.Fate clic sul pulsante più (+) per aggiungere un pulsante di scelta al gruppo. Inserite un'etichetta e un valore selezionato per il nuovo pulsante.

c.Utilizzate la freccia su e la freccia giù per riordinare i pulsanti.

d.Se desiderate che venga selezionato un determinato pulsante di scelta quando la pagina viene aperta in un browser, inserite un valore uguale a quello del pulsante di scelta nella casella Seleziona valore uguale a.

Inserite un valore statico oppure specificatene uno dinamico facendo clic sull'icona del fulmine presente accanto alla casella e selezionando un recordset contenente i possibili valori selezionati. In entrambi i casi, il valore specificato deve corrispondere al valore selezionato di uno dei pulsanti di scelta del gruppo. Per visualizzare i valori selezionati dei pulsanti di scelta, selezionate ogni pulsante e aprite la relativa finestra di ispezione Proprietà (Finestra > Proprietà).

e. Seleziona il formato in cui desideri che Dreamweaver disponga i pulsanti. I pulsanti possono essere disposti utilizzando le interruzioni di riga o una tabella. Se selezionate la disposizione in tabella, Dreamweaver crea una tabella a una sola colonna con i pulsanti di scelta a sinistra e le etichette a destra.

Potete anche impostare le proprietà utilizzando la finestra di ispezione Proprietà o direttamente nella vista Codice.

Selezionate Inserisci > Modulo > Gruppo caselle di controllo.

Impostate le opzioni della finestra di dialogo e fate clic su OK.

a.Nella casella Nome, inserite un nome per il gruppo di caselle di controllo.

Se le caselle di controllo sono impostate per inviare i parametri al server, i parametri sono associati al nome. Ad esempio, se al gruppo assegnate il nome myGroup e viene impostato il metodo GET, ovvero il modulo deve trasmettere i parametri URL invece dei parametri del modulo quando l'utente fa clic sul pulsante di invio, l'espressione myGroup="CheckedValue" viene passata nell'URL al server.

b.Fate clic sul pulsante più (+) per aggiungere una casella di controllo al gruppo. Inserite un'etichetta e un valore selezionato per la nuova casella di controllo.

c.Utilizzate le frecce su e giù per riordinare le caselle di controllo.

d.Se desiderate che venga selezionata una determinata casella di controllo quando aprite la pagina in un browser, inserite un valore uguale a quello della casella di controllo nella casella Seleziona valore uguale a.

Inserite un valore statico oppure specificatene uno dinamico facendo clic sull'icona del fulmine presente accanto alla casella e selezionando un recordset contenente i possibili valori selezionati. In entrambi i casi, il valore specificato deve corrispondere al valore selezionato di una delle caselle di controllo del gruppo. Per visualizzare i valori selezionati delle caselle di controllo, selezionate ogni casella di controllo e aprite la relativa finestra di ispezione Proprietà (Finestra > Proprietà).

e.Selezionate il formato di layout delle caselle di controllo di Dreamweaver.

Potete disporre le caselle di controllo utilizzando interruzioni di riga o una tabella. Se selezionate la disposizione in tabella, Dreamweaver crea una tabella a una sola colonna con le caselle di controllo a sinistra e le etichette a destra.

Potete anche impostare le proprietà utilizzando la finestra di ispezione Proprietà o direttamente nella vista Codice.

Inserite un oggetto modulo Elenco/Menu HTML nella pagina:

    a.Fate clic all'interno del modulo HTML nella pagina (Inserisci > Modulo > Modulo).

    b.Selezionate Inserisci > Modulo > Elenco/Menu per inserire l'oggetto modulo.

Effettuate una delle operazioni seguenti:

• Selezionate un oggetto modulo Elenco/Menu HTML nuovo o esistente, quindi fate clic sul pulsante Dinamico nella finestra di ispezione Proprietà.

• Selezionate Inserisci > Oggetti dati > Dati dinamici > Elenco a selezione dinamica.

Impostate le opzioni della finestra di dialogo e fate clic su OK.

  a.Nel menu a comparsa Opzioni dal recordset, selezionate il recordset da utilizzare come origine di contenuto. Questo menu consente anche di modificare in un momento successivo le voci di elenco/menu statiche e dinamiche.

  b.Il campo Opzioni statiche consente di inserire una voce predefinita nell'elenco o nel menu. Questa parte della finestra di dialogo permette anche di modificare le opzioni statiche di un oggetto modulo elenco/menu dopo l'aggiunta di contenuto dinamico.

  c.(Opzionale) Utilizzate i pulsanti più (+) e meno (-) per aggiungere ed eliminare le voci dell'elenco. Le voci vengono visualizzate nell'ordine in cui appaiono nella finestra di dialogo Elenco valori. La prima voce dell'elenco è la voce che viene selezionata quando la pagina viene caricata in un browser. Per modificare la disposizione delle voci all'interno dell'elenco, utilizzate la freccia su e la freccia giù.

  d.Nel menu a comparsa Valori, selezionate il campo che contiene i valori delle voci di menu.

  e.Nel menu a comparsa Etichette, selezionate il campo che contiene le etichette per le voci di menu.

  f.(Opzionale) Se desiderate che venga selezionata una determinata voce di menu quando la pagina viene aperta in un browser o quando un record viene visualizzato nel modulo, inserite un valore uguale a quello della voce di menu nella casella Seleziona valore uguale a.

    Potete inserire un valore statico oppure specificarne uno dinamico facendo clic sull'icona del fulmine presente accanto alla casella e selezionando un valore dinamico dall'elenco delle origini dati. In entrambi i casi, il valore specificato deve corrispondere a uno dei valori delle voci di menu.

L'origine dati deve contenere le informazioni testuali. Se nell'elenco non sono visualizzate origini dati o se quelle disponibili non soddisfano le tue esigenze, fai clic sul pulsante Più (+) per definire una nuova origine dati.

• Fate clic sull'icona del fulmine presente accanto alla casella Selezionata se e scegliete il campo dall'elenco delle origini dati.

  L'origine dati deve contenere dati booleani, quali Yes e No o true e false. Se l'elenco non contiene delle origini dati o se le origini dati disponibili non soddisfano le vostre esigenze, fate clic sul pulsante più (+) per definirne una nuova.

• Nella casella Uguale a, inserite il valore che deve essere contenuto nel campo per visualizzare la casella di controllo selezionata.

  Ad esempio, per fare apparire la casella di controllo come selezionata quando il valore di un campo specifico di un record è Yes, inserite Yes nella casella Uguale a.

La casella Valore pulsante di scelta visualizza i valori di tutti i pulsanti di scelta nel gruppo.

Il recordset selezionato contiene valori che corrispondono ai valori selezionati dei pulsanti di scelta. Per visualizzare i valori selezionati dei pulsanti di scelta, seleziona ciascun pulsante di scelta e apri la finestra di ispezione Proprietà (Finestra > Proprietà).

Inserite i dati desiderati nella finestra di dialogo Dati dinamici e fate clic su OK.

  a.Selezionate un'origine dati dal relativo elenco.

  b.Opzionale) Selezionate un formato di dati per il testo.

  c.(Opzionale) Modificate il codice che Dreamweaver inserisce nella pagina per visualizzare il testo dinamico.

Assicurati che ogni campo di testo che desideri convalidare abbia un nome univoco.

Ad esempio, potresti specificare che un campo di testo per l'età di una persona accetti solo numeri.

Ad esempio, puoi inserire il nome di una funzione che non esiste ancora, come processMyForm().

Ad esempio, potresti definire la seguente funzione JavaScript nella sezione head del documento per visualizzare un messaggio quando l'utente fa clic sul pulsante Invia:

function processMyForm(){

alert('Grazie per il tuo ordine!');

}

Questa operazione deve essere eseguita una sola volta.

Viene visualizzata la finestra di dialogo Attributi di accessibilità tag Input.

Assegna un ID al campo di modulo. Questo valore può essere utilizzato per fare riferimento al campo da JavaScript; viene anche utilizzato come valore dell'attributo for se selezionate l'opzione "Associa tag Label utilizzando l'attributo for" nelle opzioni Stile.

Racchiude l'oggetto del modulo tra tag Label nel modo seguente:

Utilizza l'attributo for per racchiudere l'oggetto del modulo tra tag Label nel modo seguente:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Con questa procedura, il browser riproduce il testo associato a una casella di controllo e a un pulsante di scelta attivato mediante un'area rettangolare e consente all'utente di selezionare la casella di controllo o il pulsante di scelta facendo clic in qualsiasi punto del testo associato senza ricorrere al relativo controllo.

Nota: Questa è l'opzione preferita per l'accessibilità; tuttavia, la funzionalità può variare a seconda del browser.

Non utilizza alcun tag Label, come illustrato di seguito:

Utilizza un equivalente da tastiera (una lettera) e il tasto Alt (Windows) o il tasto Control (Macintosh) per selezionare l'oggetto modulo nel browser. Ad esempio, se inserisci B come Access Key, gli utenti con un browser Macintosh potrebbero digitare Control+B per selezionare l'oggetto modulo.

Specifica l'ordine di tabulazione degli oggetti modulo. Se imposti l'ordine di tabulazione per un oggetto, devi impostare l'ordine di tabulazione per tutti gli oggetti.

Impostare un ordine di tabulazione è utile quando hai altri collegamenti e oggetti modulo nella pagina e hai bisogno che l'utente li scorri con il tab in un ordine specifico.

L'oggetto modulo viene visualizzato nel documento.

• Modifica gli attributi appropriati nella vista Codice.

• Fai clic con il pulsante destro del mouse (Windows) o Control‑clic (Macintosh), quindi seleziona Modifica tag.