Server side Scripting

A script is a form of a program (like any other program you are used to using). As it implies, server side scripts are scripts on a page that depend on the server to carry out the desired action.

Common Gateway Interface

is a standardized way of sending information between a server and the script. Most web hosting services offer a library of standard Common Gateway Interface (GCI) scripts that are already on their servers. If your server has a CGI script that you can use, you only need to follow the instructions and load the necessary script to your pages. ITS has some CGI scripts available for your use.

According to W3Schools,

Server-side scripting is about "programming" the behavior of the server. This is called server-side scripting or server scripting. Normally, when a browser requests an HTML file, the server returns the file. However, if the file contains a server-side script, the script is executed on the server before the file is returned to the browser as plain HTML.

A CGI script is a program (usually written in the Perl programming language) that communicates with the server in a standardized (or CGI-like) way.

If your server does not have a CGI script that you need, there are a number of resources for other CGI scripts on the web. You can find lots of free CGI scripts written in Perl all over the web.

However, servers are leery of allowing just any old CGI script to be added to their capacity, so you might have to negotiate with your provider to use a CGI script that you find on the web.



Your pages allow you to communicate your ideas to visitors to your site. Forms on your pages tied to scripts on your server allow visitors to communicate something to you. Forms have two components:

  1. a structure, or shell, that the user sees and uses to fill out the form
  2. a processing script that takes the user input and converts it into a format you can use


What does the CGI Script do?

Each element on your form has a NAME and a VALUE associated with it.

The name identifies the data being sent.
The value is the data being sent.

Scripts use the name-value pairs to:

Separate them into individual intelligible pieces.
Do something with the data.


How Forms Work

Creating a working form has two steps:

① First, create (or just know about) a script on a server that processes the output of your form.

Generally, this step is taken care of by an existing script that the WWW server administrator has placed on a server. You identify the server script you want to use in the action attribute of the form element, like this:

The < form> tag declares the existence of a form.

<form method="post" action="/cgi-bin/mailform/">

There are two attributes here of which we must be aware: the method attribute and the action attribute.

The method attribute tells the form to post the data that it receives in one of two ways. We are using the "post" value here.

The action attribute specifies what program to use to process the data received in the form. In this case the action is specified as: "/cgi-bin/mailform"

② Second, write an HTML page with the form elements in it.

If you don't have one to use, we can practice with this page. This is the page that the users will see and on which they enter information. Since this page is in HTML, it is the same no matter what server script will process the input from this form. One of the considerations you will have to make is to decide how you want the user to make an input into your form.

A key idea in this step is that each "piece" or element of the form has a name.

Consider the HTML tags below, which creates a series of button input types.

  • Note that the name attribute for each input type is set to name="[something]".
  • When the server-side script processes the user input, it will associate the value selected by the user with the variable "[something]".


Checkbox Input Type

With the checkbox input type, we have a list of items that will appear in our form with a small checkbox in front of the text. We can "check" as many of the boxes as we like. Notice the name variable that we assign to each of these input boxes is the same. We are using the same value here because our respondents can choose one or many of these choices. By giving them all the same name variable, we can see all that they checked when we receive the data. The value attribute tells the form what to list when we receive the data. Here we want to use names that uniquely identify each item. The checked attribute tells the browser which one to initially select (i.e., when the page loads, this item will already have a check in its box).

<p>These are my favorite schools </p>
<input type=checkbox name="favs" value="UNC-CH" checked />UNC-CH
<br />
<input type=checkbox name="favs" value="John Tyler Community College" />John Tyler Community College
<br />
<input type=checkbox name="favs" value="Texas" />Texas
<br />
<input type=checkbox name="favs" value="Cal State-Monterey Bay" />Cal State-Monterey Bay
<br />

The above code results in the following (any or all of the boxes in this group may be selected):

[how a checkbox displays in Firefox]


Radio Buttons

Radio buttons are similar to the checkbox type of input. With radio buttons, however, only one item can be selected at a time. Otherwise, the attributes are the same as the checkbox example.

<p>The operating system that I prefer is:
<br />
<input type=radio name="Operating System" value="Unix" />Unix
<br />
<input type=radio name="Operating System" value="LINUX" />Linux
<br />
<input type=radio name="Operating System" value="Windows" />Windows
<br />
<input type=radio name="Operating System" value="OS-X" />OS-X
<br />

The above code results in the following (only one button in this group can be chosen)

[how radio buttons display in Firefox]


Drop-Down Box

The <select> tag creates a drop-down box, which is similar to the "radio" type of input in that we are offered a number of items from which we can choose only one. The display of these items, however, is significantly different. The <option> tag allows us to enter list items which will appear as a single input box with a drop-down list of items from which the user can choose only one. The <option> tag with the selected attribute will appear first in the text box when the page is loaded in the browser window. Again, the name attribute will be used later when we receive our data.

<p>On Saturdays, I usually play:
   <select name= "sat">
      <option selected>soccer
      <option>ultimate frisbee
      <option>the cello

The above code results in the following (only one button in this group can be chosen)

[how a dropdown box displays in Firefox]

In all the above examples, we have created the front-end code for our pages, but we have not yet asked the server to do the back-end processing of the information captured via these pages.

③ Third, you need to finish the script with instructions about what to do with the input

This section shows how we will receive our data.


You can create forms by following ITS's instructions

If you want to have a way to ask questions and get responses from people who view your web site, follow ITS's guidance on Creating Forms Using Mailform. The key here is that in a server-side script, you need the server to capture and do something with the user input. Thus you need to deal with the server to make your script conform to its way of doing things. You need to add the relevant script to your pages, but you also need to deal with the server to have the server do something with the input (display, store, file, send, etc.).


There's more help available online


Issues with CGI scripts

They are not secure and some ISPs don't allow them on their servers. If you want more information on how CGI scripts can make you vulnerable, try What's the problem with CGI scripts?

But, understanding their limitations and challenges, CGI scripts might be just what you need to collect data from visitors to your site.


Using other server-side scripts

Google offers some scripts that can be embedded in your code for your purposes.

If your template came with a search tool, but no search functionality, you might want to try Google's Custom Search Engine.

If you are interested in the analytics of your site, you might want to try Google Analytics.

Note that the scripts look like client-side JavaScripts, but they engage the Google servers and thus are actually server-side scripts.

A bit more challenging, but not impossible to do, are Google Forms. Using the online tool, you can generate some code you can copy and add to your pages. But where is the server in this server-side scripting?