Il sito per imparare gratuitamente a fare pagine Web

Input Type Forms di HTML5

Questa guida è stampabile in modo agevole dalla versione PDF presente nel menù laterale alla voce - download pdf -
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

Nuovi Type per Input.

HTML5 ha introdotto nuovi type di input per i moduli o forms, a dire la verità di alcuni se ne sentiva davvero il bisogno, peccato che facendo delle verifiche non tutti i browser li supportano. Provate ad immaginare qual'è il browser che più di tutti gli altri non vuol saperne di queste novità? Proprio lui l'ormai famigerato IE, e poco importa se è arrivato alla versione 10. Vorrei ricordare che in questa guida vengono mostrati soltanto i type che sono una novità per gli input di HTML5, dando per scontato che voi conosciate già anche gli altri di HTML precedenti, se così non fosse, su web-link ci sono guide per tutti i livelli di conoscenza, principianti compresi, grazie alle quali sarà possibile comprendere al meglio lo scopo ed il significato di questi nuovi elementi introdotti da HTML5.

Di seguito la descrizione con esempi dei nuovi type usabili con input nei forms che per default è text, libero testo. Nelle attuali versioni di alcuni browser non tutti sono riconosciuti.

su
 

color

Il type color permette di selezionare un colore da una tavolozza di colori predefiniti o direttamente dal suo codice in #esadecimale.

<input type="color">

Questo il risultato:

:

esempio color

color è supportato dai browser FireFox Opera e Chrome.



su
  

date

Il type date permette di selezionare la data direttamente da un calendario grafico generato dal browser.

<input type="date">

Questo il risultato:

:

esempio cdate

date è supportato dai browser Opera, Chrome e Safari, anche se in modi leggermente differenti, per esempio Opera, a differenza di Chrome, una volta selezionata la data col click, questa viene introdotta nel box nel formato americano: anno, mese e giorno.



su
 

datetime

Il type datetime permette di selezionare la data e l'ora con l'aggiunta dell'informazione del fuso orario.

<input type="datetime">

Questo il risultato:

:

esempio datetime

datetime è supportato dai browser Opera e Safari, anche se in modi leggermente differenti, per esempio Safari scrive all'interno del box i riferimenti del fuso orario.



su
 

datetime-local

Il type datetime-local permette di selezionare la data e l'ora locale, cioè senza informazioni sul fuso orario presente in datetime.

<input type="datetime-local">

Questo il risultato:

:

esempio datetime-local

datetime-local è supportato dai browser Opera e Safari.



su
 

email

Il type email permette di inserire un indirizzo email, al suo invio viene eseguita una validazione.

<input type="email">

Questo il risultato:

:

esempio email

Provate ad inserire una qualsiasi cosa priva della chiocciola che contraddistingue un indirizzo email valido.
email è supportato dai browser FireFox Opera Chrome.



su
 

month

Il type month permette di selezionare il mese e l'anno direttamente da un calendario grafico generato dal browser.

<input type="month">

Questo il risultato:

:

esempio month

month è Supportato dai browser Opera e Safari.



su
 

number

Il type number permette di selezionare un numero anche tramite pulsantini grafici al lato o all'interno del campo input.

<input type="number">

Questo il risultato:

:

esempio number

number è Supportato dai browser FireFox Opera Chrome.
Negli smartphone richiama direttamente la tastiera numerica del telefonino.



su
 

range

Il type range permette di selezionare un valore numerico semplicemente spostando un cursore grafico. Ovviamente non viene considerato importante il suo valore, essendo espresso graficamente risulterà solo indicativo.

<input type="range" min="1" max="10">

Questo il risultato:

:

esempio range

In questo esempio è stato inserito l'attributo min e max per dare un senso alla scala di valori.
range è supportato dai browser FireFox Opera Chrome Safari.



su
  

search

Il type search identifica un campo di ricerca, interna al sito o esterna in rete. Apparentemente sembra un campo come altri ma il browser lo distingue assegnandogli maggiore accessibilità. Chi ha un browser Chrome potrà notare che non appena si inizia a scrivere qualcosa al suo interno, appare una X azzurra di lato che serve per cancellare quanto già scritto.

<input type="search">

Questo il risultato:

:

esempio search

search è supportato dai browser Chrome e Safari.



su
 

tel

Il type tel permette di inserire numeri adoperando la tastiera del telefono, ne consegue che questo tipo di input, apparentemente identico ad altri, viene sfruttato a dovere dagli smartphone.

<input type="tel">

Questo il risultato:

:

tel attualmente nessun browser lo supporta. Negli smartphone richiama direttamente la tastiera numerica del telefonino.



su
  

time

Il type time permette di selezionare l'ora senza l'informazione del fuso orario.

<input type="time">

Questo il risultato:

:

esempio time

time è supportato dai browser Opera Chrome Safari.



su
 

url

Il type url permette di inserire un URL valido, al suo invio viene eseguita una validazione.

<input type="url">

Questo il risultato:

:

esempio url

Provate ad inserire una qualsiasi cosa, Opera aggiunge al vostro testo http:// mentre Chrome e FireFox vi segnalano che non è un URL.
url è supportato dai browser FireFox Opera Chrome.



su
  

week

Il type week permette di selezionare la settimana e l'anno direttamente da un calendario grafico generato dal browser.

<input type="week">

Questo il risultato:

:

esempio week

week è supportato dai browser Opera e Safari anche se in modalità grafica differente.



su

Gli input type: number, range, date, datetime, datetime-local, month, time e week accettano come attributi: step, min- max e value spiegati insieme ad altri nuovi attributi nella prossima lezione.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi