Web Form

Creating a Web Form
Introduction
You can enhance your pages with HTML forms (along with a little help from a web server) so that your pages can gather customer
feedback, take an online order, get the next move in an online game, or collect the votes in a “hot or not” contest. Now you’re going to
meet a whole team of HTML elements that work together to create web forms. You’ll also learn a bit about what goes on behind the
scenes in the server to support forms, and we’ll even talk about keeping those forms stylish.
If you use the Web at all, then you know what a form is. But you might not have really thought about what they have to do with
HTML. A form is basically a web page with input fields that allows you to enter information. When the form is submitted, that
information is packaged up and sent off to a web server to be processed by a server script. When the processing is done, what do you
get? Another web page, of course, as a response, or in our case, you will an email showing the form contents in the subject area.
To a browser, a form is just a bit of HTML in a page. You can easily create forms in your pages by adding a few new elements. Here’s
how a form works from the browser’s perspective:
The browser loads the page
? The browser loads the HTML for a page like it always does, and when it encounters form elements, it creates controls on the page that allow you to input
various kinds of data. A control is just something like a button or a text input box or a drop-down menu—basically something that allows you to input data.
You enter data
? You use the controls to enter data. Depending on the type of control, this happens in different ways. You can type a single line of text into a text control, or you
might click one option of many in a checkbox control.
You submit the form
? You submit the form by clicking on a submit button control. That’s the browser’s cue that it needs to package up all the data and send that data off to the
server.
The server responds
? Once the server has the form data, it passes it off to the appropriate server script for processing. This processing results in a brand-new HTML page that is
returned to the browser, and since it’s just HTML, the browser displays it for you.
Below you will find some simple code that creates a form …

Just type in your name (and click Submit) to enter the contest:
First Name:
Last Name:


So, let’s create your very first

element.
The first thing you have to know when creating a

element is the URL of the server script that is going to process your form
data. Our form will use the mailto: action to send the results to your Franklin email address. Yes, mailto: isn’t the ideal solution, but
until you learn a server-side scripting language, it will have to do. Please note that your form will only work if you have an email
client (such as Outlook) installed on your computer. Your form will include some different form elements, as described below. You
will also use some embedded CSS styles to control the layout and appearance of the page. A sketch of what we want included on the
form is provided below:
reset
Action Items
1. Using the HTML 5 framework code1
to start and the

begin and

end tags above (including all of the attributes and
your email address in place of the student01@email.franklin.edu), type the code into a file called form.html in a folder called
assignment6-2 on your PC.
2. So far, so good, but an empty form isn’t going to get us very far. Looking back at the sketch of the form, there’s a lot there to add,
but we’re going to start simple and get the “Ship to:” part of the form done first, which consists of five (5) text inputs and a
telephone number input. We use the element for a few different kinds of controls. The type attribute determines what
kind of control it is. Here we want to use type=”text” for all but the last one, which will use a type of tel instead. The name
attribute is a required part of the input element and acts as an identifier for the data the user types in the form: name, address, city,
state, zip, and phone. Each one should be set to a different or unique value.
2 Here is what the form will look like after entering
these six input elements (and text for labels and
between each inline element to start each on a new line) and the
submit element with a value of “Order Now” and a “Ship to:” inside a paragraph

element that surrounds the first six
elements and another one that surrounds the submit element:
Initial Form in Browser Filled in Fields on Form in Browser Output after Submit to server

1
Click HERE for HTML 5 framework minimal requirements.
2
The name attribute acts as the glue between your form and the server script that processes it. Each input control in your form has a name attribute. When
you type the elements for a form into your HTML file, you give them unique names. When you submit a form, the browser packages up all the data using the
unique names.
3. Make sure your code renders the same as the image on the left above in your favorite browser and that you can enter data into each
input box (as in the middle image above). Last, make sure you get results such as the image on the right shows when you click the
Submit button on the form.
4. Make sure your page validates using the W3C validator as well (it is easier to make corrections after making a few changes than at
the very end).
5. Good so far. Now we need to add the beans we want, as well as the bean type (ground or whole). Let’s add the bean selection first
by adding a end element to the form (name=”beans”). Remember that the of type “radio” for each button (name is the same for all … name=”beantype” here), give each a unique value
(“whole” or “ground”) and tell the user “whole bean” or “ground” on screen. So, we need two buttons: one for whole beans and
one for ground. 3 We will also need a label of “Type:” and the entire thing surrounded by paragraph

elements. This will go
after the drop down we just created.
Initial Form in Browser Filled in Fields on Form in Browser Output after Submit to server
9. Make sure your code renders the same as the image on the left above in your favorite browser and that you can enter data into each
input box (as in the middle image above). Last, make sure you get results such as the image on the right shows when you click the
Submit button on the form.
10. Make sure your page validates using the W3C validator as well.
11. We’re not done yet. We still have to add the number of bags, the ship by date, the gift options, and an area for customer
comments.
12. Next, we need to get the number of bags of coffee the customer wants to purchase, and the must arrive by date. Both of these are
elements, but rather than just using basic text inputs, we can be more specific about the exact type of content we want in
these elements by using the “number” type for the number of bags (name=”bags”), and the “date” type for the arrive by
date (name=”date”). For the number of bags, we can get even more specific, by specifying both a minimum (1) and maximum
(10) number of bags allowed. Add these two new input elements between the Bean Type and Ship To elements, each surrounded
by separate paragraph elements. The result will look like the images below:

