The <form> tag is the parent tag for any form. All elements of the form must occur WITHIN the <form> ... </form> tags. The form tag has several attributes including id, name, method, and action. The action attribute is used to direct users to a new page when they submit the form, like a thank you page or order summary. The method attribute is the process in which the information is sent. The basic options are GET and POST. POST sends the information behind the scenes and GET appends the information to the address contained in the action attribute. When using GET, the variables and their values are visible to the user and can be accessed by JavaScript. POST variables are not visible and require a server side scripting language to access.
The most common tag used in a form is input. It is a singleton tag so the appropriate use is <input /> The input tags most important attribute is type. The items marked with an * are HTML 5 types. These new types build in some validation that in the past required Javascript. The good news is that older browsers that do not support HTML 5 will simply treat these fields as text fields (the default type for input) so users will still be able to enter their information. Type options include text, password, email*, url*, date*, number*, tel*, checkbox, radio, submit. Other attributes include name, id, size, maxlength, value, placeholder, required, pattern.
Other useful form tags include select (with option), textarea, and button.
Formatting a Form (CSS)
Placing forms on a page allows great user interaction and data collection. However, if the form is not well organized and difficult to read, users may become confused or frustrated. Here are a few ways to format a form: In each of the instances below, the <form> tag is wrapped around all internal formatting structures.
Use a table. This has been the most standard plan for many years. Organize a table inside the form that has two columns. The first column is used for the labels and the second is used for the inputs. By applying a right alignment class to the label cells, the labels will appear just to the left of the inputs. The downside of this approach is the cumbersome nature or developing tables in html by hand.
Use an unordered list and css. By creating an unordered list with list-style:none, each label and input tag can be enclosed in a simple <li>. The problem is that this method leaves us with input boxes that are not aligned as the label elements will all be of different widths based on their content. However, by setting a default width for all label tags and right aligning them using CSS, you can achieve the same clean organization that a table provides with less code.
Break the form into logical parts using the <fieldset> tag. The fieldset tag is designed to group similar input elements together within a given form. The fieldset tag can be styled using CSS to be viewed in a more modern light. In conjunction with the fieldset tag, the <legend> tag helps identify the common ideas of each group of inputs. Unfortunately, the legend tag has limited styling available, so it is recommended to label fieldsets with h1 or h2 tags. See the organizing forms example in the links section.
Submitting/Validating a Form (JavaScript)
The simple inclusion of an
<input type='submit' />
paired with the appropriate form tag attributes will allow a form to be sent. Often, before we submit the form, we need to check information for validity or completeness. In these cases, we can use the onsubmit event in the form tag. By calling a JavaScript method in the onsubmit event, we can check information before the form is sent. However, to do this, two things must happen. First, the called JavaScript method must return a value of true or false based on its findings. Second, the onsubmit event must return a value of true or false (same as the method) to tell the form if the data should be sent. An example can be seen below:
<script>
function validate()
{
return window.confirm("Do you want to submit the form?");
}
</script>
<form method='GET' action='formHandler.html' onsubmit='return validate()' >
<input type='text' id='name' name='name' />
<input type='submit' value='Submit' />
</form>
In the above form, clicking the submit button calls the validate method. The validate method produces a confirm button which returns a value of true or false, which is in turn, returned by the validate method. Then, the onsubmit event returns the result of the method to the form, telling the form if it should submit (true) or not (false). The onsubmit method will, by default, return true if no other value is specified.
It should also be noted that a form can be submitted directly through JavaScript using the formElement.submit() method.
When validating a form, it is important to notify users of any issues. One way to do this would be to send an alert box with issues. Another way would be to get the element in question and alter its style in some way to make it stand out (e.g. change the background color to red). Often times, these concepts are used in conjunction. There is some type of alert (either popup or at the top of the page) AND the questionable items are highlighted to draw the users attention.
Processing Forms in PHP
PHP, as a server side language, can take input from a form on one page and then transfer that information info another document for use. Typically, the form page is html (or php) with the form method set to post and the action set to the php script that will process the form and generate another html document. Let's look at the following example:
The other method of sending information is the GET method. When using get, the information is appended to the link. So, submission of the above form with method GET would result in a page call of welcome.php?name=mickey. Similar to the use of POST, you can receive those values in the welcome page using $_GET['name'].
Often, the target page will be relying on data received from the form to perform operations. If the data was not checked by JavaScript or if there is an error, it is possible that the data may not go through. If the php on the receiving page is relying on certain data that is not present, the rendering of the target page may result in an error. For this reason, PHP provides a function to ensure that the elements have value. This function is the isset(variable). Simple code, such as what follows, will help ensure thta values are present.
if(isset($_POST['submit1)) //alternately !isset($_POST['name']) tests if not set
echo "Submit 1 button pressed.";
else
echo "Not submit 1 button.";
This process can also be used to submit a form to its own page. The processing code for a form can be contained at the top of the page in a condition that checks isset($_POST['submit']). Then, the form processing and form setup can be housed in the same page, thus eliminating the need for separate processing pages.