aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Con la llegada de HTML5, que parece estar planificada … ¿para 2022?. Traerá muchísimas novedades, como para no traerlas con el tiempo que queda.

Una de las que más me ha llamado la atención ha sido este borrador de Web Forms 2.0, que pretende ser una muestra de lo que serán los formularios del futuro, ya que los actuales comienzan a quedarse cortos y se ha de abusar de javascript para paliar ciertas carencias que podrían estar incluidas en el navegador.

Hay muchas modificaciones, pero especialmente me ha gustado las extensiones que van a sufrir los elementos <input />, los más importantes de nuestros formularios.

Nuevos tipos

Para ampliar las capacidades de estos elementos se han planteado una serie de tipos que describimos a continuación:

• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url

Con estos nuevos tipos de elementos, sumados a los actuales (submit, file, button, radio,…) podemos hacer cosas como estas con únicamente 2 líneas.

<p>
  <label for="time1"> Preferred delivery time: </label>
  <input id="time1" name="time1" type="time" min="08:00" max="17:00" value="08:00" /> —
  <input id="time2" name="time2" type="time" min="08:00" max="17:00" value="17:00" />
 </p>

De esta forma, estamos indicando que se trata de 2 elementos de tipo tiempo y que los rangos entre los que nos permiten definir sus valores van desde las 8:00 a las 17:00… se acabó el Javascript necesario para controlar los valores que introducimos.

Al ser el navegador el que se encarga de dicho control, podemos dedicar nuestros esfuerzos a otros menesteres más interesantes.

Nuevos atributos

Mediante la incorporación de una serie de atributos nuevos podremos realizar interesantes combinaciones, enriqueciendo nuestras aplicaciones sin necesidad de hacer que nuestro código crezca.

• min
• max
• step
• pattern
• required
• form
• autocomplete
• autofocus

<input type="date" min="1900-01-07" step="7" name="sunday" >

Sin duda el atributo más interesante, o por lo menos uno de los que más van a dar de sí es pattern, ya que nos permitirá definir una expresión regular y el <input /> validará que el valor que introduzcamos no se salga de dicho patrón.

<label> Credit Card Number:
 <input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

Con required haremos que un elemento sea imprescindible para que nuestro formulario pueda ser procesado. Algo que hasta ahora hacíamos con Javascript.

<li><label> Name: <input type="text" name="name" required="required" /></label></li>

Con la inclusión del atributo form, podremos indicar a que formulario (o formularios) obedece un elemento <input />, quizás este punto es un poco delicado ya que creo que podría romper la semántica del código informando un elemento <input /> en un lugar distante del formulario, haciendo perder la idea de la estructura actual.

<form id="edit1">
<input form="edit2" type="text" name="value"/>
<input form="edit1" type="submit" name="Edit"/>
</form>
...
<form id="edit2">
...
</form>

En definitiva, una gran cantidad de cambios que de aquí al 2022 podremos ir viendo 😀