In the first section of our form series we talked about what forms are, and why they are used. Next we began planning and laying out of a sample practice form and discussed choosing the elements we should use. In this part we will actually put together our sample form, show the syntax and explain how the form will be processed. Remember, our sample form is for collecting the user’s name and address. In an actual situation the form would submit to a server-side application that might save the data in some manner plus any number of other processes.

As in any segment of a Web page written in HTML, you will find the point within the code where your form elements will be included in the page. For our practice sample we will create a simple Web page and then insert the form code directly after the heading which serves as the title for our form. The tags and text for the form elements are placed between opening and closing HTML <Form> tags. The source-code for the page would look like this before inserting your elements.


<html>
<head>
<title>Form Practice Page</title>
</head>
<body>
<h2>Personal Information Form</h2>
<form>

<!– This is where the form code will be placed –>

</form>
</body>
</html>


This Web page has obviously been pared down to just the necessities. There are no <meta> tags, no CSS or other style elements included—only what we need to demonstrate the sample form. The next thing to do is insert the form elements themselves. Each line of the form-code will contain the text prompting the user, and the element for inputting their answer. For the First Name, Last Name, Street Address, and City, a simple text input can be used. For the State we will use a simplified drop-down list. To make the code here in this example shorter we will only give three states as choices, in a real form you would give all 50. You can find a full state drop-down code to cut and paste into your form to save time at this address: http://www.freeformatter.com/usa-state-list-html-select.html . The Free Form Matter site has other sections of usable form snippets also. There is also some helpful code validation tools where you can paste your HTML (or other code) into a text box and it will be checked to make sure it is all in valid , and with correct syntax.

Each form element will input a bit of data and store it temporarily as the value for the name selected in each element. The code for all these elements will look like this. In this case the <Form> tag includes an attribute that tells the form to send its data to nowhere, this is just for practice. The get method tells the data to be sent along with the URL to be handled by the application.


<form name=”frmUser” action=”” method=”get”>
First name: <input type=”text” name=”inFirst”><br>
Last name: <input type=”text” name=”inLast”><br>
Street Address: <input type=”text” name=”inStreet”>
City: <input type=”text” name=”inCity”>
State: <select name=”inState”>
<option value=”NY”>New York</option>
<option value=”NJ”>New Jersey</option>
<option value=”FL”>Florida</option>
</select>
</form>


The final element in our practice example will be the buttons that the user will push to Submit or Clear the form. Depending on how the form will be processed, the Submit button will usually trigger that action. Some Web pages with forms will send the data to a script that will process the data and spit out a new page after doing any number of other processes. We mentioned this in the first part of the series. The next part of the series will add code to our form to validate the information, but for now the following will just display and name the buttons.


<input type=”submit” value=”Submit Form”>
<input type=”clear” value=”Clear Entries”>


You can also create a custom type of button by using the attribute type button, but the text placed within quotes for the value attribute will always be what is displayed on the button itself when the Web page is loaded. Because we chose the get method, when the submit button is pressed the URL that the form will send to the server application will look like the following with the application name followed by a question mark and each element and its value separated with ampersands (in case you ever wondered what all that mess was about).


http://www.site.com/form_process.php?inFirst=Joe&inLast=Doe&inStreet=Fleet&inCity=Ithica&inState=NY&inSex=Male


Now you will have the complete HTML code for a simple example form to practice with. If you get courageous, you can visit Mozilla’s Developer Network Site. Their section on HTML forms is one of the most complete and easy to follow on the Web. Even when you move to more advanced form programming, and creating dynamic sites, a core foundation in HTML is necessary. The MDN site is located at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms . In our next section we will build on our basic form and add JavaScript to validate the input information.

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