3
If you add a Boolean attribute named checked=“checked” into one of your radio input elements, then that element will be selected by default when the form
is first displayed or reset by the browser.
Initial Form in Browser Filled in Fields on Form in Browser Output after Submit to server
13. Make sure your code renders the same as the image on the left above in your favorite browser and that you can enter data into each
input box (as in the middle image above). Last, make sure you get results such as the image on the right shows when you click the
Submit button on the form.
14. Make sure your page validates using the W3C validator as well.
15. Notice that the number input has up and down arrows but the date control is just a text input in this browser (Firefox).
16. You’re almost there. You’ve got two controls to add to the form: the “Extras” control with two checkboxes and the customer
comment control. You’re really getting the hang of forms, so we’re going to add them both at the same time. The two (2)
checkboxes will go right below the elements we just added in the previous step. We will surround them with

paragraph
elements, as before and put in a label of “Extras:” and a new line
tag. Both checkboxes will have the same name (extras[])
and a value of “giftwrap” and “catalog”. The catalog will be checked by default. The text to be output to the browser will be “Gift
wrap” and “Include catalog with order”, respectively. The customer comments will be added right below the “Ship to:” elements
and will be a textarea element with a name of comments, also surrounded by the

element with a title of “Customer
Comments:” and a
tag. The results will look like the images below:
Initial Form in Browser Filled in Fields on Form in Browser Output after Submit to server
17. Make sure your code renders the same as the image on the left above in your favorite browser and that you can enter data into each
input box (as in the middle image above). Last, make sure you get results such as the image on the right shows when you click the
Submit button on the form.
18. Make sure your page validates using the W3C validator as well.
19. Before finishing up, let’s add some embedded CSS styling to our form. In order to get the labels to be ‘in line’ within the “Ship
to:” group of elements, you will need to add a end element around each of the “Name:” ,
“Address:”, “City:”, “State:”, “Zip:”, and “Phone:” text items under this area and then add label { display: inline-block; width:
100px;} to your embedded CSS (as below).
form {
width: 50%;
padding: 10px;
border: thin dotted #7e7e7e;
background-color: #e1ceb8;
}
form textarea {
width: 500px;
height: 200px;
}
label {
display: inline-block;
width: 100px;
}
When your forms start getting large (as this one is), it can be helpful to visually group elements together. HTML provides a

element that can be used to group together common elements.

also makes use of a second element, called

. Use this in your form.html file to group the “Choose your beans”, “Type”, “Extras”, and “Ship to” areas, moving this
text between the

begin and

end elements.
You can use the placeholder attribute with most of the types in a form to give the person who’s filling out the form a hint
about the kind of content you expect him to enter into the control. For instance, if you have a text field that expects a first and last
name, you can provide a sample first and last name using the placeholder attribute. The value in the attribute is shown in the
control, but is fainter than normal content that you add to a control, and as soon as you click into the text field, the placeholder text
will disappear so it doesn’t get in the way of what you’re typing. Do this for each of the Name , Address, City, State, Zip, and
Phone text elements, using the values outlined in the table below:
The required=”required” attribute can be used with any form control; it indicates that a field is required, so you shouldn’t submit
the form without specifying a value for the controls that have this attribute set. In browsers that support this attribute, if you try to
submit the form without specifying a value for a required field, you’ll get an error message and the form will not be submitted to
the server. Do this for all of the “Ship to” elements and add an asterisk (*) to the label for each as well.
20. You are done! Your final form should look like the image below (rendered using Firefox). Make sure your code renders the same
as the image below in your favorite browser and that all elements on the form work properly.
21. Make sure your page validates using the W3C HTML and CSS validator as well.
22.Use an archive program such as WinZip, IZArc, or 7-Zip to produce a ZIP file containing your assignment6-2 folder (with
the form.html file inside) and its contents (one file only) that were used in this homework for your instructor and submit it
at the course drop box by the stated deadline. 4

4
PLEASE NOTE: It is expected that all of your HTML code be valid, well-formatted HTML code for this course. This applies to any and all HTML or
CSS files submitted as part of any assignment for this course. Your source code will be inspected at the W3C Mark Up Validation Service when it is
submitted for grading. Just because it renders well in one browser does not mean it will render well in all browsers. This is just one reason to validate
your code prior to submitting it for grading!
One quick way to check your code for validity is to open the page in Firefox, then right click on the background of that page and click on the View Page
Source option. This will open a new window where your HTML source will be color-coded to indicate any issues with it. Pay particular attention to
any red lines or portions of code and work to correct these in your HTML source file (click HERE for how to do this in other common browsers). The
W3C Mark Up Validation Service (for HTML pages), the W3C CSS Validation Service, and the W3C Link Checker are the best places to go to make sure
your pages validate. Since you will not be publishing your web pages to a server prior to submission, you will need to use the “Direct File Input” option
to these services.

×
New Download