Argomenti:
Creare una struttura di un modulo.
Vari strumenti per la raccolta dati.
Nuovi controlli per i moduli in HTML5.
Esempio modulo di inserimento dei dati di feedback
Creare una struttura di un modulo.
- form
- i moduli sono collocati all'interno del tag form
- action
- attributo che indica l'URL del server a cui inviare le info
- method
- i dati possono essere inviati i due modi:
- get
- i dati vengono aggiunti alla fine dell'indirizzo URL
- Utilizzo
- : brevi moduli, sono per estrarre info dal serve senza modificare i dati sul server
- post
- i dati vengono inviati all'interno delle intestazioni HTTP
- Utilizzo:
- se il modulo consente di inviare file
- se il modulo deve inviare molti dati
- se i dati inviati sono riservati
- se i dati devono essere aggiunti o cancellati da un DB
- id
- attributo identificativo del singolo modulo
- maxlenght
- limita il numero di caratteri da inserire
Input. Vari strumenti per la raccolta dati.:
Inizio pagina
- input
- crea i controlli per i moduli
- type="tipo"
- crea una riga di input di testo; può essere di vari tipi
- name
- è il nome che identifica il modulo
Vari tipi di input
- Input testuale
- type="text"
- Crea una riga di input testuale
- Input di password
- type="password"
- I caratteri vengono mascherati
- Input di testo con più righe
- textarea
- Area di teso composto da più righe
- Pulsante di opzione
- type="radio"
- Scelta di una tra più opzioni
- Caselle di selezione
- type="checkbox"
- Scelta di una o più opzioni
- Casella con elenco a discesa
- select
- Scelta di una o più opzione in un elenco a discesa
- Casella per l'invio file
- type="file" type="submit"
- Invio di file al server, pulsante di invio
- Immagini per pulsanti
- type="image"
- Per utilizzare una immagine per il pulsante di invio
- Pulsanti personalizzati e controlli nascosti
- type="hidden"
- Consente di personalizzare i pulsanti e diinserire dei controlli nascosti
- Etichette per i controlli di un modulo
- label e for"
- Consente di associare una eticheta ad un elemento di input
- Raggruppamento degli elementi di un modulo
- fielset, legend"
- Raggruppa un insieme di controlli correlati di un modulo
Input testuale: input type="text"
Creare una riga di input testuale
Esempio di stampa di una moltiplicazione tra due numeri con js:
Input di password: input type="password"
Viene utilizzato per creare una casella di password, nasconde le lettere digitate.
Input di testo con più righe: textarea
Viene utilizzato per creare più righe di texto, di solito utilizzato per commenti
nel tag è possibile definire la grandezza della casella di testo,
definendo con rows il numero di righe e con cols numero di colonne.
Inizio pagina
Pulsante di opzione: input type="radio"
Viene utilizzato per creare pulsanti di opzione, selezionabile in modo esclusivo.
Attributi del tipo di input:
- name
- nome del modulo inviato al server
- value
- Indica il valore inviato al server dell'opzione selezionata
- checked
- Indica il valore che è possibile far selezionare al caricamento della pagina
type="radio"
Inizio pagina
Caselle di selezione: input type="checkbox"
Checkbox viene utilizzato per creare caselle di selezione.
E' possibile selezionare o deselezionare una o più opzioni in risospa ad una domanda
Casella con elenco a discesa: select, option
Select può essere utilizzato in due modi:
1- selezione singolo elemento da un elenco a discesa
2- selezione multipla di elementi da un elenco a discesa
Inizio pagina
Casella per l'invio file: input type="file", input type="submit"
Altro esempio di pulsante di invio:
- L'attributo value="Invia" specifica le parole che devono comparire sul pulsante di invio
Immagini per pulsanti: input type="image"
Creare pulsanti personalizzati con immagini
Pulsanti personalizzati e controlli nascosti: input type="hidden"
con hidden si possono inerire dei controlli nascosti che consentono agli autori della pagina WEB
di aggiungere al modulo dei valori invisibili all'utente, non vengono visualizzati sulla pagina
(visibili con visualizza sorgnte) da approfondire l'utilizzo
Inizio pagina
Etichette per i controlli di un modulo: label, for
label assegna una etichetta ad un modulo
for indica il controllo a cui appartiene l'etichetta
Raggruppamento degli elementi di un modulo: fieldset, legend
fieldset: raggruppa i controlli correlati di un modulo
legend: si trova subito dopo il tag fieldset e contiene il titolo da dare al gruppo di controlli.
Nuovi controlli per i moduli in HTML5:
Inizio pagina
- Convalida dei moduli
- required
- Controllo della correttezzza dei dati inseriti
- Inserimento di date
- input type="date"
- Crea una casella di input specifica per le date
- Inserimento di indirizzi email e URL
- input type="email"; input type="url"
- Crea una casella di input per indirizzo email e URL e verifica la correttezza dell'inserimento
- Casella di ricerca
- type="search"
- Crea una casella di testo per la ricerca
Convalida dei moduli: required
Genera un messaggio di errore se il contenuto dell'input "richiesto" manca.
Inserimento di date: input type="date"
Consente di creare una casella di inputo di tipo data
Inserimento di un indirizzo email e di un URL: input type="email"; input type="url"
type="email": crea una casella di testo per inserire un indirizzo email; viene verificato il corretto inerimento. type="url": crea una casella di testo per inserire un indirizzo WEB; viene verificato il corretto inerimento.
Casella di ricerca: input type="search"
Crea una casella di input per poter effetuare una ricerca di parole
Esempio di modulo inserimento dati di feeback
Esempio modulo feedback
