{"id":3606,"date":"2017-09-28T21:00:02","date_gmt":"2017-09-28T21:00:02","guid":{"rendered":"http:\/\/disenoweb.mx\/?p=3606"},"modified":"2017-09-28T21:00:02","modified_gmt":"2017-09-28T21:00:02","slug":"html5-nuevos-atributos","status":"publish","type":"post","link":"https:\/\/disenoweb.mx\/blog\/html5-nuevos-atributos\/","title":{"rendered":"HTML5 nuevos atributos"},"content":{"rendered":"\n<h1>HTML5 nuevos atributos<\/h1>\n<p><img data-opt-id=1611601048  fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-1373\" src=\"https:\/\/mlniuewdmffl.i.optimole.com\/w:300\/h:300\/q:mauto\/f:best\/http:\/\/disenoweb.mx\/wp-content\/uploads\/services-local-seo-services-on-light-300x300.png\" alt=\"HTML5 nuevos atributos HTML5 nuevos atributos HTML5 nuevos atributos services local seo services on light 300x300\" width=\"300\" height=\"300\" title=\"services-local-seo-services-on-light-300x300 services-local-seo-services-on-light-300x300\"><\/p>\n<p>\u00a0<\/p>\n<p><a href=\"http:\/\/disenoweb.mx\">NUEVOS ATRIBUTOS<\/a><\/p>\n<p>Al igual que los nuevos tipos de campo, el elemento input ha recibido nuevos atributos para definir su comportamiento y restricciones: autocomplete, min, max, multiple, pattern, autofocus, placeholder, required y step. Existe adem\u00e1s un nuevo atributo, list, que hace referencia a otro elemento, permitiendo crear un nuevo tipo de entrada de datos estos son los <strong><em> HTML5 nuevos atributos<\/em><\/strong>\u00a0.<\/p>\n<p>ATRIBUTO LIST Y &lt;DATALIST&gt;<\/p>\n<p>La combinaci\u00f3n del atributo list y un elemento de tipo &lt;datalist&gt; da como resultado un campo de texto, donde el usuario puede introducir cualquier contenido, y las opciones definidas en el &lt;datalist&gt; se muestran como una lista desplegable. Hay que tener en cuenta que la lista tiene que estar contenida en un elemento &lt;datalist&gt; cuyo id coincide con el indicado en el atributo list:<\/p>\n<p>&lt;input id=\u201dform-person-title\u201d type=\u201dtext\u201d list=\u201dmylist\u201d&gt;<\/p>\n<p>&lt;datalist id=\u201dmylist\u201d&gt;<\/p>\n<p>&lt;option label=\u201dMr\u201d value=\u201dMr\u201d&gt;<\/p>\n<p>&lt;option label=\u201dMs\u201d value=\u201dMs\u201d&gt;<\/p>\n<p>&lt;option label=\u201dProf\u201d value=\u201dMad Professor\u201d&gt;<\/p>\n<p>&lt;\/datalist&gt;<\/p>\n<p>En este ejemplo se utiliza un campo de tipo text, pero puede ser utilizado igualmente con campos de tipo url y email.Nuevo elemento datalist, asociado a un campo de texto\u00a0<em>dise\u00f1o<\/em><\/p>\n<p>ATRIBUTO AUTOFOCUS<\/p>\n<p>El atributo booleano autofocus permite definir que control va a tener el foco cuando la p\u00e1gina se haya cargado. Hasta ahora, esto se consegu\u00eda a trav\u00e9s de JavaScript, utilizando el m\u00e9todo .focus() en un elemento concreto, al cargarse el documento. Ahora es el navegador el encargado de esta tarea, y puede comportarse de manera m\u00e1s inteligente, como no cambiando el foco de un elemento si el usuario ya se encuentra escribiendo en otro campo (\u00e9ste era un problema com\u00fan con JavaScript)\u00a0<em>dise\u00f1o web<\/em>\u00a0.<\/p>\n<p>\u00danicamente debe existir un elemento con este atributo definido en el documento. Desde el punto de vista de la usabilidad, hay que utilizar este atributo con cuidado. Hay que utilizarlo \u00fanicamente cuando el control que recibe el foco es el elemento principal de la p\u00e1gina, como en un buscador, por ejemplo<em>\u00a0dise\u00f1o web df<\/em>.<\/p>\n<p>ATRIBUTO PLACEHOLDER Una peque\u00f1a mejora en la usabilidad de los formularios, suele ser colocar\u00a0<em>dise\u00f1o<\/em>\u00a0un peque\u00f1o texto de ayuda en algunos campos, de manera discreta y que desaparece cuando el usuario introduce alg\u00fan dato. Como con el resto de elementos, hasta ahora era necesario utilizar JavaScript para realizar esta tarea, pero el atributo placeholder resuelve esta tarea <strong><em> HTML5 nuevos atributos<\/em><\/strong>.<\/p>\n<p>Es importante recordar que este atributo no sustituye a la etiqueta &lt;label&gt;. Atributo placeholder en un campo de b\u00fasqueda<\/p>\n<p>ATRIBUTO REQUIRED<\/p>\n<p>Este atributo puede ser utilizado en un &lt;textarea&gt; y en la gran mayor\u00eda de los elementos &lt;input&gt; (excepto en los de tipo hidden, image o botones como submit). Cuando este atributo est\u00e1 presente, el navegador no permite el env\u00edo del formulario si el campo en concreto est\u00e1 vac\u00edo <strong><em> HTML5 nuevos atributos<\/em><\/strong>.<\/p>\n<p>ATRIBUTO MULTIPLE<\/p>\n<p>Este atributo permite definir que un campo puede admitir varios valores, como URLs o emails. Un uso muy interesante de este atributo es utilizarlo en conjunto con el campo &lt;input type=\u201dfile\u201d&gt;, ya que de esta manera nos permite seleccionar varios ficheros que podemos enviar al servidor al mismo tiemp\u00a0<em>dise\u00f1o web Guadalajara.<\/em><\/p>\n<p>&lt;input type=\u201dfile\u201d multiple=\u201dmultiple\u201d&gt; <strong><em> HTML5 nuevos atributos<\/em><\/strong>.<\/p>\n<p>ATRIBUTO AUTOCOMPLETE\u00a0\u00a0<em>dise\u00f1o web Guadalajara<\/em>\u00a0Algunos navegadores suelen incluir alguna funcionalidad de autocompletado en algunos campos de formulario. A pesar de haber sido introducido recientemente en el est\u00e1ndar de HTML5, es una caracter\u00edstica que lleva mucho tiempo siendo utilizada, concretamente desde la versi\u00f3n 5 de Internet Explorer<strong><em> HTML5 nuevos atributos <\/em><\/strong>.<\/p>\n<p>Este atributo permite controlar el comportamiento del autocompletado en los campos de texto del formulario (que por defecto est\u00e1 activado) <strong><em> HTML5 nuevos atributos<\/em><\/strong>\u00a0.<\/p>\n<p>ATRIBUTOS MIN Y MAX Como hemos visto en el campo &lt;input type=\u201dnumber\u201d&gt;, estos atributos restringen los valores que pueden ser introducidos; no es posible enviar el formulario con un valor menor que min o un valor mayor que max. Tambi\u00e9n es posible utilizarlo en otro tipo de campos como date, para especificar fechas m\u00ednimas o m\u00e1ximas\u00a0<em>sitio web<\/em>.<\/p>\n<p>&lt;input type=\u201ddate\u201d min=\u201d2010-01-01\u2033 max=\u201d2010-12-31\u2033&gt;<em>\u00a0dise\u00f1o web<\/em><\/p>\n<h2><strong><em>HTML5 nuevos atributos<\/em><\/strong><\/h2>\n<p><a href=\"https:\/\/www.facebook.com\/disenopaginaweb\">#HTML5nuevosatributos<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 nuevos atributos \u00a0 NUEVOS ATRIBUTOS Al igual que los nuevos tipos de campo, el elemento input ha recibido nuevos atributos para definir su comportamiento y restricciones: autocomplete, min, max, multiple, pattern, autofocus, placeholder, required y step. Existe adem\u00e1s un nuevo atributo, list, que hace referencia a otro elemento, permitiendo crear un nuevo tipo de &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"ast-button\" href=\"https:\/\/disenoweb.mx\/blog\/html5-nuevos-atributos\/\"> <span class=\"screen-reader-text\">HTML5 nuevos atributos<\/span> Leer m\u00e1s \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":152,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","_joinchat":[],"footnotes":""},"categories":[1189,55],"tags":[70,46,143,47,1210,128],"class_list":["post-3606","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-web","tag-diseno","tag-diseno-web","tag-diseno-web-df","tag-diseno-web-guadalajara","tag-html5-nuevos-atributos","tag-sitio-web"],"_links":{"self":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/3606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/comments?post=3606"}],"version-history":[{"count":0,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/posts\/3606\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/media?parent=3606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/categories?post=3606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenoweb.mx\/blog\/wp-json\/wp\/v2\/tags?post=3606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}