Marketing for Libraries Logo

Dynamic Websites Section: Forms

Many people like to add interactive elements to their website such as surveys, guestbooks, and registration forms. Forms are used for people to enter their information and submit this information for posting or analysis.

It's easy to incorporate the form tags into your page. The tough part is getting the form to work in practice. This is because the data handling part of a form is often handled by your web server. You may or may not have control over the scripts on your web server. Before jumping into the development of forms, check with your service provider and ask about access to CGI scripts and other server-side processing tools.

From taking requests to surveying user needs, forms are an important part of a dynamic website.

Forms Basics

Forms are used to collect user data and send it to a server for processing.

There are many times when you may wish users to complete forms. In most cases, you'll want a record of the information entered into the form. This information might be sent to the webmaster through email, posted in a guestbook, or recorded in a database. Teachers use forms for online homework. Librarians use forms for patron inquiries, surveys, and book reviews.

Most forms involve a combination of JavaScripts and CGI scripts.

Using CGI

CGI (Common Gateway Interface) is a protocol for how the Web server communicates with a program. While a HTML document is static, a CGI program outputs dynamic information.

Forms are generally written in HTML and delivered to the server with a submit button. The information from the user's browser is sent through the Web server to a program that processes information entered by the user. The server then sends information back through the server to user's browser. Special software or CGI scripts must be added to the web server for this process to work. As such, beginning web developers sometimes stay away from CGIs. However, many web service providers include popular CGIs such as form mail on their web servers making the procedure much easier.

Using Forms

The <form> tag is used. HTML5 provides a number of new input types. There are also some new form elements.

The <input> element is used to select user information depending on the type attribute. Forms can contain many different input elements. You can categorize these elements into four basic types:

Every type of form is contained within a <form> tag. You commonly use the method and the action attributes if you are sending data to a server to be processed. In this example, the value of the action attribute is the location of a CGI script:

<form method="post" action="cgi-bin/filename.cgi">The Form Goes Here</form>

CGI Scripts

Unless you have a web server that allows CGI scripts to be run, you won't be able to test this action, however. You can find on the Web many services (free and fee-based) that allow you to process scripts. We will discuss this topic more in class, so don't get too sidetracked with all that you can possibly learn about forms. Know at least how to construct the basic forms types.

Note: Forms do not need to be used solely for server-side processing. Keep this fact in mind for when you study DHTML later this semester.

Submit Button

The <input type="submit"> defines a submit button. The submit button is used to send form data to a server. The data is sent to the place specified in the form's action attribute.

Examine the following sample code.

<form name="input" action="formaction.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Username:

The method of submitting or resetting the form data is often via a pre-established set of buttons indicated in the <input> tag using the type attribute:

<input type="submit" value="text that appears on the submit button" />

<input type="reset" value="text that appears on the reset button " />

Note: The <input> tag does not have its own end tag. The preceding examples would thus be for XHTML compliance.

Here are the common form types. In each of these types, you would be interested in receiving the "value" of the value attribute. Look at the source of the samples so that this will all make sense.


Text Fields

The <input type="text"> defines a one-line input field where a user can enter text.

Examine the following sample code. Explore a text entry form.

<form>
Enter your first and last name below.<br>First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Enter your first and last name below.
First name:
Last name:

 

Password Fields

The <input type="password"> defines a password field. The characters in a password field are masked normally using circles.

Examine the following sample code.

<form>
Enter your password below.<br>Password: <input type="password" name="pwd">
</form>

Enter your password below.
Password:

 

Radio Buttons

The <input type="radio"> defines a radio button. Radio buttons let a user select only one of a limited number of choices. Explore a radio form.

Examine the following sample code.

<form>
Choose your favorite pet:<br>
<input type="radio" name="pet" value="cat">Cat<br>
<input type="radio" name="pet" value="dog">Dog
</form>

Choose your favorite pet:
Cat
Dog

 

Checkboxes

The <input type="checkbox"> defines a checkbox. Checkboxes let a user select zero or more options of a limited number of choices. Explore a checkbox form.

Examine the following sample code.

<form>
Which of the following pets do you have at home? <br>
<input type="checkbox" name="pets" value="cat">I have a cat.<br>
<input type="checkbox" name="pets" value="dog">I have a dog.
</form>

Which of the following pets do you have at home?
I have a cat.
I have a dog.

 

Drop-down selection

Drop-down selections are another option. Explore a drop-down selection  form.

<select name="name">
<option value="somevalue">Some choice</option>
</select>

Email Form

You can take advantage of the user's own e-mail client software with this form. Unfortunately this doesn't work if the user's computer isn't configured for email:

<form method="post" enctype="text/plain" action="mailto:alamb@eduscapes.com">Form Goes Here</form>

Sample: non-CGI e-mail form

FYI: Here is an example of a CGI sendmail script (text file).

The method of submitting or resetting the form data is often via a pre-established set of buttons indicated in the <input> tag using the type attribute:

<input type="submit" value="text that appears on the submit button" />
<input type="reset" value="text that appears on the reset button " />

Your form needs a way to make selections or enter text.

* Checklist example is at form1.html
* Radio example is at form2.html
* Drop down selection is at form3.html
* Text entry is at form4.html
* Email book review form is at form5.html

Using a Service

There are a number of online services that will facilitate use of forms. Response-o-matic is one of the most popular. It allows users to create an online contact form.

Rather than using HTML, it's also possible to use other services to creating and embedding forms in your project. For instance, Google Forms allows users to create a form. The responses are accessed through Google Docs.

try itTry It!
Go to w3schools and read about Forms and Inputs.
Use the Try It Yourself buttons to practice coding.

try itTry It!
Go to w3schools and read about the INPUT types. Then, go to FORM ELEMENTS and FORM ATTRIBUTES to explore these new options. Use the Try It Yourself buttons to play with the options.


 

| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson