8 – form 4

Data

è un tag input di tipo data che apre un calendario sui browsers  che lo supportano.

<input type="date" name="data">

cambiando il type da date a datetime, viene aggiunta anche l’ora, secondo lo standard utc. se si vuole quella locale, bisogna mettere datetime-local

<input type="datetime-local" name="data">

Per questo campo gli attributi da ricordare sono: disable, autocomplete, autofocus, readonly e require. Si aggiungono specifici il min (data minima) e il max (data massima) e lo step, il passo che permette di definire gli incrementi di tempo sulle frecce su e giù dei controlli

<input type="datetime-local" min="2000-01-01" max="2017-12-31" step="360" name="data">

data minima 1 gennaio 2000, massima 31 Dicembre 2017 intervallo 360 secondi (6 minuti).

Altri input che si possono usare sono il month per il mese, il week per la settimana e il time per l’ora.

Il type number con min e max con I soliti attributi

il type range permette di ottenere uno slider con un cursore

il type email che permette di specificare un pattern (regular expression) in modo che dati inseriti rispecchino gli standard di una mail valida.

<input type="email" name="mail" pattern="">

il pattern serve per settare le espressioni regolari per i campi mail .

Analogamente il type url per search, tel, color.

Un tag interessante è l’input con l’attributo list che va a prendere i valori inseriti in un tag  <datalist>

<td>Browser utilizzato</td>
<td>
    <input list="elencoBrowser" name="browser" id="browser">
</td>
<datalist id="elencoBrowser">
    <option value="explorer"></option>
    <option value="safari"></option>
    <option value="opera"></option>
</datalist>

è tipo una select box, ma qui non sono obbligato a scegliere solo tra i valori, ma posso inserirli liberamente