{"id":290,"date":"2011-07-11T19:25:05","date_gmt":"2011-07-11T17:25:05","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=290"},"modified":"2013-11-12T12:11:44","modified_gmt":"2013-11-12T10:11:44","slug":"nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/","title":{"rendered":"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5"},"content":{"rendered":"<p>En este art\u00edculo me gustar\u00eda hablar de una novedad bastante curiosa de los formularios en HTML5 y en concreto del atributo \u00b4form\u00b4.<\/p>\n<p>Con el atributo \u00b4form\u00b4 en HTML podremos tener etiquetas de formulario fuera de estos y plenamente integrados en el formulario, e incluso elementos dentro de un formulario que pasen la informaci\u00f3n y act\u00faen en otro formulario relacion\u00e1ndolo mediante el atributo \u00b4form\u00b4.<\/p>\n<p>Es decir, en cualquier elemento de formulario ( input, select, texarea ) podemos a\u00f1adir el atributo form=\u201dformulario1\u201d; una vez hecho esto, el elemento quedar\u00e1 enlazado al formulario cuyo identificador ( id=\u201dformulario01\u201d) sea igual al valor que pongamos dentro del atributo.<\/p>\n<p>Esta asociaci\u00f3n est\u00e1 por encima del flujo normal de la p\u00e1gina y se puede realizar en elementos que est\u00e9n incluso dentro de otro formulario en la misma p\u00e1gina (incluidos los input de tipo submit o botones de env\u00edo).<\/p>\n<p>Con este atributo se tendr\u00e1 mayor libertad a la hora de desarrollar formularios ya que separar\u00e1 totalmente la estructura y contenido del formulario del propio flujo de la p\u00e1gina. Quiz\u00e1s en muchos casos no tenga mucho sentido, pero procurar tenerlo en cuenta ya que puede ser una herramienta bastante potente.<\/p>\n<p>De momento el soporte de este atributo es poco y adem\u00e1s en algunos navegadores no est\u00e1 muy claro, pero es una opci\u00f3n a tener en cuenta en pr\u00f3ximas versiones.<\/p>\n<p>Sobretodo siempre se ha de tener en cuenta el tipo de p\u00fablico que visita vuestra web, evitando usar este tipo de elementos si ten\u00e9is muchas visitas de usuarios usando Internet Explorer; y si adem\u00e1s tienen desactivado el javascript est\u00e1is perdidos.<\/p>\n<ul>\n<li>Opera      9.5+ (Soporte Total)<\/li>\n<li>Safari      5.1+ (Soportado, es posible que el soporte no sea total)<\/li>\n<li>Firefox 4+ (Soporte parcial)<\/li>\n<li>Chrome 10+ (Soporte parcial)<\/li>\n<li>IE      (NO Soportado)<\/li>\n<\/ul>\n<p>Aqu\u00ed os dejo un enlace a un art\u00edculo en ingl\u00e9s en el cual tratan el tema y enlazan un ejemplo para probar.<\/p>\n<p><a title=\"HTML 5 Form Attribute\" href=\"http:\/\/www.impressivewebs.com\/html5-form-attribute\/\" target=\"_blank\">http:\/\/www.impressivewebs.com\/html5-form-attribute\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo me gustar\u00eda hablar de una novedad bastante curiosa de los formularios en HTML5 y en concreto del atributo \u00b4form\u00b4. Con el atributo \u00b4form\u00b4 en HTML podremos tener etiquetas de formulario fuera de estos y plenamente integrados en el formulario, e incluso elementos&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[14,78],"class_list":["post-290","post","type-post","status-publish","format-standard","hentry","category-diseno-web","tag-diseno-web-2","tag-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Nuevo atributo \u00b4form\u00b4 para formularios en HTML5 - Blog Escola Espai<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-\u00b4form\u00b4-para-formularios-en-html5\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5 - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo me gustar\u00eda hablar de una novedad bastante curiosa de los formularios en HTML5 y en concreto del atributo \u00b4form\u00b4. Con el atributo \u00b4form\u00b4 en HTML podremos tener etiquetas de formulario fuera de estos y plenamente integrados en el formulario, e incluso elementos...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-\u00b4form\u00b4-para-formularios-en-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2011-07-11T17:25:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-11-12T10:11:44+00:00\" \/>\n<meta name=\"author\" content=\"Tomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/\"},\"author\":{\"name\":\"Tomas\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c30dbfb9be2b808bfbf03d0fc747fae8\"},\"headline\":\"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5\",\"datePublished\":\"2011-07-11T17:25:05+00:00\",\"dateModified\":\"2013-11-12T10:11:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/\"},\"wordCount\":338,\"keywords\":[\"dise\u00f1o web\",\"HTML5\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/\",\"name\":\"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5 - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"datePublished\":\"2011-07-11T17:25:05+00:00\",\"dateModified\":\"2013-11-12T10:11:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c30dbfb9be2b808bfbf03d0fc747fae8\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c30dbfb9be2b808bfbf03d0fc747fae8\",\"name\":\"Tomas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bb930a6893ed2763cba17a2038fead7bc046792160b578ab36e4b9ba5c2e4dbc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bb930a6893ed2763cba17a2038fead7bc046792160b578ab36e4b9ba5c2e4dbc?s=96&d=mm&r=g\",\"caption\":\"Tomas\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/tomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5 - Blog Escola Espai","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-\u00b4form\u00b4-para-formularios-en-html5\/","og_locale":"es_ES","og_type":"article","og_title":"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5 - Blog Escola Espai","og_description":"En este art\u00edculo me gustar\u00eda hablar de una novedad bastante curiosa de los formularios en HTML5 y en concreto del atributo \u00b4form\u00b4. Con el atributo \u00b4form\u00b4 en HTML podremos tener etiquetas de formulario fuera de estos y plenamente integrados en el formulario, e incluso elementos...","og_url":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-\u00b4form\u00b4-para-formularios-en-html5\/","og_site_name":"Blog Escola Espai","article_published_time":"2011-07-11T17:25:05+00:00","article_modified_time":"2013-11-12T10:11:44+00:00","author":"Tomas","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Tomas","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/"},"author":{"name":"Tomas","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c30dbfb9be2b808bfbf03d0fc747fae8"},"headline":"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5","datePublished":"2011-07-11T17:25:05+00:00","dateModified":"2013-11-12T10:11:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/"},"wordCount":338,"keywords":["dise\u00f1o web","HTML5"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/","url":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/","name":"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5 - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"datePublished":"2011-07-11T17:25:05+00:00","dateModified":"2013-11-12T10:11:44+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c30dbfb9be2b808bfbf03d0fc747fae8"},"breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2011\/07\/nuevo-atributo-%c2%b4form%c2%b4-para-formularios-en-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Nuevo atributo \u00b4form\u00b4 para formularios en HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c30dbfb9be2b808bfbf03d0fc747fae8","name":"Tomas","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bb930a6893ed2763cba17a2038fead7bc046792160b578ab36e4b9ba5c2e4dbc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb930a6893ed2763cba17a2038fead7bc046792160b578ab36e4b9ba5c2e4dbc?s=96&d=mm&r=g","caption":"Tomas"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/tomas\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":4,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}