Forme nel HTML5

Forme HTML rappresentano elementi di controllo che vengono utilizzati per raccogliere informazioni dai visitatori del sito web.

Moduli Web sono composti da una serie di campi di testo, pulsanti, elenchi e altri elementi che si attivano cliccando con il mouse. Tecnicamente forme trasmettono i dati da parte dell'utente al server remoto.

Per ottenere ed elaborare dati  dalle forme si utilizzano linguaggi di programmazione web come PHP, Perl.

video prevui

Prima dell'arrivo del HTML 4 e 5  forme web erano  rappresentati da una raccolta di diversi elementi <input type = "text">, <input type = "password">, e con il pulsante che le completava  <input type = "submit">. Per stilizare le forme  in diversi browser si dovuto affaticare un puo. Inoltre, le forme richiedevano l'uso della convalida dell'input da parte di JavaScript.

Con l'arrivo del HTML5  maggior parte dei problemi comuni sono stati risolti a causa della presenza di nuovi attributi, fornendo le possibilità piu vaste per modificare l'aspetto degli elementi di una forma tramite CSS3.

form html5

Creare forme nel HTML5

1. Elemento <form>

La base di ogni elemento form sono i tag <form> ... </ form>. Esso non prevede l'immissione di dati, dato che rappresenta semplicemente  un contenitore che tiene insieme tutti ellementi  di controlli – campi d'input. Attributi dell'elemento contengono informazioni comuni a tutti i campi della forma, quindi, in una blocco di forma si dovrebbe inserire gli campi legati  logicamente.

Tabella1. Attributi del tag <form>.

Attributo Descrizione /valore
accept-charset Il valore del attributo è un elenco di codifica dei caratteri separato da spazi, che verranno utilizzati per inviare il modulo, per esempio, <form accept-charset="ISO-8859-1">.
action Attributo obbligatorio, che indica url del gestore del modulo sul server, al quale vengono trasmessi i dati. Esso rappresenta un file (ad esempio, action.php), che descrive cosa fare con i dati del modulo.
Se tutto il lavoro verrà eseguito sul lato cliente tramite scenario in JavaScript, è possibile specificare per attributo action<-kbd> valore #.
Inoltre è possibile fare in modo che i dati dal modulo compilato dal visitatore vengono spediti per posta a voi. Per fare questo, si aggiunge la seguente stringa:
<form action="mailto:miacasella@diposta" enctype="text/plain"></form>
autocomplete Responsabile per la memorizzazione dei dati inseriti in precedenza per la loro visualizzazione come varianti nella prossima volta che si compila il modulo, cosi detta compilazione automatica :
on — significa che il campo non è protetto, e il suo valore può essere memorizzato e recuperato,
off — Disabilitare la compilazione automatica per i campi del modulo.
enctype E usato per indicare il tipo di MIME-dati inviati insieme con la forma, per esempio enctype="multipart/form-data".Si indica soltanto nel caso method="post".
application/x-www-form-urlencoded — tipo di contenuto predefinito indica che i dati trasmessi è un elenco di variabili di modulo con codifica URL. simboli di spazio (ASCII 32) saranno codificate come +,e i caratteri speciale, per esempio, come! Sarà codificato in formato esadecimale(è un sistema numerico posizionale in base 16, cioè che utilizza 16 simboli invece dei 10 )%21.
multipart/form-data — utilizzato per presentare forme, contenenti file, dati non ASCII e dati binari, è composto di più parti, ciascuna delle quali rappresenta il contenuto di un singolo elemento del modulo.
text/plain — indica che il testo che si sta per trasmettere è un testo normale (non HTML).
method Si specifica il metodo per trasmettere i dati del modulo.
Metodo get trasmette i dati al server tramite il browser. Quando si forma una query al server tutte le variabili ed i loro valori formano una sequenza di formawww.anysite.it/form.php?var1=1&var2=2. I nomi ei valori delle variabili vengono aggiunte dopo l'indirizzo del server dopo il segno ? e sono separate dal segno &. Tutti i caratteri speciali e caratteri diversi da quelli latini, sono codificati in un formato %nn, lo spazio è sostituito dal+. Questo metodo potrebbe essere utilizzato se non si trasmettono grandi volumi di informazioni. Se insime ali dati dal modulo si intende di spedire un fail, questo metodo non andrà bene.
Metodo post E 'utilizzato per trasferire grandi quantità di dati, così come informazioni riservate e le password. I dati inviati utilizzando questo metodo, non visibile nell'intestazione di URL, dato che vengono trasmessi di nascosto, “dietro le quinte” del browser.
<form action="action.php" enctype="multipart/form-data" method="post"></form>
name Indica il nome della forma, che sara utilizzato per accedere agli elementi di forma tramite script, ad esempio, name="domandario".
novalidate Disabilita verifica del pulsante per inviare il modulo. Attributo è utilizzato senza un valore
target Indica una finestra in cui sarà visualizzata la informazione inserita:
_blank — nuova scheda
_self — la stessa scheda del browser
_parent — nella scheda precedente scheda genitore (se esiste se no nella stessa scheda )
_top — il documento viene carictao nella parte più alta (“top”) della struttura, ed è questo il motivoper cui il frameset stesso viene annullato e sostituito dal contenutodel link

