{"id":44849,"date":"2019-05-02T03:01:41","date_gmt":"2019-05-01T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44849"},"modified":"2019-05-02T06:47:42","modified_gmt":"2019-05-01T20:47:42","slug":"html-datalist-tag-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-datalist-tag-quiz-tutorial\/","title":{"rendered":"HTML Datalist Tag Quiz Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_capital_quiz_datalist.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Datalist Tag Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ccq.jpg\" title=\"HTML Datalist Tag Quiz Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Datalist Tag Quiz Tutorial<\/p><\/div>\n<p>After the preparatory work of <a title='HTML Datalist Tag Primer Tutorial' href='#htmldtpt'>HTML Datalist Tag Primer Tutorial<\/a> we want to use the HTML5 newly released tag, the <a target=_blank title='HTML datalist tag information from W3Schools' href='https:\/\/www.w3schools.com\/tags\/tag_datalist.asp'>datalist<\/a> tag, for the purposes of writing a simple &#8220;Capitals of Countries&#8221; quiz.<\/p>\n<p>The upshot is &#8230;<\/p>\n<ul>\n<li>most pleasing in Firefox where the datalist happens and it doesn&#8217;t give the game away &#8230; whereas &#8230;<\/li>\n<li>sort of pleasing in Google Chrome and Opera where the datalist happens but it gives the game away to our minds &#8230; we&#8217;ll let you  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_capital_quiz_datalist.html\" title=\"Click picture\">find out how<\/a> &#8230;<\/li>\n<li>in Safari the datalist does not show (and we did not test Internet Explorer nor Microsoft Edge)<\/li>\n<\/ul>\n<p>The HTML code today you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country_capital_quiz_datalist.html_GETME\" title=\"country_capital_quiz_datalist.html\">country_capital_quiz_datalist.html<\/a> also has a kludgy mapping feel to it, because the datalist tag does not respond to any of the useful events.   Nevertheless, we hope it&#8217;s food for thought for you.<\/p>\n<hr>\n<p id='htmldtpt'>Previous relevant <a target=_blank title='HTML Datalist Tag Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-datalist-tag-primer-tutorial\/'>HTML Datalist Tag Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/datalist_poc.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Datalist Tag Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/datalist_poc.jpg\" title=\"HTML Datalist Tag Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Datalist Tag Primer Tutorial<\/p><\/div>\n<p>The release of HTML5 brought with it a smorgasbord of improvements, not all of them supported on all the platforms and web browsers <font size=1>&#8230; hopefully, this does not make you cross?!<\/font><\/p>\n<p>Am really happy, today, to remind you of an HTML5 newly released HTML tag, the <a target=_blank title='HTML datalist tag information from W3Schools' href='https:\/\/www.w3schools.com\/tags\/tag_datalist.asp'>datalist<\/a> tag.  To me, this one goes into the &#8220;old chestnut&#8221; categorization, because this datalist tag completes for me (and improves on) a wish I&#8217;ve had forevvvveer with HTML(5) &#8230; give me a tag like the totally brilliant (GUI feature called) <a target=_blank title='Windows Forms comboBox information from Microsoft' href='https:\/\/docs.microsoft.com\/en-us\/dotnet\/api\/system.windows.forms.combobox'>ComboBox Class (System.Windows.Forms) | Microsoft Docs<\/a>.  The ComboBox of the Windows Forms (desktop application) days (which still exist of course) combined &#8230;<\/p>\n<ul>\n<li>need to be prompted for ideas regarding a data item &#8230; the &#8220;dropdown&#8221; bit of a ComboBox &#8230; while also attending to the &#8230;<\/li>\n<li>need to allow users knowing &#8220;exactly&#8221; what they want, having the flexibility to type in &#8220;exactly&#8221; what they want (with the keyboard)<\/li>\n<\/ul>\n<p> &#8230; cute, huh?!  And then to my mind, not sure whether the Windows Forms ComboBox has come along too over time, but noticed writing today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/datalist_poc.html_GETME\" title=\"datalist_poc.html\">datalist_poc.html<\/a> &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/datalist_poc.html\" title=\"Click picture\">live run<\/a> that the joy you get from a (HTML input) textbox remembering a past entry is reflected in an updated (even with an HR element separating) &#8220;dropdown&#8221; list member to the datalist tag &#8230; cuter still, huh?!<\/p>\n<p><a target=_blank title=\"but there's more\" href=\"http:\/\/www.youtube.com\/watch?v=iiATDMHU7gc\">&#8220;But there&#8217;s more&#8221;<\/a>.  The datalist tag performs autocompletion functionality via the words of its dropdown list.  Cuteness instilled, huh?!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44653' onclick='var dv=document.getElementById(\"d44653\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44653' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44849' onclick='var dv=document.getElementById(\"d44849\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44849' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>After the preparatory work of HTML Datalist Tag Primer Tutorial we want to use the HTML5 newly released tag, the datalist tag, for the purposes of writing a simple &#8220;Capitals of Countries&#8221; quiz. The upshot is &#8230; most pleasing in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-datalist-tag-quiz-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2125,1695,2928,2081,2927,319,367,549,576,578,673,997,1022,1866,1319,2929],"class_list":["post-44849","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-autocomplete","tag-autocompletion","tag-combobox","tag-country","tag-datalist","tag-desktop","tag-dropdown","tag-gui","tag-html","tag-html5","tag-keyboard","tag-programming","tag-quiz","tag-select","tag-tutorial","tag-windows-forms"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44849"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=44849"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44849\/revisions"}],"predecessor-version":[{"id":44860,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44849\/revisions\/44860"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}