{"id":47039,"date":"2019-10-31T03:01:52","date_gmt":"2019-10-30T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47039"},"modified":"2019-10-30T13:08:49","modified_gmt":"2019-10-30T03:08:49","slug":"pdf-slideshow-and-form-creation-helper-preview-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-helper-preview-tutorial\/","title":{"rendered":"PDF Slideshow and Form Creation Helper Preview Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Slideshow and Form Creation Helper Preview Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator_html_rendering_preview.jpg\" title=\"PDF Slideshow and Form Creation Helper Preview Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">PDF Slideshow and Form Creation Helper Preview Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PDF Slideshow and Form Creation Helper Primer Tutorial' href='#pdfsfchxt'>PDF Slideshow and Form Creation Helper Primer Tutorial<\/a> suited those used to uploading data, a lot of which will involve those users knowing a bit about HTML coding, in relation to that presentation of it within an HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element.  We&#8217;re still asking you to know HTML coding as we add onto yesterday&#8217;s &#8230;<\/p>\n<ul>\n<li>HTML (or Text) view (in <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a>) &#8230; with, today &#8230;<\/li>\n<li>Visual view (in overlayed new window, and available to the user via a new light blue non-form-submit button)<\/li>\n<\/ul>\n<p> &#8230; mimicking what a lot of Content Management Systems (CMS) provide for their Content Managers, that being a way HTML input data, that can be previewed by that user in a &#8220;Visual view&#8221; showing an HTML webpage rendering of that HTML coding.  This can reassure users that what they are (HTML) coding will produce a look in keeping with what they were expecting.<\/p>\n<p>In our <a target=_blank title='WordPress.org' href='http:\/\/wordpress.org'>WordPress<\/a> blog CMS they do this for the Content Writer with two tabs called &#8220;Text&#8221; (ie. the HTML coding) and &#8220;Visual&#8221; (ie. the HTML as rendered by the web browser involved).  That is cute, and easy to use, but we see the &#8220;Visual&#8221; part as optional, and don&#8217;t really wish to prioritise its use.  As well as that, it is a stepping stone to another improvement we wish to make, soon.<\/p>\n<p>Again, we have <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator.php--GETME\" title=\"form_creator.php\">form_creator.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator.php\" title=\"Click picture\">live run<\/a> for you to try.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>The HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element is truly amazing, and the performing of today&#8217;s work has clarified (some more <font size=1>&#8230; have been letting it wash over for years!<\/font>) how it works in my mind.<\/p>\n<p>There are two parts to the &#8220;content&#8221; of a textarea element we want to concentrate on.  They are its &#8220;innerHTML&#8221; (what it looks like) and its &#8220;value&#8221; (what gets passed with an HTML form as its data).<\/p>\n<p>We often, here at RJM Programming, start a textarea&#8217;s existence with HTML of a textarea with a blank &#8220;value&#8221; but a filled in &#8220;innerHTML&#8221;, and that filling in can be HTML code with all the caretted &lt; and &gt; data we get used to as Web Content managers.  Immediately, on that textarea element&#8217;s onload, that textarea will be given a &#8220;value&#8221;.<\/p>\n<p>But if you make a change to that textarea data, or even if you don&#8217;t, and go back to see the relationship &#8230;<\/p>\n<ul>\n<li>&#8220;value&#8221; is full of the caretted &lt; and &gt; characters &#8230; but &#8230;<\/li>\n<li>&#8220;innerHTML&#8221; is full of corresponding &amp;lt; and &amp;gt; <a target=_blank title='HTML enties information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references'>HTML entities<\/a><\/li>\n<\/ul>\n<p> &#8230; and as explainers of HTML (in online blogs and online HTML articles) around the world will know, that use of &amp;lt; and &amp;gt; within &lt;code&gt;&lt;\/code&gt; elements for instance, saves the web browser by thinking it needs to interpret the carets of HTML code, and, instead, as we the explainers would prefer too, just display the caret characters as displayed text.<\/p>\n<p>This is a topic, and it feels alive, and undertold, &#8220;The Wonders of the HTML Textarea Element&#8221;, that you, dear reader, may want to individually look into yourself, by writing your own HTML to see this textarea behaviour yourself.   And we haven&#8217;t even touched on, here, possibilities regarding setting a textarea to &#8220;readonly&#8221; true?  And how the web browsers often allow for resizing it so easily?  All fascinating!  We suspect it was fascinating to the web browser and mobile platform programmers as well, and they came up with a very powerful and useful tool for lots of online content writers out there.<\/p>\n<hr>\n<p id='pdfsfchxt'>Previous relevant <a target=_blank title='PDF Slideshow and Form Creation Helper Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-helper-primer-tutorial\/'>PDF Slideshow and Form Creation Helper 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\/PHP\/form_creator.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Slideshow and Form Creation Helper Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator.jpg\" title=\"PDF Slideshow and Form Creation Helper Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">PDF Slideshow and Form Creation Helper Primer Tutorial<\/p><\/div>\n<p>Our recent work involving the great <a target=_blank title='Fpdf PHP class' href='HTTP:\/\/www.fpdf.org\/'>Fpdf<\/a> creator of PDF files when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-formdata-object-no-body-php-pdf-tutorial\/' title='Ajax FormData Object No Body PHP PDF Tutorial'>Ajax FormData Object No Body PHP PDF Tutorial<\/a> has got us starting on a new PDF (PHP) web application we are starting out thinking will help with &#8230;<\/p>\n<ul>\n<li>online forms (probably via thinking in terms of <a target=_blank title='Fpdf PHP class' href='HTTP:\/\/www.fpdf.org\/'>Fpdf<\/a> open source programmers like <a target=_blank title='Useful link' href='HTTP:\/\/www.fpdf.org\/en\/script\/script50.php' title='Rick van Buuren and Cl\u00e9ment Lavoillotte Fdf code, thanks'>Rick van Buuren and Cl\u00e9ment Lavoillotte<\/a>&#8216;s excellent HTML table rendering ideas) via HTML table intermediate user interactions &#8230; and &#8230;<\/li>\n<li>slideshows<\/li>\n<\/ul>\n<p> &#8230; but we will not be surprised if the project branches out into other ideas.  We&#8217;ll see over time.<\/p>\n<p>We hope you come along for the trip starting with a bit of a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator.php_GETME\" title=\"form_creator.php\">form_creator.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/form_creator.php\" title=\"Click picture\">live run<\/a> for you to try, where we allow you to enter (and be able to change) some HTML table code (if that&#8217;s what you end up with?!) in a pink HTML textarea element, and that will become PDF should you click the underlying HTML form&#8217;s yellow submit button.<\/p>\n<p>Hope to see you for tomorrow&#8217;s PDF writing developments here.<\/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='#d46998' onclick='var dv=document.getElementById(\"d46998\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46998' 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='#d47039' onclick='var dv=document.getElementById(\"d47039\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47039' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s PDF Slideshow and Form Creation Helper Primer Tutorial suited those used to uploading data, a lot of which will involve those users knowing a bit about HTML coding, in relation to that presentation of it within an HTML textarea &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-helper-preview-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,37],"tags":[258,327,577,932,997,1049,1319,1404,1418],"class_list":["post-47039","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-content-management-systems","tag-did-you-know","tag-html-entities","tag-php","tag-programming","tag-render","tag-tutorial","tag-web-browser","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47039"}],"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=47039"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47039\/revisions"}],"predecessor-version":[{"id":47045,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47039\/revisions\/47045"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}