{"id":773,"date":"2012-10-05T17:05:41","date_gmt":"2012-10-05T17:05:41","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=773"},"modified":"2023-07-29T11:40:03","modified_gmt":"2023-07-29T11:40:03","slug":"14-forms","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/14-forms\/","title":{"rendered":"14 Forms"},"content":{"rendered":"<p>Forms are vital tools for collecting information from users, such as  their name, email address, opinions, etc. A form will take input from the user and may store that data into a file, place an order, gather user statistics, register the person or subscribe them to a newsletter.<\/p>\n<h2>HTML<\/h2>\n<\/p>\n<p>The form itself is created in HTML, and starts with the <code>&lt;form><\/code>element and ends when that element closes. All the form elements are within the form element, mostly consisting of various input elements.\n<\/p>\n<p>The input element changes according to its attributes. If there are no attributes, it provides a one line text field:<\/p>\n<h4>HTML Code:<\/h4>\n<pre>\r\n&lt;form>\r\n\t&lt;input>\r\n&lt;\/form>\r\n<\/pre>\n<h4>Result:<\/h4>\n<form>\n\t<input \/><br \/>\n<\/form>\n<h2>Attributes<\/h2>\n<\/p>\n<p>You add the <code>type=\"text\"<\/code>  or <code>type=\"submit\"<\/code> attributes to the  <code>&lt;input><\/code>  tag to specify if it is text or a submit button. Add a <code>name=\"name\"<\/code> attribute to reference the form element when it is sent. The <code>size<\/code> attribute sets the width, measured in blank spaces, and the number of characters can be limited using the <code> maxlength=\"\"<\/code> attribute.\n<\/p>\n<p>The submit button is created by using the <code>input<\/code> tag with a <code>type<\/code> attribute set to <code>submit<\/code>. The <code>value=\"Send\"<\/code> attribute provides the text for the button, so the value <code>send<\/code> will label the submit button as &#8220;send&#8221;. Pressing the button engages the <code>&lt;form><\/code> action.\n<\/p>\n<p>There has to be a mechanism for the form to send the information it collects. The <code>&lt;form><\/code> element contains a method attribute <code>method=\"post\"<\/code> that is usually set to <code>post<\/code>. It can also be set to <code>get<\/code>, which appends the form information to the URL.\n<\/p>\n<p>The <code>&lt;form><\/code> also has an action attribute <code>action=\"url.php\"<\/code>, which specifies the URL the data is sent to. In this example, it is set to use the email client with the &#8220;mailto:&#8221; command. <\/p>\n<h4>HTML Code:<\/h4>\n<pre>\r\n&lt;form method=\"post\" action=\"mailto:name@address.com\">\r\n\tName: &lt;input type=\"text\" size=\"30\" maxlength=\"60\" name=\"name\"> &lt;br \/>\r\n\t&lt;input type=\"submit\" value=\"Send\"> \r\n&lt;\/form>\r\n<\/pre>\n<h4>Result:<\/h4>\n<form method=\"post\" action=\"mailto:name@address.com\">\nName: <input type=\"text\" size=\"30\" maxlength=\"60\" name=\"name\"\/><br \/>\n<input type=\"submit\" value=\"Send\"\/><br \/>\n<\/form>\n<\/p>\n<p>Filling out your name and sending it will open up your email client, and create an email addressed to name@address.com. and the body of the email contains whatever name you&#8217;ve entered. This paring up of the name of the form element with the information entered needs to happen for each form element that gets sent. <\/p>\n<h2>Radio Buttons<\/h2>\n<\/p>\n<p>Of the different types of input, the type=<code>radio <\/code>  allows for only one choice out of a number of options. This is accomplished by using the same <code>name<\/code> for each of the options, so that only one can be chosen. Each option has its own <code>value<\/code> however, which is sent when that option is selected. <\/p>\n<h4>HTML Code:<\/h4>\n<pre>\r\n&lt;input type=\"radio\" name=\"color\" value=\"red\"> Red  \r\n&lt;input type=\"radio\" name=\"color\" value=\"green\"> Green  \r\n&lt;input type=\"radio\" name=\"color\" value=\"blue\"> Blue  \r\n<\/pre>\n<h4>Result:<\/h4>\n<form method=\"post\" action=\"mailto:name@address.com\">\n<p style=\"float:left;\">Additive Colors: <\/p>\n<p style=\"float:left\">\n<input type=\"radio\" name=\"color\" value=\"red\"\/> Red <\/p>\n<p style=\"float:left\">\n<input type=\"radio\" name=\"color\" value=\"green\"\/> Green  <\/p>\n<p style=\"float:left\">\n<input type=\"radio\" name=\"color\" value=\"blue\"\/> Blue\n <\/p>\n<p style=\"float:left\"> <input type=\"submit\" value=\"Send\"\/>\n<\/p>\n<\/form>\n<h2>Check Boxes<\/h2>\n<\/p>\n<p>Check boxes are similar to radio buttons but its possible to click on more than one option.<\/p>\n<h4>HTML Code:<\/h4>\n<pre>\r\n&lt;input type=\"checkbox\" name=\"color\" value=\"cyan\"> C \r\n&lt;input type=\"checkbox\" name=\"color\" value=\"magenta\"> M \r\n&lt;input type=\"checkbox\" name=\"color\" value=\"yellow\"> Y \r\n&lt;input type=\"checkbox\" name=\"color\" value=\"black\"> K \r\n<\/pre>\n<h4>Result:<\/h4>\n<form method=\"post\" action=\"mailto:name@address.com\">\n<p style=\"float:left;\">Subtractive Colors:\n<\/p>\n<p style=\"float:left\"><input type=\"checkbox\" name=\"color\" value=\"cyan\"\/> C\n<\/p>\n<p style=\"float:left\"><input type=\"checkbox\" name=\"color\" value=\"magenta\"\/> M\n<\/p>\n<p style=\"float:left\"><input type=\"checkbox\" name=\"color\" value=\"yellow\"\/> Y\n<\/p>\n<p style=\"float:left\"><input type=\"checkbox\" name=\"color\" value=\"black\"\/> K\n <\/p>\n<p style=\"float:left\"> <input type=\"submit\" value=\"Send\"\/>\n<\/p>\n<\/form>\n<h2>Drop Down Lists<\/h2>\n<\/p>\n<p>Another way to present the choices is as a drop down menu, which are especially good when there are lots of options. The drop down list is created by the <code>&lt;select><\/code> with each choice enclosed by an <code>option<\/code> tag. <\/p>\n<h4>HTML Code:<\/h4>\n<pre>\r\n&lt;select name=\"shade\">\r\n&lt;option>white&lt;\/option> \r\n&lt;option>light grey&lt;\/option>\r\n&lt;option>grey&lt;\/option>\r\n&lt;option>dark grey&lt;\/option>\r\n&lt;option>black&lt;\/option>\r\n&lt;\/select>\r\n<\/pre>\n<h4>Result:<\/h4>\n<form method=\"post\" action=\"mailto:name@address.com\">\n<p style=\"float:left;\">Shade?\n<\/p>\n<p style=\"float:left\">\n<select name=\"shade\"><option>white<\/option><option>light grey<\/option><option>grey<\/option><option>dark grey<\/option><option>black<\/option><\/select>\n <\/p>\n<p style=\"float:left\"> <input type=\"submit\" value=\"Send\"\/>\n<\/p>\n<\/form>\n<h2>HTML Text Area<\/h2>\n<\/p>\n<p>All of the input fields have been single lines up to this point. The <code>textarea<\/code> provides a larger area to enter text, specified in rows and columns. A row is one line of text high while column unit is a character wide. Another setting is the wrap, which can be either <code>virtual<\/code>, which wraps the words for the person entering the text, but the text is sent without returns, or, <code>physical<\/code>, where the text is sent wrapped, just as it appears in the text area. You can also turn text wrap off.<\/p>\n<h4>HTML Code:<\/h4>\n<pre>\r\n&lt;textarea rows=\"5\" cols=\"80\" wrap=\"physical\" name=\"comments\">\r\nEnter Comments Here:\r\n&lt;\/textarea>\r\n<\/pre>\n<h4>Result:<\/h4>\n<form method=\"post\" action=\"mailto:name@address.com\">\nEnter Comments Here:<br \/>\n<textarea rows=\"5\" cols=\"80\" wrap=\"physical\" name=\"comments\"><\/textarea><br \/>\n<input type=\"submit\" value=\"Email Yourself\"\/><br \/>\n<\/form>\n<\/p>\n<p>If you enter text and press the send button, you can see that the words are concatenated (meaning added together) with plus signs and because the wrap is physical, the return is represented by the code: <code>%0D%0A<\/code>.<\/p>\n<h2>PHP script<\/h2>\n<\/p>\n<p>Thus far the actions for all of these examples has been the &#8220;mailto:&#8221; which sent the text to the email client. Sending an email with PHP is easy enough. All you need is the PHP <code>mail() <\/code>function: <\/p>\n<pre>\r\nmail(\"recipient@domain.com\", \"This is the message subject\", \"This is the message body\");\r\n<\/pre>\n<\/p>\n<p>It gets more complicated when you need to connect up and receive the information, to add security measures, verify the form entry, and so on.  Most hosting services have an email script that you can use, and all you need to do is send the form to that script in the <code>action=\"email-script.php\"<\/code> attribute. <\/p>\n<h2>Setting Up Your Form<\/h2>\n<\/p>\n<p>There are a lot of PHP email scripts on the web, and <a href=\"http:\/\/www.freecontactform.com\/free.php\">Free Contact Form<\/a> is one that is simple and easy to set up. It has all the parts you need. See the <a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/contactform\/\">demo<\/a>.<\/p>\n<ol>\n<li>These instructions are for the first version of this script: <a href=\"http:\/\/www.freecontactform.com\/contactform_free.zip\">Download <\/a>the package.\n<\/li>\n<li>installation.txt contains basic instructions:\n<\/li>\n<li>METHOD 1 (Automated)\n<ol>\n<li>Upload all files to your website.\n<\/li>\n<li>In your browser, open the file freecontactforminstall.php and install.\n<\/li>\n<\/ol>\n<\/li>\n<li>METHOD 2 (Manual)\n<ol>\n<li>Create the file &#8216;freecontactformsettings.php&#8217; using a code\/plain text Editor.\n<\/li>\n<li>Insert the following code into this file :\n<pre>\r\n&lt;?php\r\n\r\n$email_to = \"youremailaddress@yourdomain.com\"; \/\/ your email address\r\n$email_subject = \"Contact Form Message\"; \/\/ email subject line\r\n$thankyou = \"thankyou.htm\"; \/\/ thank you page\r\n\r\n\/\/ if you update the question on the form -\r\n\/\/ you need to update the questions answer below\r\n$antispam_answer = \"25\";\r\n?>\r\n<\/pre>\n<\/li>\n<li>Enter your email address in place of youremailaddress@yourdomain.com\n<\/li>\n<li>Change the email subject (if you like)\n<\/li>\n<li>Change your thank you page reference (if you like)\n<\/li>\n<li>Save the file.\n<\/li>\n<li>Copy ALL files onto your website using an FTP program\n<\/li>\n<\/ol>\n<\/li>\n<li>Test it out. The thank you page has been <a href=\"thank-you-2\/\">redirected<\/a> with the return button bringing you back here.\n<\/li>\n<\/ol>\n<p><script src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/contactform\/lite_validation.js\"><\/script><br \/>\n<script>\nrequired.add('Full_Name','NOT_EMPTY','Full Name');\nrequired.add('Email_Address','EMAIL','Email Address');\nrequired.add('Your_Message','NOT_EMPTY','Your Message')\n<\/script>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/contactform\/lite_styles.css\"\/>\n<form name=\"contactformlite\" method=\"post\" action=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/contactform\/lite_process.php\" onsubmit=\"return validate.check(this)\">\n<table width=\"400px\" class=\"cflite\">\n<tr>\n<td colspan=\"2\">\n<p style=\"text-align:center\">Fields marked with <span class=\"required_star\"> * <\/span> are required.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" class=\"cflite_td\">\n<label for=\"Full_Name\" class=\"required\">Full Name<span class=\"required_star\"> * <\/span><\/label>\n<\/td>\n<td valign=\"top\" class=\"cflite_td\">\n<input type=\"text\" name=\"Full_Name\" id=\"Full_Name\" maxlength=\"80\" style=\"width:250px\"\/>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" class=\"cflite_td\">\n<label for=\"Email_Address\" class=\"required\">Email Address<span class=\"required_star\"> * <\/span><\/label>\n<\/td>\n<td valign=\"top\" class=\"cflite_td\">\n<input type=\"text\" name=\"Email_Address\" id=\"Email_Address\" maxlength=\"100\" style=\"width:250px\"\/>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" class=\"cflite_td\">\n<label for=\"Telephone_Number\" class=\"not-required\">Telephone Number<\/label>\n<\/td>\n<td valign=\"top\" class=\"cflite_td\">\n<input type=\"text\" name=\"Telephone_Number\" id=\"Telephone_Number\" maxlength=\"100\" style=\"width:250px\"\/>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" class=\"cflite_td\">\n<label for=\"Your_Message\" class=\"required\">Your Message<span class=\"required_star\"> * <\/span><\/label>\n<\/td>\n<td valign=\"top\" class=\"cflite_td\">\n<textarea style=\"width:250px;height:120px\" name=\"Your_Message\" id=\"Your_Message\" maxlength=\"2000\"><\/textarea>\n<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" style=\"text-align:center\" class=\"cflite_td\">\n<input type=\"submit\" value=\" Submit Form \"\/>\n<\/td>\n<\/tr>\n<\/table>\n<\/form>\n<h2>Alternatives<\/h2>\n<\/p>\n<p>You need not develop your own php file if you use <a href=\"https:\/\/formspree.io\">Form Spree<\/a>. This allows you to go beyond the options provided for in the php script.\n<\/p>\n<p> Setting it up is easy and free. Here&#8217;s how: You don&#8217;t even have to register. <\/p>\n<ol>\n<li>Setup the HTML form\n<p>\nChange your form&#8217;s action attribute to the action input given below. Replace &#8220;your@email.com&#8221; with your own email.\n<\/p>\n<p>\n                &lt;input type=&#8221;text&#8221; value=&#8221;http:\/\/formspree.io\/your@email.com&#8221; \/><\/p>\n<li>Submit the form and confirm your email address.\n<p>\nGo to your website and submit the form once. This will send you an email asking to confirm your email address, so that no one can start sending you spam from random websites.<\/p>\n<li>All set, receive emails\n<p>\nFrom now on, when someone submits that form, we&#8217;ll forward you the data as email.\n<\/p>\n<\/li>\n<\/li>\n<\/li>\n<\/ol>\n<h2>HTML5 Forms<\/h2>\n<\/p>\n<p>Before HTML5, forms had to be carefully vetted with JavaScript to make sure that the information the user input was fundamentally correct, like an email address actually had the form of an email address, and a URL actually had the form of a URL. With HTML5 greatly enhanced <a href=\"http:\/\/www.w3.org\/TR\/html5\/forms.html\">forms<\/a> support, this can be taken care of by the browser. Though there are still some <a href=\"http:\/\/wufoo.com\/html5\/\">browser compatibility problems<\/a>, the time is coming when form checking is built right in.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Forms are vital tools for collecting information from users, such as their name, email address, opinions, etc. A form will take input from the user and may store that data into a file, place an order, gather user statistics, register &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/14-forms\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/773"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=773"}],"version-history":[{"count":28,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/773\/revisions"}],"predecessor-version":[{"id":5933,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/773\/revisions\/5933"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=773"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}