{"id":7643,"date":"2021-12-18T06:57:04","date_gmt":"2021-12-18T06:57:04","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7643"},"modified":"2021-12-23T19:12:40","modified_gmt":"2021-12-23T19:12:40","slug":"tipos-de-campos-disponibles-en-html5-para-tus-formularios","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/","title":{"rendered":"Tipos de campos disponibles en HTML5 para tus formularios"},"content":{"rendered":"

En este tutorial vas a descubrir en detalle la funcionalidad de los controles de formulario m\u00e1s recientes.<\/p>\n

Te har\u00e9 conocer algunos tipos de input nuevos, los cuales fueron a\u00f1adidos en HTML5 para permitir la recolecci\u00f3n de tipos de datos espec\u00edficos.<\/p>\n

Tambi\u00e9n incluir\u00e9 los tipos de campos que se han utilizado toda la vida.<\/p>\n

El objetivo de este tutorial es darte a conocer los tipo de campos disponibles para crear controles de tus formulario.<\/p>\n

Adem\u00e1s, de c\u00f3mo implementarlos utilizando HTML sin necesidad de utilizar plugins adicionales que pueden hacer retardar la carga de la p\u00e1gina.<\/p>\n

Campo de tipo texto<\/h2>\n

Este tipo de campo ha existido desde los inicios de HTML.<\/p>\n

Lo incluyo en esta lista porque, en realidad, es uno de los m\u00e1s utilizados.<\/p>\n

Los campos de tipo texto permiten al usuario agregar texto simple como por ejemplo pudiera ser el nombre, apellidos, entre otros.<\/p>\n

Agregar un campo de tipo texto en tus formularios se consigue de la siguiente forma:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>input type=<\/span>"text"<\/span> name=<\/span>"firstname"<\/span> placeholder=<\/span>"Nombre"<\/span>><\/span><\/pre><\/div><\/div>\n
El atributo \u00abplaceholder\u00bb es interesante usarlo cuando prefieres hacer un dise\u00f1o sin la etiqueta <label> donde se suele incluir que debe rellenar el usuario para este campo. Con \u00abplaceholder\u00bb, esta informaci\u00f3n ya dentro del mismo campo. Al ubicarte en el campo, ese texto desaparece para que puedas rellenar el contenido.<\/p>\n
Campo de tipo correo electr\u00f3nico<\/h2>\n
Los campos de tipo email se utilizan sobre todo en formularios de registro de usuarios.<\/p>\n
El campo email es clave para identificar los usuarios como \u00fanicos.<\/p>\n
Podr\u00eda ser posible pero, no me imagino un formulario de registro de usuarios sin el campo email.<\/p>\n
Este tipo de campo se define utilizando el valor email en el atributo type del elemento <input>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"email"<\/span> id<\/span>=<\/span>"email"<\/span> name<\/span>=<\/span>"email"<\/span> placeholder=<\/span>"Email"<\/span> autocomplete=<\/span>"off"<\/span> required><\/span><\/pre><\/div><\/div>\n
Cuando se utiliza este valor type=\u00bbemail\u00bb, se le obliga al usuario a escribir dentro del campo una direcci\u00f3n de correo electr\u00f3nico v\u00e1lida.<\/p>\n
Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se env\u00eda el formulario siempre y cuando el atributo \u00abrequired\u00bb est\u00e9 establecido.<\/p>\n
Puedes verlo en acci\u00f3n en la siguiente captura de pantalla:<\/p>\n
\"Campo<\/p>\n
Cuando agregas el atributo \u00abrequired\u00bb a tus campos, est\u00e1s obligando a los usuarios a rellenar estos campos.<\/p>\n
El campo email, junto con otros tipos de campos m\u00e1s recientes, proporciona la validaci\u00f3n de errores en el lado cliente de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se env\u00eden al servidor.<\/p>\n
Esto puede ser considerado una buena ayuda para guiar a los usuarios a rellenar el formulario de forma precisa y puede ahorrar tiempo tanto a ti como programador como a los usuarios que utilizan la aplicaci\u00f3n.<\/p>\n
De\u00a0 hecho, es \u00fatil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor para averiguarlo.<\/p>\n
Con esta nueva soluci\u00f3n, l\u00f3gicamente la experiencia de usuario mejora much\u00edsimo pero, dejarlo simplemente as\u00ed no deber\u00eda ser considerado una buena pr\u00e1ctica si quieres que tu aplicaci\u00f3n tambi\u00e9n sea segura.<\/p>\n
Tus aplicaciones siempre deben realizar comprobaciones de seguridad sobre cada dato, tanto en el lado servidor como en el lado cliente debido a que la validaci\u00f3n en el lado cliente es muy f\u00e1cil desactivarla. Usuarios con conocimientos y malintencionados pueden enviar f\u00e1cilmente datos incorrectos a tu servidor y podr\u00eda hackear el sistema en cuesti\u00f3n de segundos.<\/p>\n
Campo de b\u00fasqueda<\/h2>\n
Los campos de b\u00fasqueda est\u00e1n destinados a ser utilizados para crear cajas de b\u00fasqueda en p\u00e1ginas y aplicaciones. Este tipo de campo se define utilizando el valor \u00absearch\u00bb en su atributo type.<\/p>\n
Observa el ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"search"<\/span> name<\/span>=<\/span>"key"<\/span>><\/span><\/pre><\/div><\/div>\n
La diferencia principal entre un campo \u00abtext\u00bb y un campo de tipo \u00absearch\u00bb es la forma en que algunos navegadores aplica estilo a su apariencia.<\/p>\n
En seg\u00fan que navegadores, los campos tipo \u00absearch\u00bb se muestran con bordes redondeados y tambi\u00e9n pueden mostrar una \u00ab\u24cd\u00bb, el cual despeja el campo de cualquier valor cuando se pulsa sobre \u00e9l. Adicionalmente, en dispositivos con teclado din\u00e1mico, la tecla enter del teclado puede leer \u00absearch\u00bb o mostrar un icono de lupa.<\/p>\n
Campo para tel\u00e9fono<\/h2>\n
Aunque a\u00fan todav\u00eda puedes usar los campos de tipo \u00abtext\u00bb para permitir al usuario agregar su tel\u00e9fono, debo hacerte saber que con HTML5 ahora puedes usar los campos de tipo \u00abtel\u00bb de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"tel"<\/span> name<\/span>=<\/span>"phone"<\/span>><\/span><\/pre><\/div><\/div>\n
Cuando se accede desde un dispositivo t\u00e1ctil con teclados din\u00e1micos, muchos de ellos mostrar\u00e1n un teclado num\u00e9rico cuando se encuentren con type=\u00bbtel\u00bb, lo que significa que este tipo es \u00fatil no s\u00f3lo para ser utilizado para n\u00fameros de tel\u00e9fono, sino tambi\u00e9n cuando sea \u00fatil un teclado num\u00e9rico.<\/p>\n
Si tu aplicaci\u00f3n la quieres optimizar para tel\u00e9fonos m\u00f3viles y quieres una buena experiencia de usuario, usar el campo de tipo \u00abtel\u00bb en tus formularios ser\u00e1 un aliado para conseguirlo.<\/p>\n
Al igual que el campo de tipo \u00abtext\u00bb, los campos de tipo \u00abtel\u00bb tampoco tienen una validaci\u00f3n del lado del cliente. Esto es debido a que existen una diversidad de formatos de n\u00fameros de tel\u00e9fonos.<\/p>\n
Para validar este tipo de campos deber\u00e1s buscar otra alternativa como por ejemplo hacerlo mediante JavaScript.<\/p>\n
Otra soluci\u00f3n para la validaci\u00f3n de los campos de tipo \u00abtel\u00bb podr\u00eda ser utilizar el atributo \u00abpattern\u00bb tal y como puedes ver en el ejemplo a continuaci\u00f3n:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
(<input<\/span><\/a> name<\/span>=<\/span>"tel1"<\/span> type<\/span>=<\/span>"tel"<\/span> pattern=<\/span>"[0-9]{2}"<\/span> placeholder=<\/span>"##"<\/span> aria-label<\/span>=<\/span>"2-digit area code"<\/span> size<\/span>=<\/span>"2"<\/span> required\/<\/span>><\/span>) -\n<input<\/span><\/a> name<\/span>=<\/span>"tel2"<\/span> type<\/span>=<\/span>"tel"<\/span> pattern=<\/span>"[0-9]{3}"<\/span> placeholder=<\/span>"###"<\/span> aria-label<\/span>=<\/span>"3-digit prefix"<\/span> size<\/span>=<\/span>"2"<\/span> required\/<\/span>><\/span> -\n<input<\/span><\/a> name<\/span>=<\/span>"tel3"<\/span> type<\/span>=<\/span>"tel"<\/span> pattern=<\/span>"[0-9]{4}"<\/span> placeholder=<\/span>"####"<\/span> aria-label<\/span>=<\/span>"4-digit number"<\/span> size<\/span>=<\/span>"3"<\/span> required \/<\/span><\/span><\/pre><\/div><\/div>\n
Campo para URLs<\/h2>\n
Tambi\u00e9n se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo type:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"url"<\/span> name<\/span>=<\/span>"url"<\/span>><\/span><\/pre><\/div><\/div>\n
Este tipo a\u00f1ade restricciones de validaci\u00f3n en el campo siempre y cuando utilices el atributo \u00abrequired\u00bb.<\/p>\n
En este caso, el navegador informar\u00e1 al usuario de un error si no ha introducido una url con formato correcto.<\/p>\n
Es interesante saber que, en dispositivos con teclados din\u00e1micos, a menudo se mostrar\u00e1 por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.<\/p>\n
Campo de tipo num\u00e9rico<\/h2>\n
Para tus formularios tambi\u00e9n puedes crear controles para introducir n\u00fameros con type=\u00bbnumber\u00bb para los campos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"number"<\/span> name<\/span>=<\/span>"note"<\/span> min=<\/span>"1"<\/span> max=<\/span>"10"<\/span> step=<\/span>"2"<\/span> required><\/span><\/pre><\/div><\/div>\n
Dando como resultado:<\/p>\n
\"Campo<\/p>\n
Este ejemplo podr\u00edas utilizarlo para que profesores pudiera calificar o poner nota a los ex\u00e1menes que realizan sus alumnos ya que solo permite agregar n\u00fameros del 0 al 10. En este caso deben ser n\u00fameros enteros.<\/p>\n
Este control se parece a un campo de texto pero solo permite n\u00fameros de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control si lo acompa\u00f1as con el atributo \u00abstep\u00bb.<\/p>\n
En dispositivos con teclados din\u00e1micos generalmente se muestra el teclado num\u00e9rico.<\/p>\n
Con el tipo de input number puedes limitar los valores m\u00ednimo y m\u00e1ximo permitidos definiendo los atributos min y max.<\/p>\n
Tambi\u00e9n puedes utilizar el atributo \u00abstep\u00bb para cambiar el incremento y decremento causado por los botones deslizadores.<\/p>\n
Por defecto, el tipo de input \u00abnumber\u00bb s\u00f3lo valida si el n\u00famero es un entero. Para permitir n\u00fameros decimales, especifica step=\u00bbany\u00bb. Si se omite, su valor por defecto es 1, lo que significa que solo son v\u00e1lidos n\u00fameros enteros.<\/p>\n
El atributo \u00abstep\u00bb que se puede utilizar con HTML5 es un n\u00famero que especifica la granularidad a la que debe adherirse el valor o la palabra clave. Es v\u00e1lido para los tipos de entrada num\u00e9rica, incluidos los campos de tipo de fecha, mes, semana, hora, fecha y hora local, n\u00famero y rango.<\/p>\n
El atributo \u00abstep\u00bb establece el intervalo de paso al hacer clic en los botones giratorios hacia arriba y hacia abajo que aparecen de forma autom\u00e1tica.<\/p>\n
Se puede mover un control deslizante hacia la izquierda y hacia la derecha en un rango y validar los diferentes tipos de fechas. Si no se incluye expl\u00edcitamente, el \u00abstep\u00bb predeterminado es 1 para el n\u00famero y rango, y 1 tipo de unidad (minuto, semana, mes, d\u00eda) para los tipos de entrada de fecha \/ hora.<\/p>\n
El valor debe ser un n\u00famero positivo (entero o flotante) o el valor especial any, lo que significa que no se implica ning\u00fan \u00abstep\u00bb y se permite cualquier valor (salvo otras restricciones, como m\u00ednimo y m\u00e1ximo).<\/p>\n
Para seleccionar un n\u00famero decimal. M\u00e1ximo 10<\/strong><\/h2>\n
Para tus formularios tambi\u00e9n puedes utilizar el tipo de campo \u00abnumber\u00bb con n\u00fameros decimales.<\/p>\n
En el siguiente ejemplo vas a permitir a tus usuarios incrementar y decrementar el valor del campo con 0.1 cada vez.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"number"<\/span> value<\/span>=<\/span>"0.1"<\/span> min=<\/span>"0"<\/span> step=<\/span>"0.1"<\/span> max=<\/span>"10"<\/span>><\/span><\/pre><\/div><\/div>\n
Para seleccionar un rango de n\u00fameros<\/strong><\/h2>\n
El campo de tipo \u00abrange\u00bb permite a los usuarios seleccionar un rango de n\u00fameros con un slider o control deslizante.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"range"<\/span> min=<\/span>"0"<\/span> step=<\/span>"2"<\/span> max=<\/span>"10"<\/span>><\/span><\/pre><\/div><\/div>\n
Para obtener como resultado:<\/p>\n
\"Slider<\/p>\n
Campo para una fecha<\/strong><\/h2>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"date"<\/span> min=<\/span>"2021-12-25"<\/span> step=<\/span>"1"<\/span>><\/span><\/pre><\/div><\/div>\n
Para conseguir un selector de fecha como el siguiente:<\/p>\n
\"Campo<\/p>\n
Campo para seleccionar un mes concreto<\/strong><\/h2>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"month"<\/span> min=<\/span>"2021-12"<\/span> step=<\/span>"12"<\/span>><\/span><\/pre><\/div><\/div>\n
Para obtener como resultado el selector de mes:<\/p>\n
\"Campo<\/p>\n
Camp para seleccionar una semana concreta<\/strong><\/h2>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"week"<\/span> min=<\/span>"2021-W23"<\/span> step=<\/span>"2"<\/span>><\/span><\/pre><\/div><\/div>\n
Para lograr un selector de semana como el siguiente:<\/p>\n
\"Seleccionar<\/p>\n
Campo para seleccionar una hora<\/strong><\/h2>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"time"<\/span> min=<\/span>"09:00"<\/span> step=<\/span>"900"<\/span>><\/span><\/pre><\/div><\/div>\n
Para conseguir como resultado un selector de hora como el siguiente:<\/p>\n
\"Seleccionar<\/p>\n
Campo para seleccionar un d\u00eda y hora<\/strong><\/h2>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"datetime-local"<\/span> min=<\/span>"019-12-25T19:30"<\/span> step=<\/span>"7"<\/span>><\/span><\/pre><\/div><\/div>\n
Para obtener un selector de fecha y hora muy potente:<\/p>\n
\"Seleccionar<\/p>\n
Conclusi\u00f3n<\/h2>\n
Es posible que los programadores j\u00f3venes y modernos vean esto como algo muy simple y prestablecido pero el caso es que hace unos a\u00f1os estos tipos de campos y atributos no exist\u00edan y se requer\u00eda de plugins jQuery o c\u00f3digos JavaScript muy extensos para conseguir una funcionalidad similar a esta.<\/p>\n
En este mismo blog, desde el 2008 hasta el momento hemos hablado de varios plugins para incorporar datepikers que puedes observar a trav\u00e9s del siguiente enlace: Datepickers<\/a><\/p>\n
Para incrementar y decrementar el valor de un campo de texto tambi\u00e9n llegamos a usar algo como lo que se indica en Incrementar valor de un input con jQuery<\/a>.<\/p>\n
Desde mi punto de vista dir\u00eda que ya no vale la pena utilizar estos plugins y c\u00f3digo JavaScript para estas funciones si HTML 5 incorpora estos tipos de campos y atributos de serie que ya te sacan del apuro.<\/p>\n
El \u00faltimo ejemplo de selecci\u00f3n de fecha y hora lo veo super potente y mucho m\u00e1s usable que muchos plugins que haya llegado a utilizar en lo largo de mi carrera.<\/p>\n
Entiendo que si se desea algo m\u00e1s sofisticado o personalizado ya si que se pueden usar plugins que permiten personalizarlo completamente o desarrollos a medida.<\/p>\n
Mejorar la experiencia del usuario es otra buena raz\u00f3n para utilizar estos tipos de campos m\u00e1s recientes y modernos que te ayudaran enormemente a crear tu aplicaci\u00f3n a un menor coste tambi\u00e9n.<\/p>\n
Y no menos importante, me gustar\u00eda hacerte saber que la mayor\u00eda de las caracter\u00edsticas mencionadas en este art\u00edculo tienen un amplio soporte en todos los navegadores.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
\u00bfQu\u00e9 opinas al respecto?<\/p>\n","protected":false},"excerpt":{"rendered":"
Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.<\/p>\n","protected":false},"author":1,"featured_media":7655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[80,79],"class_list":["post-7643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-datepickers","tag-inputs"],"yoast_head":"\nTipos de campos disponibles en HTML5 para tus formularios - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tipos de campos disponibles en HTML5 para tus formularios - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-18T06:57:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-23T19:12:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/\",\"name\":\"Tipos de campos disponibles en HTML5 para tus formularios - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png\",\"datePublished\":\"2021-12-18T06:57:04+00:00\",\"dateModified\":\"2021-12-23T19:12:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png\",\"width\":250,\"height\":250,\"caption\":\"Tipos de campos disponibles en HTML5 para tus formularios\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tipos de campos disponibles en HTML5 para tus formularios\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tipos de campos disponibles en HTML5 para tus formularios - Jose Aguilar Blog","description":"Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Tipos de campos disponibles en HTML5 para tus formularios - Jose Aguilar Blog","og_description":"Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2021-12-18T06:57:04+00:00","article_modified_time":"2021-12-23T19:12:40+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/","url":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/","name":"Tipos de campos disponibles en HTML5 para tus formularios - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png","datePublished":"2021-12-18T06:57:04+00:00","dateModified":"2021-12-23T19:12:40+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Ahorra mucho c\u00f3digo y recursos utilizando los nuevos tipos de campos de HTML5 para seleccionar datos establecidos o validar los formularios.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2021\/12\/tipos-de-campos-disponibles-en-html5-para-tus-formularios.png","width":250,"height":250,"caption":"Tipos de campos disponibles en HTML5 para tus formularios"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/tipos-de-campos-disponibles-en-html5-para-tus-formularios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tipos de campos disponibles en HTML5 para tus formularios"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7643"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7643\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7655"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}