cs952

Introduction to Forms

Forms are an essential part of an interactive website. Forms are used to collection information from the visitor, and then act on that information. A typical form can be found on a Contact Us page, where the visitor provides some personal information, such as their name and email address, and can also provide some additional details, such as comments about the website.

But forms are also used just about any time you do typical web activities like searching the web, posting a message on a blog, or submitting an order to an e-commerce site.

Forms are created with opening and closing HTML form tags, <form> and </form>. All the elements of the form must be contained inside these tags. If not, information collected will not be processed when the user submits the form.

Form Actions and Methods

The properties of the form tag include action and method. We will be working with two different forms in our tutorial website. Our first form, in the navigation bar, comes to us basically premade, as a part of the Bootstrap Components Navigation Bar included in Dreamweaver CC 2015. We are going to use this form to submit a search to Google. In this case, the form action will be the web address of the Google search, “http://www.google.com/search.” The method for this search will be GET.

Our second form will be on the Contact page. The information collected by this form will be sent to the cs952 website, where a "thank you" message will be displayed and an email generated. The action for this form will be “http://www.cs952.org/contact.php.” The method for this search will be POST.

What is the difference between the GET and POST method? I like to describe the difference between GET and POST as the difference between mailing a post card, and mailing a letter.

When you send a postcard, your message can be read by anyone who happens to see your postcard. And on a postcard, you message is limited by the space available on the card. When we use the GET method, our message is included in the URL. For example, if I do a Google search for “pencil museum” using our home page search form, the URL that loads the results from Google looks like this:

https://www.google.com/search?q=pencil+museum

As you can see, my search terms, “pencil museum” are displayed in the URL. Anyone who happens to use this computer could also see these search terms. And since web browsers can cache or store a record of pages you visit, this information may be stored for later users of the computer to see.

The amount of information that you can include in GET is limited as well. This is usually determined by the kind of server used to host your website, but to be on the safe side, I regard GET as having a limit of 255 characters.

The POST method is much more like filling out a form, folding it up, and then mailing the form in an envelope. When you are requesting, or sending, private information, you want to use the POST method. There is no limit to the information we can send in the POST method.

Each method has its own place. GET can be faster to execute than the POST method. And there may be times when you want to share your information in a URL. Remember the Adobe Creative Color site? If you visit that site again, notice that your color selections are included in the URL. This makes it easy to share your color selections with others, and to book mark your favorite color combinations.

Input Elements

There are two main types of input elements on a form: fields and controls. As their name suggests, input elements are used to get input from the visitor to your website. A typical field is a text box, where a visitor to your site might enter their name. A typical control is a radio button group, for example a “Yes” or “No” pair of buttons. In the case of radio button groups, there can only be one value submitted. The contact form on our tutorial site allows for values of “Yes” or “No” only.

Our contact form also has a set of check boxes. In the case of our check boxes, visitors may check as many boxes as they like. Our contact from will use a check box the with the values “home”, “gallery”, history” and “media.” This is a list of pages on our website. Visitors can check which of these pages they would like to visit again.

Whether it is a text box, radio button group, or check boxes, most form elements also have a label to help identify the form elements.

As we are using the Bootstrap 3 framework, we will be using some of the extensive form classes provided by Bootstrap 3 to style our forms. Fortunately for us, we do not really need to do anything to create a form that is cleanly laid out and easy to use.

In the Bootstrap 3 framework, our form elements are contained inside of a div assigned to the Bootstrap class of “form-group.” We have a different “div.form-group” to hold each part of our form. Inside the “div.form-group” we find the label and the input. The input element is also given a Bootstrap 3 class, “form-control.” The primary function of these different Bootstrap form classes is to create web forms that are consistent in appearance and properly spaced for ease of use.

In addition, we will use Dreamweaver snippets to store a bit of code we will frequently reuse to build our form elements.

Submit and Reset Buttons

The form also requires a submit button to start the process of processing the information provided by the website visitor. The submit button is frequently accompanied by a reset button as well, which resets the fields of the form. Without a submit button, a form can collect information, but the information cannot be submitted for processing.

Form Attributes and Validation

The image above shows the **Dreamweaver Property Inspector** displaying the **attributes** of the 'last_name' text box.

When we talk about attributes, we are referring to properties of an element. These attributes may or may not be used. As you can see, the "Required" attribute is checked in this example. We will include “Required” for the first name, last name, and email address. The form cannot be submitted without some kind of input in fields that are marked as "required".

Our contact form will also be taking advantage of some other built-in features of HTML5 web forms. The email input also requires the use of the email “@” sign to verify that the information presented is an actual email address.

With the ever expanding domains available, it is difficult to completely verify that an email address is legitimate, so we are relying only on the basic built-in HTML5 validation.

We will also be using tab index in creating our form. Tab index enhances the user experience of filling out a web form, allowing the visitor to easily jump between input fields.

You will notice there are other attributes that we are not using. The "Disabled" attribute turns the input off, keeping the visitor from entering any data. You may wonder what the purpose would be of disabling an input. Perhaps we might have a selection of promotional offers, but this selection is disabled. You could require the visitor to first input their email address before selecting a promotional offer. Once the visitor enters their email, JavaScript can be used to enable the visitor to select the promotional offer of their choice.

Regular Expressions, Patterns and HTML5

Another useful attribute is the "Pattern" attribute. A kind of pattern matching called "regular expressions" is used with the "pattern" attribute. The "pattern" attribute is another new feature of HTML5. Previously, an additional technology such as JavaScript or PHP was needed to force the input from a user to match a pattern.

Imagine that you are going to require a visitor to enter the word "yes" before they can become a member of your website. While you could simply use a radio button group, with values of "yes" or "no", requiring the visitor to actually input "yes" gives you more certainty that the visitor has accepted the terms of use for your website. In this case, all you need to enter in the pattern field is "yes."

Regular expressions are used all the time on websites. One common use of regular expressions is to check if a credit card number is valid by matching the user input against the established patterns for credit cards.

Introduction to Regular Expressions (extra)

Wayne Joness
West Los Angeles College, cs952
Fall