video prevui

2. Raggruppamento elementi del modulo.

Elemento <fieldset> ... </ fieldset> viene utilizzato per raggruppare gli elementi associati tra loro, dividendo così la forma in blocchi logici.

Ad ogni gruppo di elementi è possibile assegnare un nome utilizzando l'elemento <legend>, che arriva dopo il tag <fieldset>. Il nome del gruppo appare sul bordo superiore sinistro <fieldset>. Ad esempio, se in un elemento <fieldset> memorizzate le informazioni di contatto:

<form>
  <fieldset>
    <legend>Informazione di contatto</legend>
    <p><label for="name">Nome<em>*</em></label><input type="text" name="name"></p>
    <p><label for="email">E-mail</label><input type="email" name="email"></p>
  </fieldset>
<p><input type="submit" value="Spedire"></p>
</form>

fieldsetio

Tabella 2 Attributi del tag <fieldset>
Attributo Valore/Descrizione
disabled Se l'attributo è presente, il gruppo di elementi del modulo correlati che si trovano all'interno del contenitore, sono disabili per la scrittura e la modifica. E' usato per limitare l'accesso a determinati campi del modulo contenente i dati precedentemente inseriti. Attributo è utilizzato senza un valore — <fieldset disabled>.
name Specifica il nome che verrà utilizzato per fare riferimento al elementi in JavaScript, o per riferimento a queste forme dopo la compilazione e l'invio del modulo. Si tratta di un analogo dell'attributoid.

animatedDude

video prevui

 

3. Creazione campi della forma

Elemento <input>  crea la maggior parte dei campi del modulo. attributi dell'elemento variano in base al tipo di campo, che viene utilizzato per creare l'elemento.

Con i stili  CSS, è possibile modificare le dimensioni dei caratteri, il tipo di font, colore e altre proprietà del testo, aggiungere bordi, colore di sfondo o immagine di sfondo. La larghezza del campo è impostata dalla  proprietà width.

 

