HTML5: nuovi attributi per i campi di tipo input

Come visto nei giorni precendenti in Html5 sono state introdotte numerosissime novità utili a snellire, migliorare e controllare l'oggetto modulo (form). Dopo aver visto i campi di tipo input esaminiamo i nuovi attributi per i campi di tipo input.

autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step



Autocomplete:
può assumere valore on oppure off, opera sugli input text, search, url, tel, email, password, datepickers, range, e color. Opera sui valori memorizzati in locale dal browser.

Autofocus
Imposta il focus sul campo a cui viene attribuito al caricamento della pagina

Form
Permette di posizionare fuori dal tag un campo che comunque appartiene al form e verrà dunque processato con esso
<input type="text" name="nickname" form="nome_del_mio_form">

Formaction
Opera su input type="submit" e type="image", permette di impostare un secondo bottone di invio con action diversa da quella indicata nel tag form.
<input type="submit" formaction="demo_admin.php" value="Invia come amministratore">

Formmethod
Come il precedente ma interviene sul metodo di trasmissione dati.
<input type="submit" formaction="demo_admin.php" formmethod="get" value="Invia come amministratore in get">

Formnovalidate
Come i due precedenti ma interviene non validando all'invio.
<input type="submit" formaction="demo_admin.php" formmethod="get" formnovalidate value="Invia come amministratore in get senza validare">

Formtarget
Anche questo attributo sovrascrive quello del form e determina l'apertura del 'risultato' in una nuova finestra.
<input type="submit" formtarget="_blank" value="Invia in nuova finestra">

Height e width
Opera solo sul campo type="image", permette al browser in fase di caricamento di riservare lo spazio necessario all'immagine (stessa funzione degli attributi del campo img)

List
In 'cooperazione' con il nuovo datalist permette di cotruire un campo input con valori predefiniti
<input list="paesi">
<datalist id="paesi">
<option value="Italia">
<option value="Spagna">
<option value="Francia">
<option value="Gran Bretagna">
<option value="Irlanda">
</datalist>

Min e max
Operano con i campi number, range, date, datetime, datetime-local, month, time e week, e permettono di definire i valori mini e massimi accettati.
<input type="number" name="quantita" min="1" max="37">

Multiple
Opera con i campi email e file, permette all'utente di inserire più di un valore.
<input type="file" name="img" multiple>

Pattern
Opera con i campi text, search, url, tel, email e password.
Utilizza le regular expression Javascript per validare un dato inserito
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Inserire codice paese massimo tre caratteri">

Palceholder
Testo interno al campo che suggerisce il contenuto da inserire
<input type="text" name="nickname" placeholder="scegli il tuo nick">

Required
Contenuto obbligatorio
<input type="text" name="nickname" placeholder="scegli il tuo nick" required>

Step
Opera con i campi number, range, date, datetime, datetime-local, month, time e week.
Obbliga l'utente a scglere un valore multiplo del valore inserito come step.

<input type="number" name="voto" step="10">