{"id":6926,"date":"2014-03-23T05:05:01","date_gmt":"2014-03-22T18:05:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6926"},"modified":"2014-03-23T05:05:01","modified_gmt":"2014-03-22T18:05:01","slug":"htmljavascript-email-form-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-email-form-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Email Form Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/FormEmail\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Email Form Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/FormEmail\/TextArea_RadioButton_CheckBox_Form.jpg\" title=\"HTML\/Javascript Email Form Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Email Form Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s HTML\/Javascript (and bit of CSS) topic will be very familiar to lots of people.   It involves the &#8220;Contact Us&#8221; type of email form that makes use of a TextArea HTML tag.<\/p>\n<p>So let&#8217;s summarise the points of interest with today&#8217;s (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/FormEmail\/\" title=\"click picture\">live run<\/a>) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/FormEmail\/TextArea_RadioButton_CheckBox_Form.jpg\" title=\"picture\">tutorial<\/a> &#8230; pros\/cons:<\/p>\n<ul>\n<li>HTML <a target=_blank title='HTML form tag' href='http:\/\/www.w3schools.com\/tags\/tag_form.asp'>Form<\/a> (tag) used with single webpage usage (ie. no PHP\/no &#8220;post&#8221; method) (ie. Javascript form validation\/ use &#8220;get&#8221; method) and submitting to <a target=_blank title='Email Client information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Email_client'>Email Client<\/a> &#8230; simple<\/li>\n<li>Security features of passing email through the Email Client &#8230; avoids issues like <a target=_blank title='phishing' href='http:\/\/en.wikipedia.org\/wiki\/Phishing'>phishing<\/a><\/li>\n<li>Implications of passing email through the Email Client &#8230; involves an extra button press<\/li>\n<li>Allow &#8220;behind the scenes peek&#8221; via a &#8220;just try&#8221; option showing the potential call of the Email Client &#8230; returning to webpage via &#8220;get&#8221; method<\/li>\n<li>Get query string values in Javascript &#8230; thanks to this <a target=_blank title='Get query string values in Javascript' href='http:\/\/stackoverflow.com\/questions\/901115\/how-can-i-get-query-string-values-in-javascript'>link<\/a><\/li>\n<li>Use of <a target=_blank title='Example of use mailto tag within an \"a\" tag' href='http:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_mailto'>mailto<\/a> tag to reach Email Client &#8230; via &#8220;get&#8221; method &#8230; message size limit implication of using &#8220;get&#8221; rather than &#8220;post&#8221; &#8230; security concerns over &#8220;get&#8221; method usage &#8230; hence use of <i>&#8220;small&#8221;<\/i> (in the webpage wording)<\/li>\n<li>No email attachments with this method<\/li>\n<li>No <a target=_blank title='CAPTCHA' href='http:\/\/en.wikipedia.org\/wiki\/CAPTCHA'>CAPTCHA<\/a> &#8220;non-robot&#8221; (ie. real person) confirmation with this method<\/li>\n<li>Logic to use of <a target=_blank title='HTML TextArea tag' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>TextArea<\/a> tag, in particular with respect to carriage return processing via use of Javascript <a target=_blank title='encodeURIComponent' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeURIComponent.asp'>encodeURIComponent()<\/a>\/<a target=_blank title='decodeURIComponent' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeURIComponent.asp'>decodeURIComponent()<\/a><\/li>\n<li>Logic to use of <a target=_blank title='HTML CheckBox tag' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>Check Box<\/a> (for &#8220;mode of use&#8221; decision making)<\/li>\n<li>Logic to use of <a target=_blank title='HTML Radio Button tag' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>Radio Buttons<\/a> (for other decision making)<\/li>\n<li>Use of <a target=_blank title='HTML Input tag' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>Input<\/a> tag type=&#8217;hidden&#8217; form elements<\/li>\n<li>Use of <a target=_blank title='HTML Input tag' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>Input<\/a> tag type=&#8217;text&#8217; form elements (mandatory &#8230; use of &#8216;*&#8217; on form)<\/li>\n<li>Javascript form validation of mandatory Input tag type=&#8217;text&#8217; with extra email address logic<\/li>\n<li>In an HTML form equivalent id= for each name= can be useful regarding Javascript DOM logic (as required)<\/li>\n<li>No Table nor Div HTML here, but can be a styling method to employ for such forms<\/li>\n<\/ul>\n<p>Here is some downloadable HTML programming source code you could call <a target=_blank title=\"EmailStyleForm.html\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/FormEmail\/EmailStyleForm.html_GETME\">EmailStyleForm.html<\/a><\/p>\n<p>You will find, in the blogging world, with the major blogging software suites, that &#8220;Contact Us&#8221; email forms will have many plugins available for you to research and explore.   The effectiveness of the plugins should be measured along with what your web\/email hosting is capable of, because if your web\/email hosting does not deliver what you want, then plugins do not normally fix the problem.<\/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='#d6926' onclick='var dv=document.getElementById(\"d6926\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=form-validation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6926' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s HTML\/Javascript (and bit of CSS) topic will be very familiar to lots of people. It involves the &#8220;Contact Us&#8221; type of email form that makes use of a TextArea HTML tag. So let&#8217;s summarise the points of interest with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-email-form-primer-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,17,37],"tags":[202,281,354,380,382,549,576,652,997,1024,1262,1319],"class_list":["post-6926","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gui","category-tutorials","tag-checkbox","tag-css","tag-dom","tag-email","tag-email-form","tag-gui","tag-html","tag-javascript","tag-programming","tag-radio-button","tag-textarea","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6926"}],"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=6926"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6926\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=6926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=6926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=6926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}