abella3. Attributi del <input>
Attributo Valore/descrizione
accept Specifica il tipo di file consentito per essere inviato al server. Indicato per solo<input type="file">. Valori ammissibili:
file_extension — permette il caricamento dei file con l'estensione specificata, ad esempio, accept=".gif", accept=".pdf", accept=".doc"
audio/* — permette l'invio di file audio
video/* — permette l'invio di file video
image/* — permette l'invio di file immagini
media_type — indica il tipo di media dei file caricati
alt Specifica un testo alternativo per le immagini, è indicato solo per <input type="image">.
autocomplete Responsabile per la memorizzazione dei dati inseriti in precedenza per la loro visualizzazione come varianti nella prossima volta che si compila il modulo, cosi detta compilazione automatica :
on — significa che il campo non è protetto, e il suo valore può essere memorizzato e recuperato,
off — Disabilitare la compilazione automatica per i campi del modulo.
autofocus Esso consente di fare in modo che il campo di input sara gia scelto(attivio con il puntatore dentro ) e pronto per inserimento dei dati.
checked Attributo imposta la selezione automatica iniziale di un campo di scelta al caricamento della pagina. Valido per per il tipo di campi type="checkbox" e type="radio".
disabled Disabilitare la possibilità di modificare e copiare i contenuti del campo.
form Il valore dell'attributo deve essere uguale all'attributo id del elemento <form> nello stesso documento. Specifica una o più forme, alle quale appartiene questo campo della forma.
formaction Indicaurl del fail, che elaborera i dati inseriti nei campi dopo l'invio del modulo. Può essere impostato solo per il tipo di campi type="submit" e type="image". Attributo sostituisce il valore dell'attributo action della forma stessa .
formenctype Esso determina come saranno codificati i dati dei campi del modulo per l'invio al server. Sostituisce attributo del modulo enctype. Può essere impostato solo per di campi con il tipoenctype della forma. Può essere impostato solo per il tipo di campi type="submit" и type="image". Varianti:
application/x-www-form-urlencoded — il valore di default. Tutti i simboli sono codificati prima dell'invio (gli spazi vengono sostituiti dal simbolo +, I caratteri speciali vengono convertiti in valori ASCII HEX)
multipart/form-data — simboli non vengono codificati
text/plain — spazi vengono sostituiti dal simbolo +, e caratteri speciali non vengono codificati.
formmethod L'attributo specifica il metodo che il browser utilizza per inviare i dati dal modulo al server. Può essere impostato solo per il tipo di campi type="submit" e type="image". Sostituisce il valore dell'attributomethod della forma. Varianti:
get — il valore di default. I dati del modulo (coppie nome / valore) vengono aggiunti a URL-indirizzo e inviati al server: URL?nome=valore&nome=valore
post — i dati dal modulo vengono inviati sotto forma di http-domanda/td>
formnovalidate Specifica che i campi dei dati del modulo non devono essere controllati al invio della forma. Sostituisce il valore dell'attributo novalidate della forma. Può essere utilizzato senza un valore di attributo.
formtarget Determina dove visualizzare la risposta ricevuta dopo l'invio del modulo. Può essere impostato solo per il tipo di campi type="submit" e type="image". Sostituisce il valore dell'attributo target della forma
_blank — nuova scheda
_self — la stessa scheda del browser
_parent — nella scheda precedente scheda genitore (se esiste se no nella stessa scheda )
_top – carica risposta in una scheda sopra altre a tutta finestra del browser
framename – carica il contenuto in un frame(sceda) con il nome specificato
height Valore del attributo contiene il numero di pixel per altezza senza specificare la parola pixel. Imposta l'altezza di campo modulo del tipo type="image", per esempio, <input type="image" src="/img_submit.gif" height="50">. Si raccomanda di specificare contemporaneamente sia altezza sia larghezza del campo.
list È il riferimento all'elemento <datalist>, contiene il suo id.Esso consente di fornire all'utente diverse opzioni di sceglta quando lui comincia a inserire valori nel campo appropriato.
max Consente di impostare limite al valore numerico massimo da inserire nel campo, il valore di attributo può contenere un numero intero o numero frazionario. Si raccomanda d'utilizzare questo attributo con l'attributomin. Funziona con i seguenti tipi di campi: number, range, date, datetime, datetime-local, month, time и week.
maxlength Imposta il numero massimo di caratteri immessi nel campo. Il valore predefinito è di 524288 simboli.
min Esso consente di impostare il valore minimo per i dati numerici che si possa inserire nel campo.
multiple La sua presenza consente all'utente di inserire più valori di attributi, separati da virgole. Si usa per fail ed e-mail della posta elettronica. Si usa senza valore del attributo.
name Specifica il nome che verrà utilizzato per accedere a un elemento <form>, ad esempio, negli tabelle di stili css. Analogo del tag id.
pattern Consente di definire valori ammessi per inserimento nel input. Ad esempio, pattern="[a-z]{3}-[0-9]{3}" — parentesi quadrati indicano valori ammissibili per un campo input e il valore nelle figurate la quantità obbligatoria di questi valori dopo segue un trattino e di nuovo valori ammessi fra le parentesi quadrarti che possono essere qualsiasi cifra da 0 a 9 compreso e di queste valori come vediamo dalla cifra 3 fra le figurate debbono esserci 3.
placeholder Contiene il testo visualizzato nella casella di input (spesso un suggerimento).
readonly Non permettere all'utente di modificare i valori degli elementi di campo, selezionare, cancellare o copiare il testo disponibile.
required Visualizza un messaggio che il campo è obbligatorio ad compilare. Se l'utente tenta di inviare il modulo senza scrivere in questo campo il valore desiderato, vera mostrato un messaggio di avviso.
size Specifica la larghezza visibile del campo in simboli. Valore di default - 20. Compatibile con i seguenti tipi di campi:text, search, tel, url, email e password.
src Indicaurl dell'immagine che viene utilizzata per lo sfondo del bottone invia. Viene indicato soltanto per il campo <input type="image">.
step Utilizzato per elementi che coinvolgono l'inserimento di valori numerici, indica il passo di aumento o di diminuizione del valore nel campo (passo).
type button — crea un pulsante.
checkbox —crea il campo che può essere selezionato o deselezionato, ad esempio,
Ho un automobile
color — genera una tavolozza di colori nei browser che lo consentono, dando agli utenti la possibilità di scegliere i valori di colori in formato esadecimale..
date — Esso consente di inserire la data nel formato giorno.mese.anno.
Data di nascita:
datetime-local — Esso consente di inserire la data e l'ora che vengono separatida la lettera maiuscola inglese T modello giorno.mese.anno ora:minute.
Data di nascita -giorno e ora:
email — I browser che supportano questo attributo aspetterano che l'utente inserisce i dati corrispondenti alla sintassi di indirizzi e-mail.
E-mail:
file — Esso permette di caricare file dal computer.
Scegli il fail :
hidden — nasconde un elemento di controllo che non viene visualizzata dal browser e non permette all'utente di modificare i valori di default.
image — crea un pulsante, e permette al posto di un semplice testo inserire un'immagine.
month — Consente all'utente di inserire l'anno e il numero del mese seguendo il modello aaaa-mm.
number — destinato per inserimento dei valori numerici interi. suoi attributi min, max e step impostano i limiti superiore e inferiore del passo tra i valori rispettivamente. Questi attributi validi per tutti gli elementi che hanno valori numerici. I loro valori di default dipendono dal tipo di elemento.
Indica quantità (da 1 a 5):
password — crea campi di testo in forma, dove i simboli inseriti dell'utente vengono sostituiti con asterischi, o altre icone predefiniti dal browser.
Введите пароль:
radio — crea cosi detti bottoni radio - l'elemento di controllo nella forma di un piccolo cerchio, che può essere attivato o disattivato.
Sei vegetariano:
range — creerà un elemento di interfaccia come cursore, min / max - permettono di impostare la gamma di scelte
reset — Crea un pulsante che cancella i dati nei campi del modulo inseriti dall'utente.
search — specifica il campo di ricerca, il campo di default è rettangolare.
Поиск:
submit — Crea un pulsante standard cliccabile. Pulsante raccoglie informazioni dal modulo e li invia al fail che li ellebora.
text — Crea un campo di testo in forma di una casella di una sola riga per inserire del testo..
time — Consente di inserire il valore del tempo in formato di 24 ore hh:mm. Nel browser che supportato, esso appare come un campo di input con la possibilità di inserire solo i valori numerici e che si possa modificarli con la rotellina del mouse.
Indicare l'orario :
url — campo consente di specificare l'URL-indirizzi.
Pagina principale:
week — strumento-indicatore che consente all'utente di selezionare una settimana l'anno, dopo di che mostrerà i dati della settimana indicata nel formato settimane(nn)-anno(aaaa)a. A seconda del anno può essere 52 o 53 settimane.
Indicare settimana:
value Specifica il testo visualizzato sul pulsante, sul campo o testo coerente. Non si specifica per i campi del tipo fail.
width Valore dell'attributo contiene il numero in pixel. Esso consente di impostare la larghezza dei campi del imput o forma..

 4. Campi di testo

L'elemento <textarea> ... </ textarea> viene usato al posto di <input type = "text">, quando è necessario creare un grande campo di testo. Le dimensioni del campo vengono impostate utilizzando l'attributo cols - il  orizzontale, e attributo rows  - in verticale. L'altezza del campo, posimo regolare tramite l'attributo height. Tutte le dimensioni vengono calcolati in base della dimensione di un carattere del font monospazio.

Tabella 4. Attributi del tag <textarea>
Attributo Valore / descrizione
autofocus Imposta il focus sul campo di input desiderato in automatico.
cols Imposta la larghezza per il numero di caratteri. Se l'utente immette più testo, appare la barra di scorrimento.
disabled Disabilita la possibilità di modificare e copiare i contenuti del campo.
form Il valore dell'attributo deve essere uguale al valore dell'attributo id
nello stesso documento. Specifica una o più forme, a quale appartiene questa casella di testo.
maxlength Il valore è il numero massimo di caratteri da inserire nel campo.
name Imposta il nome del campo
placeholder Indica cio che l'utente dovrebbe scrivere nel campo
readonly Disabilitare la possibilità di modificare il contenuto del campo.
required Viene visualizzato un messaggio che indica che il campo è obbligatorio da compilare.
rows Specifica il numero di righe che devono essere visualizzati nell'area di testo.
wrap Esso determina se il testo deve mantenere le interruzioni di riga quando il modulo vine inviato. Il valore hard mantiene il trasferimento, e il valore soft non mantiene. Se si utilizza il valore hard, allora dovrebbe essere indicato anche un valore per la attributo cols.

5. Elenco a tendina

Liste permettono di raggruppare compatto un gran numero d'ellementi. Elenchi a tendina vengono creati utilizzando l'elemento <select> ... </select>. Essi consentono di selezionare uno o più valori dal set proposto. Per impostazione predefinita, nella casella viene visualizzata la prima voce.

Per aggiungere elementi alla lista si utilizza il tag <option> ... </ option>  che deve trovarsi all'interno del <select>.

Per ordinare le liste si utilizzata elemento <optgroup> ... </ optgroup>, che crea le intestazioni per elenchi ragruppati.

Con questo tipo di elenchi posiamo fare tutte le  modifiche, per esempio cambiare colore, aggiungere bordi, tipo di fon e cosi via, come lo facciamo con  una lista normale .

Tabella 5. Attributi del tag <select>
Attributi Valore/ descrizione
autofocus Esso consente di fare in modo che il campo di input sara gia scelto(attivio con il puntatore dentro ) e pronto per inserimento dei dati.
disabled Disabilitare l'elenco a tenda.
form Specifica la forma alla quale appartiene la lista. Come valore dell'attributo viene indicato ID della forma.
multiple Esso consente di selezionare uno o più elementi dalla lista per questo quando si scegle si dovrebbe premere e tenere premuto il tasto Ctrl.
name Specifica il nome del'elenco a tenda. Il valore dell'attributo contiene un nome che rispecchia il tema della lista.
required Visualizza un messaggio che l'utente deve selezionare un ellemento dall'elenco a tenda prima di inviare il modulo.
size Specifica il numero di elementi visibili nella schermata dell'elenco. Se il numero di elementi nella lista supera il numero indicato, appare la barra di scorrimento. Il valore è un numero intero positivo.
Tabella6. Attributi del tag <option>
Attributo Valore / descrizione
disabled Rende impossibile selezionamento della voce.
label Specifica la versione ridotta del elemento, che sarà visualizzato nella lista a tendina. Valore del'attributo contiene il testo che descrive rispettivo elemento dalla lista a tendina.
selected Esso mostra l'elemento predefinito selezionato dell'elenco al caricamento della pagina nel browser.
value Specifica il valore del tagnel nostro caso che sarà inviato al server al invio del modulo.
Tabella 7. Attributi del tag <optgroup>
Attributi Valore / Descrizione
disabled Disabilita la possibilità di scelta del gruppo.
label Imposta il titolo per un gruppo di elementi nell'elenco a tendina. Valore del'attributo contiene il testo che non è disponibile per la selezione, che sarà situato sopra rispettivi voci d'elenco. Il testo viene evidenziato in grassetto del browser.

 

6. Etichetta per un raggruppamento di campi.

Elementi di etichettatura del modulo vengono creati utilizzando l'elemento <label> ... </ label>. Ci sono due modi per creare una etichetta per i campi di gruppo. Se il campo è all'interno dell'elemento <label>, l'attributo for non è necessario.

<!-- con indicazione del attributo for -->
<label for="comments">Quando è stata l'ultima volta che hai volato su un aereo?</label>
<textarea id="comments"></textarea>
<!-- senza attributo for -->
<p><label>Ricerca<input type="search" name="site_search"></label></p>

Tabella 8. Atributi del tag <label>
Attributo Valore / descrizione
for Determina al quale input di forma è allegato questo elemento. È possibile creare etichette che spiegano i seguenti elementi del modulo: <input>, <textarea>, <select>. Valore dell'attributo contiene l'identificatore del campo del modulo.
form Definisce una o più forme, a cui appartiene l'elemento. Il valore di attributo è l'identificatore della rispettiva forma(input).

7.Bottoni

Elemento <button> ... </ button> crea un pulsante cliccabile. A differenza di pulsanti creati con <input> (<input type = "submit"> </ input>, <input type = "image">, <input type = "reset">, <input type = "button">), all'interno dell'elemento <button > si può mettere il contenuto - testo o immagine.

Per visualizzare correttamente l'elemento <button>  browser richiedono di specificare l'attributo type, ad esempio, <button type="submit"></button>.

Bottoni consentono agli utenti di trasmettere i dati dalla forma, cancellare il contenuto della forma o fare qualsiasi altra azione. È possibile creare bordi, cambiare lo sfondo e allineare il testo sul pulsante.

 

 

Tabella 9. Attributi del tag <button>
Attributo Valore / Descrizione
autofocus Imposta lo stato attivo al pulsante al caricamento della pagina.
disabled Disabilita il pulsante, rendendolo in cliccabile.
form Indica uno o più moduli, ai quali appartiene pulsante. Il valore di attributo è identificatore del rispettivo modulo.
formaction Il valore dell'attributo contiene l'URL-indirizzo del gestore della forme al quale vengono spediti i dati dalla forma dopo il clic sul pulsante. Solo per il tipo di pulsantetype="submit". Sostituisce il valore dell'attributo action, indicato per elemento <form>.
formenctype Specifica il tipo di codifica dei dati del modulo prima di inviarli, soltanto per i bottone del tipo type="submit". Esso sostituisce l'attributo enctype, specificato per l'elemento <form>. Valori possibili:
application/x-www-form-urlencoded — il valore di default. Tutti i simboli saranno codificati prima dell'invio.
multipart/form-data — simboli non vengono codificati. Viene utilizzato quando con aiuto del modulo vengono caricati dei fail
text/plain — simboli non vengono codificati, e gli spazi sono sostituiti dal simbolo +.
formmethod L'attributo specifica il metodo che il browser utilizza per inviare il dati dal modulo. Sostituisce il valore dell'attributomethod, indicato per elemento <form>. Soltanto per i bottoni del tipo type="submit". Valori ammissibili:
get — i dati dal modulo (coppie nome / valore) vengono aggiunti alla URL-indirizzo e inviati al server. Questo metodo ha limitazioni sulla dimensione dei dati da inviare e non va bene per l'invio di informazioni confidenziali e password.
post — dati dal modulo vengono aggiunti sotto forma di http-quei(domanda). Il metodo è più affidabile e sicuro rispetto get e non ha limiti di dimensione.
formnovalidate Attributo specifica che i dati del modulo non devono essere controllati prima del invio. Applicabile solo ai tipi di pulsanti type="submit".
formtarget Attributo imposta in quale scheda del browser saranno visualizzati i dati ricevuti dal modulo. Applicabile solo ai tipi di pulsanti type="submit". Sostituisce il valore dell'attributo target, indicato per elemento <form>.
_blank — carica la risposta in una nuova finestra / scheda
_self — carica risposta nella stessa finestra (da default)
_parent — carica risposta nella finestra principale
_top — risposta viene visualizzata a schermo intero
framename — carica il contenuto in un frame con il nome specificato.
name Specifica il nome del pulsante, il valore dell'attributo - testo. Utilizzato per fare riferimento al modulo dati, dopo che i dati della forma sono stati inviati, o per fare riferimento a questo pulsante (bottone)in JavaScript.
type Si specifica il tipo di bottone. I valori possibili sono:
button — semplice bottone
reset — bottone per cancelare i dati inseriti, si ritorna allo stato iniziale
submit — pulsante per invio dei dati dalla forma.
value Specifica il valore di default che viene inviato quando si preme bottone.

E alla fine un video per capire la differenza fra metodi di invio dati dalla forma GET e POST

Letto 1030 volte