XHTML - CCIS1301

Class 5 - Forms

What is a form?

A form is a method of sending or retrieving data between a client (browser) and a server (website). They can be used for a variety of purposes including:

The important thing to understand about forms is that they serve two purposes: First, they provide a method for the user to directly send information to the server, and second, they provide data to the server for processing.

In this class, we will concern ourselves only with setting up a form to allow the user to input data. We will NOT be processing the data sent from the user to the server. That is typically handled with some scripting or programming code which is installed on the server.

The most common languages used for programming on a web server include: PHP, PERL, C#, VB (asp), ColdFusion, Java, Ruby and Python. Each of these languages has distinct advantages and disadvantages. If you are interested in learning one of these, I would highly recommend signing up for the PHP class at HTC (CCIS 2630).

Access Methods and Form Attributes

To create a form on your web page, you use the <form> tag. This tag has 2 required attributes - "action" and "method". See the example below...

<form action="/mysite.html" method="post">
	...
	<!-- Form Stuff Here -->
</form>

Above we see the form tag in all its glory with the 2 required attributes. The value of "action" is telling the form WHERE to send its data. The value of "method" is telling the form HOW to send the data.

The "action" of the form follows the same path rules as images and links.

The "method" of the form, can be either "get" or "post". A "get" request will simply send you to a page with the action value as the URL with the names of the form elements in a name-value pair combination in the URL. Something like this:

/mysite.html?first_name=Brandon&last_name=Carlson

A long time ago (1990s), the difference between "get" and "post" was very pronounced. Servers couldn't handle large data requests in a "get" form - they were limited to 2000 characters, so if you wanted to send a large set of data with a form, you would use "post". Additionally, since "get" exposes the data in the URL, using "post", gave the appearence of more security (although it's really not more secure at all). Today, we use "post" for most all forms, unless we want someone to be able to bookmark the result page (after a search query for example), then we would use a "get" action.

A little side note if you want to upload files

There is a way to upload a file using a web form, but it's important that we tell the browser to let the server know we're also attaching a file. To do that, we add another attribute to the form "enctype" with a value of "multipart/form-data" an example is below:

<form action="/mysite.html" method="post" enctype="multipart/form-data">
	...
	<!-- Form Stuff Here -->
</form>

My recommendation - always add the enctype to your forms!

Setting up a form

You may have noticed a common theme throughout XHTML - this concept of a "container". The page is "contained" in the html element, which "contains" a head and body element. We use the div tag to "contain" and organize our content. We use a tbody, thead and tfoot to "contain" sections of our table, and it should come as no surprise that we also have a "container" element for our forms as well. And we do - <fieldset>.

We use the fieldset tag to logically organize similar elements in our form. Consider the form below (a registration form)

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<!-- Contact Information Here -->
	</fieldset>
	<fieldset>
		<!-- Account Information Here -->
	</fieldset>
</form>

In the example above, I set up 2 containers in my form. One will hold my contact information (phone, email), and the next will hold my account information (username and password).

As with other areas of XHTML, we have some tags we can use to give our sections a title. For a page, we use the "title" tag. For a table we use the "caption" tag. For a div, we use an "hx" tag. For each fieldset, we use a "legend" tag, like this...

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>Contact Information</legend>
		<!-- Contact Information Here -->
	</fieldset>
	<fieldset>
		<legend>Account Information</legend>
		<!-- Account Information Here -->
	</fieldset>
</form>

Now that we have our form skeleton up, we can start adding input elements to each section.

Adding User input elements to a form

The <input> tag

The "input" tag is what we'll use for a variety of form elements including text input, checkboxes, radio buttons and more. Let's start out with a simple text box...

Contact Information
Account Information

Above we see our form we set up earlier, with a simple input element to allow the user to input text. The HTML looks like this...

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>Contact Information</legend>
		<!-- Contact Information Here -->
			<label for="first_name">First Name:</label>
			<input type="text" id="first_name" name="first_name" value="" />
			<br />
	</fieldset>
	<fieldset>
		<legend>Account Information</legend>
		<!-- Account Information Here -->
	</fieldset>
</form>

You should notice the use of the "input" tag here. There are a couple required attributes that I used:

