When first learning the art of creating online forms it helps to learn the process as a set of steps. Once you know these steps and the order in which to perform them, what is left is only a matter of practice, and experience. You can learn the code from books and websites, but the art of designing your forms—to flow, to make sense to the user, and to collect only the information necessary—can only be learned by experiencing successful work done by others, or struggling through the successes and mistakes yourself. This is what experience is all about. Hopefully the facts and suggestions in this set of articles can give you a head start.
The first step to creating your online form is to list your assets. What type of system are you dealing with—for instance is the web server UNIX-based, Windows IIS, or something else? How are server-side applications or scripts processed, and what types can you use? This tells you which languages you can use for processing scripts if you chose to write your own dynamic pages. Some will not run on certain servers, or need to be uploaded to special directories. If you plan to collect and store information, you will also need to know if a database is being used, what type, and if you will have access to that system’s built in commands directly. Finally for esthetic purposes you will need to have a copy or access to the base-design of the site’s basic pages, so that you can adjust your form design to fit smoothly within. This is all, of course, if you are not creating the whole site yourself from scratch. In that case you can choose anything you desire.
For practice purposes, start with the very basics. Begin using a simple plain HTML web page, within which you will add your form. It doesn’t really matter, in this case, what type of server is being used; most commercial web storage and server companies use a UNIX system like Apache. In this case we will be doing any client-side pre-processing with JavaScript and will be calling the script from a separate file. We will also, for the time being, not be concerning ourselves with the actual server-side application or databases. Now that all your assets are listed and you know the tools that you will be using, you are set to begin planning the form.
The next step to creating your form is to list the information that you need to collect from the user, how does that information need to be processed, and what happens to all the collected and processed data. For instance, does it get stored in a database or text file on the server, is some result returned to the user, and so on. To get some ideas of what types of information can be collected by forms, you can visit any of a number of form-building training websites available—such as the one at: http://www.quackit.com/html/examples/html_forms_examples.cfm . In the end, though, I would recommend building your own from scratch rather than using a template.
For an example, say you decide to design a form that records all the visitors names and addresses and then prints the information on a return page to the user and stores that data in some manner—at the same time it e-mails the website owner and tells him a new visitor has just entered their information. These are specific needs and processes that your form and script will be responsible for. Knowing this all ahead of time makes setting up the form easier. Writing everything down, or saving it in a text file keeps the process organized.
Once you know which pieces of information need to be collected from your user, you must decide how to get them. This sounds simple, and it is, but there is more than one way to collect data in most cases. For instance—if you want the State name a person lives in, you can just give them a blank box and let them type it in, or you can give them a drop-down menu that they can use to select their state from a list—one may be easier than the other for your user. Each of these inputs and other parts in your Web form are known as HTML Form Elements. One of the most complete and detailed list of Form Elements available for quick reference can be found at the website: http://www.w3schools.com/html/html5_form_elements.asp .
Once you have chosen the elements you want to use for your form, you are ready to build it. In the next chapter of the series we will cover the basic structure of the form code and begin to build a sample practice page we can use to collect and process the information from a user.
John Adams Jr
John is a free-lance author and journalist born and raised in upstate New York. He is currently living and writing in Saint Augustine, Florida where the temperature is a bit warmer and the lifestyle more relaxed. The move has allowed John to broaden his range as a writer and he now lends his unique voice to everything from news and review articles in print and on the Web, to a broad range of eBooks and creative pieces. His expertise in Web Development and Design comes from a Masters Degree in Production Design from NYU and almost 10 years designing and programming sites and applications for various organizations. John’s writing work is beginning to attract attention from a wide variety of readers, in many countries, and he is exited to reach more people. See John’s Google+ Profile
