Form
Nei documenti HTML può essere utile creare dei moduli (form) che possono essere compilati da chi consulta le pagine per inserire e-mail, password o dati personali per registrarsi ad un sito.
Le informazioni sono inviate a chi gestisce la pagina via e-mail o ad un server “in attesa”.
Per creare una form si deve usare il tag<form> Elementi della form Pulsanti invia e cancella </form>
Le informazioni che il sito ricava dalle form possono essere usate da altri programmi.
Le form sono utili in combinazione con i data base, ogni form produce un record (una riga) che viene memorizzato in un data
base per elaborazioni successive.
Form: attributi
Nell'elemento <form>....</form> si trovano alcuni attributi importanti per l'invio dei dati:- action
- action="..." è il risultato del pulsante INVIO come un link a pagina di conferma o mailto:indirizzo internet a cui inviare i dati inseriti nella form. All'interno dell'attributo action="...." è indicata la risorsa che elaborerà i dati del form.
- method=“post / get”
- specificano il metodo con cui i dati del modulo sono inviati al server.
- id
- id="...." è il nome univoco per identificare la form
- name
- L'attributo name="...." degli elementi input è il nome della variabile il cui valore è il contenuto inserito dall'utente nel campo e che sarà utilizzata da altri programmi per l'elaborazione dei dati. Solo i dati con attributo name sono elaborati.
<form>
action="indirzzo https"
method=“post"
id="email"
name="email"
Elementi della form
Pulsanti invia e cancella
</form>
Invio dati: GET e POST
- POST
- Incorpora i dati del modulo nella richiesta HTTP. La lunghezza dei dati che si possono inviare è virtualmente illimitata e i dati essendo incorporati nella richiesta non sono leggibili; è per questo che per motivi di sicureza è preferibile il metodo post.
- GET
- Accoda il valore all'URI inserita nella prima riga dell'intestazione di richiesta della pagina. Dato che la lunghezza delle righe di intestazione è limitata, non è possibile inviare molti campi o campi con valori lunghi.
Se non si specifica il metodo di invio, l'impostazione predefinita è il metodo GET.
Uso di get e post
Proviamo a creare una form con metodo GET e osserviamo cosa succede al link sulla barra degli indirizzi del browser dopo aver inviato il nome;
<form action="https://iscrivimi.php" method="get" name="iscrivimi“ id=“iscrivimi”>
Nome: <input type="text" name="nome" size="40“ />
<input type="submit" value="Iscrivimi“ />
</form>
Ora cambiate method="get" con method="post", e osservate cosa cambia nella barra degli indirizzi.
Elementi delle form
Per l'inserimento dei dati da parte dell'utente, si devono creare degli spazi. Ogni spazio deve avere un nome.
I campi in cui inserire i dati possono essere:
- caselle e aree di testo per inserire del testo libero
- checkbox (caselle a selezione multipla)
- radiobox (caselle a selezione singola)
- menu a selezione singola o multipla
Per inserire del testo libero su una sola riga
- <input
- type=“text/password”
- se type="password" le lettere sono visualizzate con *****
- name="nomelogico"
- value="valore iniziale di default"
- size="30" (lunghezza del campo espressa in n° di caratteri)
- maxlength="60" (n° massimo di caratteri consentiti)
- />
l'output sarà un campo in cui inserire il nome e uno dove inserire la password in cui i caratteri sono ***:
Inserire campi di testo
All’interno della form inseriamo:
- un campo per il nome
- un campo per l’email
- un campo per la password
- un campo di testo
Per inserire un campo di testo libero su più righe
- <textarea
- name=“nomelogico”
- cols=“50” (numero di colonne)
- rows=“6” (numero di righe>)
- Testo iniziale di default
- </textarea>
Comando <input>
- <input> type= “text” (campo di testo)
- type=“password”(spazio per la password)
- type=“radio”(campo radio button)
- type=“checkbox” (crea checkbox)
- type="button"
- crea un pulsante in cui la scritta che appare sul pulsante è il contenuto dell'attributo value="..." es: riscrivi <input type="button" value="riscrivi" />
- type=“submit”
- crea un pulsante in cui la scritta che appare sul pulsante è il contenuto dell'attributo value="..." es: invia
- type=“reset”
- crea un pulsante in cui la scritta che appare sul pulsante è il contenuto dell'attributo value="..." es: cancella
- />
Per inserire opzioni mutualmente esclusive
- <input type=“radio”
- name=“nomelogico”
- un gruppo di pulsanti di scelta devono condividere lo stesso nome affinché forniscano valori di selezione che si escludono a vicenda. Il nome non può contenere spazi o caratteri speciali.
- value=“valore di risposta del bottone”
- imposta il valore da inviare al server quando viene selezionato il pulsante di scelta.
- checked=“checked”
- bottone selezionato di default.
- />
Check box
Per inserire opzioni di selezione, anche multiple
- <input type=“checkbox”
- name=“nomelogico”
- value=“valore di risposta del bottone”
- Imposta il valore da inviare al server quando viene selezionato il pulsante di scelta.
- checked=“checked”
- bottone selezionato di default
- />
Submit e Reset
Invia: quando cliccato invia i dati della form
Cancella: quando cliccato cancella i dati
- <input type=“submit/reset”
- submit crea il pulsante di invio, reset quello di cancella
- name=“nomelogico del pulsante”
- value=“scritta che appare sopra il pulsante” (es: Invia o Cancella)
- />
Menu di selezione
Per creare dei menu pop-up a selezione singola o multipla
si usa il tag:
<select> </select>
- <select
- name=“nomelogico”
- size=“numero”
- quante opzioni del menu devono essere visualizzate prima che venga aperto.
- multiple=“multiple”
- permette la selezione multipla, altrimenti si ha la singola.
- >
- .....
- </select>
Per ogni riga del menu (opzione) si usa il tag:
<option> testo dell'opzione </option>
- <option value=“valore restituito”
- valore inviato al server quando viene selezionata la riga
- selected=“selected”
- riga selezionata di default
- >
- Testo che compare come voce del menu
- <option>
Label
Per renderele form più facilmente navigabili, si possono aggiungere alcuni elementi.
Ogni campo dovrebbe avere la sua label. Si usail tag label, con un attibuto “for” che lo associa ad un elemento della form;
<label for=“nome”>Nome</label>
Nota: name e id sono entrambi obbligatori!
id un elemento della form è essere abbinato al rispettivo label e può esseremanipolato con linguaggio di programmazione;
name un elemento della form può essere processato da qualunque linguaggio di programmazione server-side.
Fieldsets e legends
L'elemento fieldset raggruppa campi della form correlati, per esempio i vari elementi del nome (nome, cognome, etc.) o dell’indirizzo (via, città, CAP, provincia, Paese,etc.) usando il tag fieldset. Il tag fieldset può avere come elemento opzionale l'elemento legend, che serve per indicare una legenda per il raggruppamento ed è visualizzato sulla pagina.
Option groups
Il tag optgroup serve per raggruppare le opzioni in un menù di selezione. Richiede un attributo label, il cui valore è visualizzato dal browser come un’intestazione non selezionabile prima delle opzioni corrispondenti.
<form>
<fieldset><legend>Nome e cognome</legend>
<p><label for=“nome”>Nome</label><input type="text" name="nome" size="40"/>
<p><label for="cognome">cognome:</label><input type="text" name="cognome" id="cognome" size="30" /></p>
</fieldset>
<p><label for=“email”>email</label> <input type="text" name="email" size="40" />
<p><label for=“password”>password</label><input type="password" name="password" size="40" /></p>
<p>Inserisci un suggerimento: <p>br/> <p>textarea cols="70" rows="7" name="suggerimenti"><p>/textarea>
<p>Maschio<input type="radio" name="genere" value="Mascho"> Femmina <input type="radio" name="genere" value="Femmina"></p>
<fieldset><legend>Le tue scelte</legend>
<p>I tuoi interessi: <input name="interessi" type="checkbox" value="ristoranti" />ristoranti
<p>input name="interessi" type="checkbox" value="cocktail" />cocktail
<p>input name="interessi" type="checkbox" value="hotel" />hotel
<p>input name="interessi" type="checkbox" value="cucina" />cucina
<p>input name="interessi" type="checkbox" value="viaggi" />viaggi</p>
<p>Scegli la tua professione:
<select name="lavoro">
<option value="studente">Studente</option>
<option value="Maître">Maître</option>
<option value="Chef">Chef</option>
<option value="Barman">Barman</option>
<option value="Barman">Segretario</option>
<option value="Pizzaiolo">Pizzaiolo</option>
</select>
</p>
<p><labelfor="paese">Dove andresti in vacanza:</label>
<select name="nazione" id="regioni">
<optgroup label="Italia">
<option value="to">Torino</option>
<option value="pa">Palermo</option> </optgroup>
<optgroup label="Inghilterra">
<option value="lo">Londra</option>
<option value="le">Leicester</option> </optgroup>
</select></p>
</fieldset>
<fieldset><legend>Invia o annulla</legend>
<p><input type="submit" value="Invia" />
<p><input type="reset" value="Cancella" />
</fieldset>
</form>
Questo codice darà il seguente output; prova a digitare nei campi.
Html5 nuovi attributi e valori
Html5 introduce nuovi valori per l'attributo type, questi sono:
- url
- tel
- number
- date
- month
- time
Ognuno di questi valori ha la capacità di trasformare la tastiera dei moderni smartphone e tablet
Tra i diversi nuovi attributi placeholder (segnaposto) è un testo descrittivo, una parola o una frase breve, visualizzato nell'elemento che si deve compilare allo scopo di suggerire all'utente il contenuto del campo. Il testo scompare appena il campo riceve il focus e riappare appena si lascia il campo senza compilarlo.
Si applica a un input con type="text" o ad un elemento textarea.
<p><label for=“nome”>Nome</label><input type="text" name="nome" size="40" placeholder="inserisci il nome"/>
Form e CSS
Tutte le caratteristiche estetiche dei form come: font, color, background, border, layout ecc., possono essere stilizzate attraverso le proprietà CSS.
Tutorial X/HTML e CSS - Guida elaborata da: Bianchi Roberto - Spazioprever
