{"id":428,"date":"2021-07-13T12:28:56","date_gmt":"2021-07-13T06:58:56","guid":{"rendered":"https:\/\/wpproonline.com\/?p=428"},"modified":"2026-02-26T10:45:40","modified_gmt":"2026-02-26T10:45:40","slug":"chapter-27-selection-menu-controls","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/","title":{"rendered":"Chapter 27: Selection Menu Controls"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-select-menu\">Select Menu<\/h2>\n\n<p class=\"wp-block-paragraph\">The <strong><em>&lt;select&gt;<\/em><\/strong> element generates a drop-down menu from which the user can choose an option.<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select name=\"\"&gt;\n &lt;option value=\"1\"&gt;One&lt;\/option&gt;\n &lt;option value=\"2\"&gt;Two&lt;\/option&gt;\n &lt;option value=\"3\"&gt;Three&lt;\/option&gt;\n &lt;option value=\"4\"&gt;Four&lt;\/option&gt;\n&lt;\/select&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\"><strong>Changing the Size<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">You can change the size of the selection menu with the size attribute. A size of 0 or 1 displays the standard drop\u0002down style menu. A size greater than 1 will convert the drop-down into a box displaying that many lines, with one<br \/>option per line and a scrollbar in order to scroll through the available options.<\/p>\n\n<p><!--more--><\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select name=\"\" size=\"4\"&gt;&lt;\/select&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\"><strong>Multi-option Selection Menus<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">By default, users can only select a single option. Adding the multiple attribute allows users to select multiple<br \/>options at once and submit all selected options with the form. Using the multiple attribute automatically converts<br \/>the drop-down menu into a box as if it had a size defined. The default size when this occurs is determined by the<br \/>specific browser you are using, and it is not possible to change it back to a drop-down style menu while allowing<br \/>multiple selections.<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select name=\"\" multiple&gt;&lt;\/select&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">When using the multiple attribute, there is a difference between using 0 and 1 for the size, whereas no difference<br \/>exists when not using the attribute. Using 0 will cause the browser to behave in whatever default manner it is<br \/>programmed to do. Using 1 will explicitly set the size of the resulting box to only one row high.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-options\">Options<\/h2>\n\n<p class=\"wp-block-paragraph\">The options inside a selection menu are what the user will be selection. The normal syntax for an option is as<br \/>follows:<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;option&gt;Some Option&lt;\/option&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">However, it&#8217;s important to note that the text inside the <strong><em>&lt;option&gt;<\/em><\/strong> element itself is not always used, and essentially becomes the default value for attributes which are not specified.<\/p>\n\n<p class=\"wp-block-paragraph\">The attributes which control the actual appearance and function of the option are value and <em>label<\/em>. The label<br \/>represents the text which will be displayed in the drop-down menu (what you&#8217;re looking at and will click on to select<br \/>it). The value represents the text which will be sent along with form submission. If either of these values is omitted,<br \/>it uses the text inside the element as the value instead. So the example we gave above could be &#8220;expanded&#8221; to this:<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;option label=\"Some Option\" value=\"Some Option\"&gt;\n<\/pre>\n\n<p class=\"wp-block-paragraph\">Note the omission of the inside text and end tag, which are not required to actually construct an option inside <br \/>menu. If they were included, the inside text would be ignored because both attributes are already specified and the<br \/>text is not needed. However, you probably won&#8217;t see a lot of people writing them this way. The most common way<br \/>it&#8217;s written is with a value that will be sent to the server, along with the inside text which eventually becomes the<br \/>label attribute, like so:<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;option value=\"option1\"&gt;Some Option&lt;\/option&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\"><strong>Selecting an option by default<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">You can also specify a certain option to be selected in the menu by default by attaching the selected attribute to it.<br \/>By default, if no option is specified as selected in the menu, the first option in the menu will be selected when<br \/>rendered. If more than one option has the selected attribute attached, then the last option present in the menu<br \/>with the attribute will be the one selected by default.<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;option value=\"option1\" selected&gt;Some option&lt;\/option&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">If you&#8217;re using the attribute in a multi-option selection menu, then all the options with the attribute will be selected<br \/>by default, and none will be selected if no options have the attribute.<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select multiple&gt;\n &lt;option value=\"option1\" selected&gt;Some option&lt;\/option&gt;\n &lt;option value=\"option2\" selected&gt;Some option&lt;\/option&gt; \n&lt;\/select&gt;<\/pre>\n\n<h2 class=\"wp-block-heading\" id=\"h-option-groups\">Option Groups<\/h2>\n\n<p class=\"wp-block-paragraph\">You can neatly group your options within a selection menu in order to provide a more structured layout in a long list of options by using the <strong><em>&lt;optgroup&gt;<\/em><\/strong> element.<\/p>\n\n<p class=\"wp-block-paragraph\">The syntax is very basic, by simply using the element with a label attribute to identify the title for the group, and<br \/>containing zero or more options that should be within that group.<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select name=\"\"&gt;\n &lt;option value=\"milk\"&gt;Milk&lt;\/option&gt;\n &lt;optgroup label=\"Fruits\"&gt;\n &lt;option value=\"banana\"&gt;Bananas&lt;\/option&gt;\n &lt;option value=\"strawberry\"&gt;Strawberries&lt;\/option&gt;\n &lt;\/optgroup&gt;\n &lt;optgroup label=\"Vegetables\" disabled&gt;\n &lt;option value=\"carrot\"&gt;Carrots&lt;\/option&gt;\n &lt;option value=\"zucchini\"&gt;Zucchini&lt;\/option&gt;\n &lt;\/optgroup&gt;\n&lt;\/select&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">When using option groups, not all options need to be contained within a group. As well, disabling an option group<br \/>will disable all options within the group, and it is not possible to manually re-enable a single option within a<br \/>disabled group.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-datalist\">Datalist<\/h2>\n\n<p class=\"wp-block-paragraph\">The <strong><em>&lt;datalist&gt;<\/em><\/strong> tag specifies a list of pre-defined options for an <strong><em>&lt;input&gt;<\/em><\/strong> element. It provide an &#8220;autocomplete&#8221; feature on <strong><em>&lt;input&gt;<\/em><\/strong> elements. Users will see a drop-down list of options as they write.<\/p>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;input list=\"Languages\"&gt;<\/pre>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;datalist id=\"Languages\"&gt;\n &lt;option value=\"PHP\"&gt;\n &lt;option value=\"Perl\"&gt;\n &lt;option value=\"Python\"&gt;\n &lt;option value=\"Ruby\"&gt;\n &lt;option value=\"C+\"&gt;\n&lt;\/datalist&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\"><strong>Browser Support<\/strong><\/p>\n\n<figure>\n<table>\n<tbody>\n<tr>\n<td><strong>Chrome<\/strong><\/td>\n<td><strong>Edge<\/strong><\/td>\n<td><strong>Mozilla<\/strong><\/td>\n<td><strong>Safari<\/strong><\/td>\n<td><strong>Opera<\/strong><\/td>\n<\/tr>\n<tr>\n<td>20.0<\/td>\n<td>10.0<\/td>\n<td>4.0<\/td>\n<td>Not Supported<\/td>\n<td>9.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Select Menu The &lt;select&gt; element generates a drop-down menu from which the user can choose an option. Changing the Size You can change the size of the selection menu with&hellip;<\/p>\n","protected":false},"author":1,"featured_media":546,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[73,76,111,77],"tags":[110,112,136,154,113],"class_list":["post-428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-html-5-notes-for-professional","category-javascript","tag-html-5-notes","tag-html-5-tutorial","tag-html-resources","tag-html-with-css","tag-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Chapter 27: Selection Menu Controls - DigitalHubZ<\/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.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chapter 27: Selection Menu Controls\" \/>\n<meta property=\"og:description\" content=\"Select Menu The &lt;select&gt; element generates a drop-down menu from which the user can choose an option. Changing the Size You can change the size of the selection menu with&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/\" \/>\n<meta property=\"og:site_name\" content=\"DigitalHubZ\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-13T06:58:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T10:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-27.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"394\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DigitalHubZ\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DigitalHubZ\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/\"},\"author\":{\"name\":\"DigitalHubZ\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\"},\"headline\":\"Chapter 27: Selection Menu Controls\",\"datePublished\":\"2021-07-13T06:58:56+00:00\",\"dateModified\":\"2026-02-26T10:45:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/\"},\"wordCount\":695,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-27.jpg\",\"keywords\":[\"HTML 5 Notes\",\"HTML 5 Tutorial\",\"HTML Resources\",\"HTML with CSS\",\"HTML5\"],\"articleSection\":[\"CSS\",\"HTML\",\"HTML 5 Notes For Professional\",\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/\",\"name\":\"Chapter 27: Selection Menu Controls - DigitalHubZ\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-27.jpg\",\"datePublished\":\"2021-07-13T06:58:56+00:00\",\"dateModified\":\"2026-02-26T10:45:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-27.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-27.jpg\",\"width\":945,\"height\":394},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-27-selection-menu-controls\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chapter 27: Selection Menu Controls\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"name\":\"DigitalHubZ\",\"description\":\"Future-Ready Digital Solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\",\"name\":\"DigitalHubZ\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"width\":1232,\"height\":369,\"caption\":\"DigitalHubZ\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\",\"name\":\"DigitalHubZ\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"caption\":\"DigitalHubZ\"},\"sameAs\":[\"https:\\\/\\\/digitalhubz.com\"],\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/author\\\/digi_v1_wp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Chapter 27: Selection Menu Controls - DigitalHubZ","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.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/","og_locale":"en_US","og_type":"article","og_title":"Chapter 27: Selection Menu Controls","og_description":"Select Menu The &lt;select&gt; element generates a drop-down menu from which the user can choose an option. Changing the Size You can change the size of the selection menu with&hellip;","og_url":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/","og_site_name":"DigitalHubZ","article_published_time":"2021-07-13T06:58:56+00:00","article_modified_time":"2026-02-26T10:45:40+00:00","og_image":[{"width":945,"height":394,"url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-27.jpg","type":"image\/jpeg"}],"author":"DigitalHubZ","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DigitalHubZ","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#article","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/"},"author":{"name":"DigitalHubZ","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873"},"headline":"Chapter 27: Selection Menu Controls","datePublished":"2021-07-13T06:58:56+00:00","dateModified":"2026-02-26T10:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/"},"wordCount":695,"commentCount":3,"publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-27.jpg","keywords":["HTML 5 Notes","HTML 5 Tutorial","HTML Resources","HTML with CSS","HTML5"],"articleSection":["CSS","HTML","HTML 5 Notes For Professional","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/","url":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/","name":"Chapter 27: Selection Menu Controls - DigitalHubZ","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-27.jpg","datePublished":"2021-07-13T06:58:56+00:00","dateModified":"2026-02-26T10:45:40+00:00","breadcrumb":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#primaryimage","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-27.jpg","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-27.jpg","width":945,"height":394},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-27-selection-menu-controls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitalhubz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Chapter 27: Selection Menu Controls"}]},{"@type":"WebSite","@id":"https:\/\/www.digitalhubz.com\/blog\/#website","url":"https:\/\/www.digitalhubz.com\/blog\/","name":"DigitalHubZ","description":"Future-Ready Digital Solutions","publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitalhubz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitalhubz.com\/blog\/#organization","name":"DigitalHubZ","url":"https:\/\/www.digitalhubz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","width":1232,"height":369,"caption":"DigitalHubZ"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873","name":"DigitalHubZ","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","caption":"DigitalHubZ"},"sameAs":["https:\/\/digitalhubz.com"],"url":"https:\/\/www.digitalhubz.com\/blog\/author\/digi_v1_wp\/"}]}},"_links":{"self":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":4,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":54838,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/428\/revisions\/54838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media\/546"}],"wp:attachment":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media?parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/categories?post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/tags?post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}