Here is a
representation of the program that was used to run the last example. It
is written in a programming language known as PHP:
|
<html>
<head>
<title>Simple Example of Dynamic Response to User Input</title>
</head>
<body bgcolor="#FFFFFF">
<B> <?php echo ( "Hello " . $name . "
! "); ?></B><br>
This is an example of a dynamic response to user input! <br>
<br>
<a href="html-tutorial8.htm#form-return-point">click
here</a> to return to the
html tutorial
</body>
</html>
|
Notice that the page looks almost exactly like a regular HTML page except
for the strange line: <?php echo ( "Hello " . $name . "
! "); ?>.
This is actually the PHP program! Lets look at what it is doing.
<?php ... ?> mean that anything within this pair of tags is a
PHP program. Echo is a php command that tells the server to display
anything in the parenthesis on your browser screen. Inside the echo
statement, the "Hello" and the "!" are simply text.
Normal text is put inside quotes. The periods are separators. The $name
is a variable. In this case, it is the same variable that was in your
form, name.
The beauty of PHP is that you embed it into normal HTML pages. You
give the file a name that ends in .php or .php3 . If the web server
has PHP support installed, it knows that any file containing the ending
.php or .php3 will have PHP script embedded inside of it. Whenever the
server sees a <?php ... ?> it escapes from HTML and starts to
process the script inside these tags.
Here
is another example of a simple form. Try it out if you like.
Feel
free to play with this form. Notice how the color, font-size and
name changes depending on how you fill out the form.
Although this is another simple example. It hints at what you can
do with web programming. Forms can be used to submit user input
on anything from displaying simple information, such as this one,
to send e-mails to customers automatically based on their input,
to implementing full blown e-commerce and shopping system. This
is beyond the scope of this introductory tutorial. If you are interested
in finding out more about web programming, see the side bar.
|
A
Side Note On Web Programming Languages
PHP is one of many programming languages used on the web
today. It is known as a server side scripting language because
the processing takes place on the web server, not on the user's
machine. Other server side languages are Perl, Active Server
Pages (ASP), Java Server Pages (JSP), Cold Fusion (CFM) and
C++. Perl is by far the most widely used and has often been
called the glue that holds the web together. PHP is quickly
becoming very popular because of its ease of use.
For more information on PHP, go to www.php.net
or www.phpbuilder.com.
For information on Cold Fusion, go to www.
allaire.com
For information on Perl, go to www.perl.org
For information on ASP, go to
www.microsoft.com |
|
Lets look at the HTML for this form. The new elements are highlighted
in green to make it easier for you to identify them.
|
<form
method="post" action="html-tutorial-php-example2.php3">
<p><b>Sample Form Number Two</b><br>
<br>
Enter Your Name and Choose Your Preferences Below:<br>
<br>
Name:
<input type="text" name="users_name" size="20"
maxlength="20">
<br>
<br>
Color Preference:<br>
<input type="radio" name="color"
value="red">
Red <br>
<input type="radio" name="color"
value="blue">
Blue <br>
<input type="radio" name="color"
value="green" >
Green<br>
<br>
<input type="checkbox" name="textsize">
Check if you like large text <br>
<br>
<input type="submit" name="Submit"
value="Submit">
</p>
</form> |
First, you will notice that the form calls a program or script called
html-tutorial-php-example2.php3 . This again, is a program written in
the PHP language. We won't worry about the PHP program details this
time. Just think of it as a black box that requires input from the user.
In this case the input is collected from three form elements. The text
box, as in the last example, a check box, and a set of "radio buttons".
Lets look at them one by one.
<input type="text" name="users_name" size="20"
maxlength="20">
This is the same as in the last example, except the name of the box
is called user_name. Note: It is important that you know what names
the program that processes the form is expecting for each form element.
In this case, if we had called the text box "name", as in
the last example, the program would not have worked because it was expecting
input from a text box called "user_name".
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="green">
<input type="radio" name="color" value="blue">
These are called radio buttons. Radio buttons allow the user to
choose one choice out of many. Sets of radio buttons are distinguished
from each other by the attribute, name=" ". A set of radio
buttons is actually considered one element or "variable" .
In this example, the element is called color. Color can take on one
of three values: red, green or blue. We can add more choice of values
by simply adding more <input type> tags with name="color".
<input type="checkbox" name="textsize">
Check boxes are fairly simple. They are either checked or unchecked.
In this example, if we wanted the box to be checked by default, then
the tag would look like this: <input type="checkbox" name="textsize"
checked>
In the next section, we will finish up this tutorial with a discussion
of meta-tags and what you can do if you want to go further.
 Previous:
Forms (part 1) Next:
Going Further 
|
