Guida pratica ai form html5

Vediamo come aggiungere un form a una pagina web per raccogliere dati dall'utente.

Cominciamo a studiare gli elementi del form html più semplice come il tag <input> <label> e il pulsante <submit>

Studiamo l'attributo method del form html. Con il metodo GET i dati sono inviati in chiaro via URL al server mentre che con il metodo POST i dati non si vedono nella URL ma nel corpo della richieta http di tipo POST al server

Vediamo come aggiungere il tag <button> per inviare i dati di un form, oppure usare l'input di tipo submit.

Con INPUT di type reset possiamo reimpostare i dati del form

Con il tag <fieldset> Possiamo raggruppare campi del form che siano simili. L'elemento <legend> ci serve per aggiungere una descrizione al fieldset

In questa lezione studieremo gli attributi principali del tag input: name, id, class, disabled, type, placeholder

Con il tag input di html di tipo hidden, possiamo passare dati nascosti al server. Dati che l'utente non immette direttamente ma che possono essere importanti come un token di sicurezza oppure l'id del record che si sta modificando.

<input type="hidden" name="token" value="zxcxx$£$£$£$£"$£$££dDFDFDf">

Input di tipo password è come quello di tipo text ma i caratteri scritti sono mascherati con degli asterischi

<input type="password" name="passwd">

Input di tipo radio ci permette di fare una scelta tra vari valori. Dobbiamo dare lo stesso nome ai diversi input di tipo radio in modo che siano auto esclubile:

<input type="radio" value="M" name="sex">

<input type="radio" value="F" name="sex">

Input ti tipo checkbox ci permette selezionare più di un valore di una certa categoria:

<label>Linguaggi programmazione conosciuti</label>

<input type="checkbox" name="programs[]" value="PHP">

<input type="checkbox" name="programs[]" value="JSP">

<input type="checkbox" name="programs[]" value="JAVA">

<input type="checkbox" name="programs[]" value="PYTHON">

In questa lezione studieremo il tag select. Vedremo come aggiungere gli option, l'attributo value

Studieremo come formattare le combo usando i fogli di stile

Se aggiungiamo l'attributo multiple a una lista potremo selezionare più di un elemento:

<select name="programs[]" multiple>

<option value="php">PHP</option>

<option value="jsp">JSP</option>

<option value="java">JAVA</option>

<option value="C++">C++</option>

</select>

In questa lezione vedremo come raggruppare le opzioni di una combo select usando il tag <optgroup>

Con l'elemento <textarea> diamo la possibilità di aggiungere più testo in varie righe:

Con l'attributo cols indichiamo il numero di colonne e con l'attributo rows il numero di righe

<textarea cols="60" rows="12"></textarea>

Con l'elemento <datalist> possiamo indicare o suggerire i valori che un campo input può avere.

Dobbiamo aggiungere l'attributo list al tag input indicando l'ID del datalist cui fa riferimento

<input type="text" name="states" list="stateList">

<datalist id="stateList">

<option value="FL" label="FLORIDA">

<option value="NY" label="New York">

</datalist>

Vediamo come suggerire, soprattutto per i tablet e telefonini, alla tastiera il tipo di tastiera da mostrare a seconda l'attributo type dell'elemento input:

<input type="url">

<input type="tel">

<input type="number" min="1" max="69">

<input type="range" name="age" min="18" max="120">

Vediamo come possiamo aggiungere un calendario come tipo input usando l'attributo date. Vedremo anche che possiamo utilizzare l'attributo dell'elemento input datetime e datetime-local, time, week, month, per indicare diversi tipi di valore di tempo

Vediamo come aggiungere un color picker usando l'attributo color. Selezionando un colore il campo input si popola con il valore esadecimale del colore selezionato

Stdiamo il formato JSON: JavaScript Object Notation

Vediamo come inviare dati in formato JSON ad uno script php

Vedremo come installare NODEJS per processare i form html

Vedremo come installare il web server xamp con php e mysql