{"id":5405,"date":"2012-12-04T22:27:51","date_gmt":"2012-12-04T22:27:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5405"},"modified":"2015-07-14T22:11:50","modified_gmt":"2015-07-14T22:11:50","slug":"outgroup-html-tag","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/","title":{"rendered":"Outgroup HTML tag"},"content":{"rendered":"<p>El elemento HTML optgroup nos permite agrupar opciones (elemento HTML option) en una lista de opciones (elemento HTML select). Un t\u00edtulo es usualmente mostrado encima de las opciones contenidas por este elemento.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5406\" title=\"opgroup\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png\" alt=\"\" width=\"191\" height=\"191\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png 191w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup-150x150.png 150w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup-80x80.png 80w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup-180x180.png 180w\" sizes=\"auto, (max-width: 191px) 100vw, 191px\" \/><\/a><\/p>\n<p>Como vemos en la imagen, las opciones de Ingresos y Gastos son elementos padre (optgroups) de las subopciones del selector. Esta programaci\u00f3n se consigue:<\/p>\n<pre>&lt;select name=\"pyg\"&gt;\r\n\u00a0\u00a0 \u00a0&lt;optgroup label=\"Ingresos\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"1\"&gt;N\u00f3mina&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"2\"&gt;Prestaci\u00f3n de servicios&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"3\"&gt;Freelance&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"4\"&gt;Extraordinarios&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0 &lt;\/optgroup&gt;\r\n\u00a0\u00a0\u00a0 \u00a0&lt;optgroup label=\"Gastos\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"5\"&gt;Alimentaci\u00f3n&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"6\"&gt;Alojamiento&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"7\"&gt;Ocio&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"8\"&gt;Transporte&lt;\/option&gt;\r\n\u00a0\u00a0\u00a0 \u00a0&lt;\/optgroup&gt;\r\n&lt;\/select&gt;<\/pre>\n<p>Ver ejemplo en funcionamiento<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El elemento HTML optgroup nos permite agrupar opciones (elemento HTML option) en una lista de opciones (elemento HTML select). Un t\u00edtulo es usualmente mostrado encima de las opciones contenidas por este elemento. Como vemos en la imagen, las opciones de Ingresos y Gastos son elementos padre (optgroups) de las subopciones del selector. Esta programaci\u00f3n se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5406,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[62],"class_list":["post-5405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-selects"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Outgroup HTML tag - Jose Aguilar Blog<\/title>\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=\"Outgroup HTML tag - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"El elemento HTML optgroup nos permite agrupar opciones (elemento HTML option) en una lista de opciones (elemento HTML select). Un t\u00edtulo es usualmente mostrado encima de las opciones contenidas por este elemento. Como vemos en la imagen, las opciones de Ingresos y Gastos son elementos padre (optgroups) de las subopciones del selector. Esta programaci\u00f3n se [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/\" \/>\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=\"2012-12-04T22:27:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-07-14T22:11:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png\" \/>\n\t<meta property=\"og:image:width\" content=\"191\" \/>\n\t<meta property=\"og:image:height\" content=\"191\" \/>\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=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/\",\"name\":\"Outgroup HTML tag - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png\",\"datePublished\":\"2012-12-04T22:27:51+00:00\",\"dateModified\":\"2015-07-14T22:11:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png\",\"width\":191,\"height\":191},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Outgroup HTML tag\"}]},{\"@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":"Outgroup HTML tag - Jose Aguilar Blog","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":"Outgroup HTML tag - Jose Aguilar Blog","og_description":"El elemento HTML optgroup nos permite agrupar opciones (elemento HTML option) en una lista de opciones (elemento HTML select). Un t\u00edtulo es usualmente mostrado encima de las opciones contenidas por este elemento. Como vemos en la imagen, las opciones de Ingresos y Gastos son elementos padre (optgroups) de las subopciones del selector. Esta programaci\u00f3n se [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-12-04T22:27:51+00:00","article_modified_time":"2015-07-14T22:11:50+00:00","og_image":[{"width":191,"height":191,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.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":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/","url":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/","name":"Outgroup HTML tag - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png","datePublished":"2012-12-04T22:27:51+00:00","dateModified":"2015-07-14T22:11:50+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/opgroup.png","width":191,"height":191},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/outgroup-html-tag\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Outgroup HTML tag"}]},{"@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\/5405","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=5405"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5405\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5406"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}