HTML5. Nous Atributs per input

HTML5 té nous atributs per <form> i <input>.

Nous atributs per <form>:

• autocomplete
• novalidate

Nous atributs per <input>:

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

Per realitzar validacions de camps són interessants els atributs required, pattern i placeholder.

Amb l'atribut required obligem a l'usuari a introduir algun tipus de valor. És un atribut booleà. Funciona amb els següents tipus de camps: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Però de fet, si volem validar si l'usuari ha entrat un valor correcte, hem de treballar conjuntament amb l'etiqueta pattern, L'atribut pattern valida mitjançant expressions regulars l'entrada que s'ha realitzat al camp.

Per exemple,si volem que en un camp que recollim el número de DNI ( sense la lletra) , el primer que faríem es usar un camp number i mitjançant una expressió regular que fossin 8 números, seguit d'una lletra majúscula:

"\d{8}[A-Z]{1}" 

El caràcter \d ens indica que volem un número entre el 0 i el 9 i entre claus que el número ha de tenir 8 posicions, seguit d'una lletra entre la A i la Z majúscula-

Amb placeholder podem suggerir a l'usuari com ha d'omplir el camp

Amb title construim el missatge d'error.

DNI

<input required type="text" name="DNI"  pattern="\d{8}[A-Z]{1}" title="Has d'introduir un número de 8 posicions" placeholder="8 números i 1 lletra majúscula" />

Podeu aprendre més sobre expressions regulars aquí