You may also notice the "label" tag. The purpose of the label tag is to improve accessibility. By using a label tag, with an attribute of "for" and the value of the attribute "for" being the same as the value of the attribute in the associated input "id", we can logically associate a label to its input field. This helps improve accessibility, and usability. For example, in the form above, if you click on the label "First Name", it will automatically focus your cursor in the form field.

Additionally, there are a couple additional attributes you can use with a text type input: 1) length - this would change the width of the input field (we'll typcially use CSS to do this now) and 2) maxlength - this is the maximum number of characters you want the allow the user to enter. For example: You may want a user to only enter 5 characters in a zip code field. You would do that like this:

<input type="text" id="zip" name="zip" length="5" maxlength="5" value="" />

Finally, if you want to mask the data entered in a text input, you can use the type="password". This will show asterisks as the user types.

<input type="password" id="password" name="password" length="5" maxlength="5" value="" />
Checkboxes

To create a checkbox, we again use the input tag, only this time, we use the type "checkbox". Like this...

Contact Information
Account Information

And the code looks like this:

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>Contact Information</legend>
		<!-- Contact Information Here -->
			<label for="first_name">First Name:</label>
			<input type="text" id="first_name" name="first_name" value="" />
			<br />
	</fieldset>
	<fieldset>
		<legend>Account Information</legend>
		<!-- Account Information Here -->
		<input type="checkbox" name="newsletter_yes" value="yes" id="newsletter_yes" checked="checked" />
		<label for="newsletter_yes">Send me updates via email</label>
	</fieldset>
</form>

You may notice we have a new attribute "checked", this is used to set the default state of the checkbox to be checked.

Radio Buttons

Radio buttons are a group of options where a user can select only one of the options from a group. The important thing to remember with radio buttons is, each group must have the same name. Consider the following:

Contact Information
Country:
Account Information

And the code looks like this: (notice how both inputs have the same name)

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>Contact Information</legend>
		<!-- Contact Information Here -->
			<label for="first_name">First Name:</label>
			<input type="text" id="first_name" name="first_name" value="" /><br />
			Country: 
			<input type="radio" name="country" value="US" id="country_us" />
			<label for="country_us">United States</label> 
			<input type="radio" name="country" value="EUR" checked="checked" id="country_europe" />
			<label for="country_europe">Europe</label> 
			<br />
	</fieldset>
	<fieldset>
		<legend>Account Information</legend>
		<!-- Account Information Here -->
		<input type="checkbox" name="newsletter_yes" value="yes" id="newsletter_yes" checked="checked" />
		<label for="newsletter_yes">Send me updates via email</label>
	</fieldset>
</form>
Files

Our next foray with the input tag for user input, will be the type="file". We use this to allow a user to upload a file with the form submission.

Contact Information
Country:
Account Information

And this is the code...

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>Contact Information</legend>
		<!-- Contact Information Here -->
			<label for="first_name">First Name:</label>
			<input type="text" id="first_name" name="first_name" value="" /><br />
			Country: 
			<input type="radio" name="country" value="US" id="country_us" />
			<label for="country_us">United States</label> 
			<input type="radio" name="country" value="EUR" checked="checked" id="country_europe" />
			<label for="country_europe">Europe</label> 
			<br />
	</fieldset>
	<fieldset>
		<legend>Account Information</legend>
		<!-- Account Information Here -->
		<input type="checkbox" name="newsletter_yes" value="yes" id="newsletter_yes" checked="checked" />
		<label for="newsletter_yes">Send me updates via email</label><br />
		<label for="my_doc">Screenshot:</label>
		<input type="file" name="my_doc" id="my_doc" value="" />
	</fieldset>
</form>

Notice how this automatically adds the "browse" button for us. Clicking "browse" will open up a file system dialog box which will allow us to select our file for uploading to the server.

Hidden Fields

Sometimes we may want to send data to the server, and not let the user input anything. For this, we use a "hidden" input type.

<input type="hidden" id="new_user" name="new_user" value="yes" />

This example above will send the value "yes" for the "new_user" field to the server. Nothing will be displayed on the webpage for this input type.

Large Text Boxes - textarea

To create a large text box, we use the textarea tag. This tag has the following attributes:

Sample code (I'll put together another full sample at the end).

<textarea name="my_textbox" id="my_textbox" rows="5" cols="50">DEFAULT VALUE</textarea>

A note about textareas - the default value isn't in a "value" attribute, but rather between the opening and closing textarea tags. Whereas the input tag is self-closing, the textarea tag is not.

Dropdowns with select tag

The only form element left that we haven't talked about is the <select> tag. This is probably the most complicated tag. Much like UL / LI tags in the previous notes worked, select tags work in conjunction with several other tags. Let's start with a simple select list...

<select name="states" id="states">
	<option value="MN">Minnesota</option>
	<option value="WI">Wisconsin</option>
	<option value="CA" selected="selected">California</option>
	<option value="WA">Washington</option>
	<option value="MD">Maryland</option>
	<option value="FL">Florida</option>
</select>

In the example above, we have a "select" tag which contains our "options". Each option tag has a value, which is what is sent to the server for processing, and a display (between the opening and closing option tags) which is displayed to the user. To select a default option, we use the attribute "selected='selected'" as seen for the state "CA" above.

Grouping options

In addition to the standard select list, we can group our options using the optgroup tag. An example is below:

<select name="states" id="states">
	<optgroup label="Midwest">
		<option value="MN">Minnesota</option>
		<option value="WI">Wisconsin</option>
	</optgroup>
	<optgroup label="West">
		<option value="CA" selected="selected">California</option>
		<option value="WA">Washington</option>
	</optgroup>
	<optgroup label="East">
		<option value="MD">Maryland</option>
		<option value="FL">Florida</option>
	</optgroup>
</select>

Which looks like this...

Form Controls

So, now that we know what a form looks like, and how to create elements, the last thing we need to do is add some buttons to allow users to submit the form. There are 3 button types: submit, reset and image.

Submit Button

The submit button has a type of "submit" and a value and is used to submit the data.

<input type="submit" name="submit" value="Submit Form" />
Image Button

The image submit button has a type of "image" and a value, and requires a valid src to an image. This is used to submit the data.

<input type="img" src="images/button.jpg" name="submit" value="Submit Form" />

The reset button has a type of "reset" and a value and is used to reset all the form elements to their default value.

<input type="reset" name="reset" value="Reset Form" />

Putting it all together:

Contact Information

Country:
Account Information




And the code:

<form action="confirm.html" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend>Contact Information</legend>
		<!-- Contact Information Here -->
			<label for="first_name">First Name:</label>
			<input type="text" id="first_name" name="first_name" value="" /><br />
			<label for="states">State:</label>
			<select name="states" id="states">
				<optgroup label="Midwest">
					<option value="MN">Minnesota</option>
					<option value="WI">Wisconsin</option>
				</optgroup>
				<optgroup label="West">
					<option value="CA" selected="selected">California</option>
					<option value="WA">Washington</option>
				</optgroup>
				<optgroup label="East">
					<option value="MD">Maryland</option>
					<option value="FL">Florida</option>
				</optgroup>
			</select><br />	
			Country: 
			<input type="radio" name="country" value="US" id="country_us" />
			<label for="country_us">United States</label> 
			<input type="radio" name="country" value="EUR" checked="checked" id="country_europe" />
			<label for="country_europe">Europe</label> 
			<br />
	</fieldset>
	<fieldset>
		<legend>Account Information</legend>
		<!-- Account Information Here -->
		<input type="checkbox" name="newsletter_yes" value="yes" id="newsletter_yes" checked="checked" />
		<label for="newsletter_yes">Send me updates via email</label><br />
		<label for="password">Password:</label>
		<input type="password" id="password" name="password" value="" /><br />
		<label for="my_doc">Screenshot:</label>
		<input type="file" name="my_doc" id="my_doc" value="" /><br />
		<label for="text_area">Special Instructions:</label><br />
		<textarea id="text_area" name="text_area" rows="4" cols="40">Enter text</textarea><br />
		<input type="reset" value="Reset Form" name="reset" />
		<input type="submit" value="Submit Form" name="submit" />
	</fieldset>
</form>

Suggested Videos

Note: These are just some videos I found on youtube that I feel are related to the topics covered here.







Ask questions.

Assignments

- Homework 4: Due on: 03/23/2012 at 11:59:59pm.
- Lab 4 (optional)
- Quiz 3: Due on: 03/30/2012 at 11:59:59pm

Quick Links

What is a form
Access Methods
Setting up a Form
Input Types
Form Controls

Helpful Pages