{"id":59865,"date":"2023-06-25T03:01:12","date_gmt":"2023-06-24T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59865"},"modified":"2023-06-24T16:15:08","modified_gmt":"2023-06-24T06:15:08","slug":"html-form-use-of-disabled-input-elements-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-form-use-of-disabled-input-elements-tutorial\/","title":{"rendered":"HTML Form Use of Disabled Input Elements Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_of_disabled.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Form Use of Disabled Input Elements Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_of_disabled.jpg\" title=\"HTML Form Use of Disabled Input Elements Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Form Use of Disabled Input Elements Tutorial<\/p><\/div>\n<p>Regarding that work last week, with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-and-or-map-chart-modes-of-use-tutorial\/' title='Google Chart Geo and or Map Chart Modes of Use Tutorial'>Google Chart Geo and or Map Chart Modes of Use Tutorial<\/a>, involving &#8230;<\/p>\n<ul>\n<li>HTML <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_form.asp'>form<\/a> element navigation ideas<\/li>\n<li>asking one (interactively entered) user question at a time<\/li>\n<li>reminiscent of how command line desktop applications using interactive entry first worked<\/li>\n<li>mimicking functionality we had a macOS Korn Shell and Windows Batch File achieving from the underlying operating system command line<\/li>\n<\/ul>\n<p> &#8230; we wanted to &#8220;go forensic&#8221; today, allowing the user to do their own decoupling and recoupling of the innards of this HTML form work, to, perhaps, learn a lot about HTML and Javascript <a target=_blank title='Javascript DOM information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_htmldom.asp'>DOM<\/a> and form related events and interactive entry methodologies &#8230;<\/p>\n<ul>\n<li>form elements<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_input.asp' title='HTML input tag information from w3schools'>input<\/a> elements<\/li>\n<li><a target=_blank title='Javascript onsubmit event information from W3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'>onsubmit<\/a> event Javascript<\/li>\n<li>inline <a target=_blank title='Javascript onblur event information from W3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onblur.asp'>onblur<\/a> event logic for input elements<\/li>\n<li><a target=_blank title='Disabled attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_disabled.asp'>disabled<\/a> attribute for HTML input elements<\/li>\n<li>control of <a target=_blank title='Focus() information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_html_focus.asp'>focus<\/a> for HTML input elements<\/li>\n<li><a target=_blank title='HTML placeholder attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_placeholder.asp'>placeholder<\/a> attribute use for HTML input elements<\/li>\n<\/ul>\n<p> &#8230; directly, and also, because of how our <i>decoupling and recoupling HTML web application<\/i> functions &#8230;<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_div.asp' title='HTML div tag information from w3schools'>div<\/a> elements with <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a> attribute<\/li>\n<li><a target=_blank title='HTML textarea element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element along with its <a target=_blank title='Javascript onsubmit event information from W3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onchange.asp'>onchange<\/a> event<\/li>\n<li><a target=_blank title='HTML DOM insertadjacentelement info from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_node_insertadjacentelement.asp'>overriding of Javascript<\/a>, using <a target=_blank title='Javascript DOM information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_htmldom.asp'>DOM<\/a>, at times well after document loading<\/li>\n<li>tab order considerations<\/li>\n<li>multiple form considerations<\/li>\n<li><a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/<a target=_blank title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>summary<\/a> element <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts'>&#8220;reveal&#8221;<\/a> talents<\/li>\n<\/ul>\n<p> &#8230; we think best explained by you seeing it run below &#8230;<\/p>\n<p><iframe src=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_of_disabled.html style=width:100%;height:1400px;><\/iframe><\/p>\n<p> &#8230; using <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_of_disabled.html_GETME\">this proof of concept first draft use_of_disabled.html code<\/a>, and its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_of_disabled.html\" title=\"Click picture\">web application<\/a>.  Feel free to try achieving your own HTML form tailorings!<\/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='#d59865' onclick='var dv=document.getElementById(\"d59865\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/disabled\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59865' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Regarding that work last week, with Google Chart Geo and or Map Chart Modes of Use Tutorial, involving &#8230; HTML form element navigation ideas asking one (interactively entered) user question at a time reminiscent of how command line desktop applications &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-form-use-of-disabled-input-elements-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":[112,2442,2310,2382,342,354,2570,400,448,452,576,609,2780,652,830,860,1631,1712,2643,997,998,1063,2311,2001,4376,1262],"class_list":["post-59865","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-attribute","tag-contenteditable","tag-details","tag-disabled","tag-div","tag-dom","tag-edit","tag-event","tag-focus","tag-form","tag-html","tag-input","tag-interactive-entry","tag-javascript","tag-navigation","tag-onblur","tag-onchange","tag-onsubmit","tag-placeholder","tag-programming","tag-programming-tutorial","tag-reveal","tag-summary","tag-tab","tag-tab-order","tag-textarea"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59865"}],"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=59865"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59865\/revisions"}],"predecessor-version":[{"id":59877,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59865\/revisions\/59877"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}