 |
Introduction to Web Forms |
Fundamentals of Web Forms
Introduction
A web form is a webpage equipped with one or more graphical objects, called web controls, that allow a visitor to interact with the webpage. The visitor can type text, enter numbers, make selections, click, etc.
Introduction to Web Form Creation
A web form is created using HTML tags. A web form is fundamentally created using the form tag. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
</head>
<body>
<form></form>
</body>
</html>
The form element is a container that is primarily used to contain its web controls. In reality, the form element is a container, almost like any other. This means that you can put any type of HTML element in it. Here is an example that contains a p and a div elements:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
<style type="text/css">
#formulation
{
margin: auto;
width: 200pt;
}
#main-title
{
font-size: 18pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form>
<div id="formulation">
<p id="main-title">Geometry: Square</p>
</div>
</form>
</body>
</html>
This would produce:
You can also include PHP code in a form element. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
<style type="text/css">
#formulation
{
margin: auto;
width: 200pt;
}
#main-title
{
font-size: 18pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form>
<div id="formulation">
<p id="main-title">Geometry: Square</p>
<?php echo "A square is a flat geometric figure made of four equal sides and
four right angles." ?>
</div>
</form>
</body>
</html>
This would produce:
Introduction to Web Control Creation
A Control for Input
As we will see in later sections, a web form may contain one or more web controls. Although there are various types of controls, many web controls are created with an element named input. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
</head>
<body>
<form>
<input></input>
</form>
</body>
</html>
This would produce:
The Type of a Control
To let you specify the particular control you want to create, the input element is equipped with an attribute named type whose values is a specific name for a desired control. Most controls are made to display or request a value. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
</head>
<body>
<form>
<input type="something"></input>
</form>
</body>
</html>
The Name of a Control
To let you identify a web control as an object, each tag of web control is equipped with an attribute named name. Here is an example:
<!DOCTYPE html> <html> <head> <title>Geometry: Square</title> </head> <body> <form name="frmCalculation"> <input name="txtSide"></input> </form> </body> </html>
The Value of a Control
To hold its data, the input element is equipped with an attribute named value. On one hand, its value can display in the control. Here are examples:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
</head>
<body>
<form name="frmCalculation">
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" value="0.00" /></td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" /></td>
</tr>
</table>
</form>
</body>
</html>
This would produce:
You can also use PHP code to display the value. In this case create a normal PHP section as <?php echo ... ?> or <?= ... ?>. In the ... placeholder, add the desired value. Here are exmples:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
</head>
<body>
<form name="frmCalculation">
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" value="0.00" /></td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter" value="<?php echo '0.00' ?>" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" value="<?= '0.00' ?>" /></td>
</tr>
</table>
</form>
</body>
</html>
This would produce:
By the way, such code can end with a semicolon or you can omit it. On the other hand, the value attribute can be retrieved after the visitor has provided it and the value can be sent somewhere (such as to the web server).
The Identification of a Control
As a normal HTML element, each web control can have an attribute named id. Here are examples:
<!DOCTYPE html> <html> <head> <title>Exercise</title> </head> <body> <form name="frmCalculation" id="calculation"> <table border="4"> <tr> <td>Side:</td> <td> <input name="txtSide" value="0.00" id="side" /></td> </tr> <tr> <td>Perimeter:</td> <td><input name="txtPerimeter" value="<?php echo '0.00' ?>" id="perimeter" /></td> </tr> <tr> <td>Area:</td> <td><input name="txtArea" id="area" value="<?= '0.00' ?>" /></td> </tr> </table> </form> </body> </html>
The id can be used anyway you want, including a # style.
The Style of a Control
Like any HTML element, a web control can use a style. The style can be created inline. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
</head>
<body>
<form name="frmCalculation">
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" value="0.00" style="width: 75px" /></td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter" value="<?php echo '0.00' ?>" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" value="<?= '0.00' ?>" /></td>
</tr>
</table>
</form>
</body>
</html>
This would produce:
The style can also come from either a style section of the same webpage or a CSS file.
The Method of Submitting a Form Values
Submitting the Values of a Form
In some cases, a visitor may be asked to perform some actions. After using the controls, the visitor may be asked to click a button. In HTML, the primary type of button is created with a type specified as submit. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
</head>
<body>
<form name="frmCalculation">
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" value="0.00" style="width: 75px" />
<input name="Submit" type="submit" value="submit" /></td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter" value="<?php echo '0.00' ?>" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" value="<?= '0.00' ?>" /></td>
</tr>
</table>
</form>
</body>
</html>
This would produce:
The submit button has some built-in behaviors so that, in most cases, there is nothing much to configure on it: The form somehow "knows" what to do.
The Method of a Form
After using the controls on a form, the visitor may be asked to click a button. In most cases, this action sends the values to the web server. What happens next depends on you. For example, a visitor might have filled a time sheet and click a button to submit the time worked. In this case, the new values are sent to the web server where either a new time sheet file would be created or the values will be added to an existing file or database, etc. This means that something will be changed somewhere (in a file, in a database, etc). As another example, a visitor might have been presented with a text box where he must type his bank account number and the webpage would display a summary of the user' checking account. In this case, there will be no change on the visitor's bank account. The behavior by which the server responds to the web form is called a method.
To let you specify how the server should respond to a web form, the form element is equipped with an attribute named method. It can have a value as:
- GET (or Get or get because HTML is not case-sensitive): This is the default value. This means that if you omit the method, this option will apply. Here is an
example of applying it:
<!DOCTYPE html> <html> <head> <title>Exercise</title> </head> <body> <form name="frmCalculation" method="get"> <table border="4"> <tr> <td>Side:</td> <td> <input name="txtSide" value="0.00" style="width: 75px" /> <input name="Submit" type="submit" value="submit" /></td> </tr> <tr> <td>Perimeter:</td> <td><input name="txtPerimeter" value="<?php echo '0.00' ?>" /></td> </tr> <tr> <td>Area:</td> <td><input name="txtArea" value="<?= '0.00' ?>" /></td> </tr> </table> </form> </body> </html>In this case, the primary address portion in the address bar ends with ?. This is followed by each value assigned to the name of its corresponding web control. The combinations (name=value) are separated by & but the address bar can display only up to 2048 characters - POST (or post): The values are sent using the HTTP protocol and will not appear in the address bar
Introduction to Web Form Values
A text box is a rectangular object that receives or displays text. To get a text box, create an input element. Specify the type attribute as text. Here are examples:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
<style type="text/css">
#formulation
{
margin: auto;
width: 200pt;
}
#main-title
{
font-size: 18pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form name="frmCalculation" method="post">
<div id="formulation">
<p id="main-title">Geometry: Square</p>
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" type="text" value="0.00" style="width: 75px" />
<input name="Submit" type="submit" value="submit" />
</td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter"
type="text" value="<?php echo '0.00' ?>" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" type="text" value="<?= '0.00' ?>" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
This would produce:
PHP and Web Controls
Although the web controls are created in HTML, that language is not equipped to use them. A scripting language must be used to handle the roles and behaviors of those controls. A script can be used to deal with the web controls in the same webpage where they are located. Here are examples:
<!DOCTYPE html>
<html>
<head>
<title>Geometry: Square</title>
<style type="text/css">
#formulation
{
margin: auto;
width: 200pt;
}
#main-title
{
font-size: 18pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form name="frmCalculation" method="post">
<div id="formulation">
<p id="main-title">Geometry: Square</p>
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" type="text" style="width: 75px"
value="<?php echo htmlspecialchars($_POST['txtSide']);?>" />
<input name="Submit" type="submit" value="submit" />
</td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter" type="text"
value="<?php echo (htmlspecialchars($_POST['txtSide'])) * 4.00;?>" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" type="text"
value="<?php echo ((htmlspecialchars($_POST['txtSide'])) *
(htmlspecialchars($_POST['txtSide'])));?>" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
This would produce:
The above code contains some things with which we are already familiar and some things we have not yet seen. The things we already know are:
- <?php ... ?>: In the previous lesson, we learned that this is used to delimit PHP code
- echo and <?= ... ?>: We were introduced to it in the previous lesson as a way to display something on a webpage. With the above code, now we know that we can all echo to display something in a text-based control
- ': The role of the single-quote was introduced in the previous lesson
Then there are things we haven't seen:
- ( and ): These are the opening and closing parentheses
- $: This character will be introduced in the next lesson
- _: The role of the underscore will be introduced in the next lesson
- [ and ]: These are the opening and closing square brackets used with arrays
- htmlspecialchars and $_POST: These are simply, names. We will find out why one of them is followed by parentheses and the other is followed by square brackets (and why one is lowercase and the other in uppercase)
At this time, don't worry to understand the unknown characters. We will learn what they are in future lessons. Just use them "as is".
The Action of a Webpage
In the above code, we needed to perform calculations using values in the same webpage that contains the controls. In some cases, you will need to send the values to another file. You have many options. For example, you can deal with, and validate values in the webpage and send the results to another page. In other cases, you will get the raw values and send them to another file that would process them. In fact, you can involve as many files as you want.
To let you specify the file to which a form must send its values, the form tag is equipped with an attibute named action. Its value must be the name of (or path to) the file. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<style type="text/css">
#formulation
{
margin: auto;
width: 200pt;
}
#main-title
{
font-size: 18pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form method="post" action="square2.php">
<div id="formulation">
<p id="main-title">Geometry: Square</p>
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" type="text" style="width: 72px" />
<input name="Submit" type="submit" value="submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Of course, the other file must know what to do with the values it receives. An example is to simply display the values it receives. This can be done as follows:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<style type="text/css">
#formulation
{
margin: auto;
width: 200pt;
}
#main-title
{
font-size: 18pt;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form method="post">
<div id="formulation">
<p id="main-title">Geometry: Square</p>
<table border="4">
<tr>
<td>Side:</td>
<td>
<input name="txtSide" type="text"
value="<?php echo htmlspecialchars($_POST['txtSide']);?>" /></td>
</tr>
<tr>
<td>Perimeter:</td>
<td><input name="txtPerimeter" type="text"
value="<?php echo (htmlspecialchars($_POST['txtSide'])) * 4.00;?>" /></td>
</tr>
<tr>
<td>Area:</td>
<td><input name="txtArea" type="text"
value="<?php echo ((htmlspecialchars($_POST['txtSide'])) *
(htmlspecialchars($_POST['txtSide'])));?>" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Here is an example of using the webpage:
Other Web Controls
The Command Button
As seen with the submit element, a button is a rectangular object that the user can click. To create a button, you have many options. You can create an element using the input tag. To specify that you want a button, set the type value as button. Here is an example:
<input type="button">
An alternative is to create an element using a tag named button. Here is an example:
<?php
echo "<form name='frmTimeSheet' method='post'>";
echo "<button></button>";
echo "</form>"
?>
The text that a button displays lets the user know what the button is used for. The text on the button is sometimes called a caption. If you decide to create your button using the input element, to let you specify the caption of a button, its tag is equipped with an attribute named value, which takes a string as value. Here is an example:
<html>
<head>
<title>Exercise</title>
<head>
<body>
<form id="exercise">
<h3>Exercise</h3>
<input type="button" name="btnCreate" value="Create"></input>
</form>
</body>
</html>
If you decide to create your button using the button element, then you must specify the caption between the start and the end tags. Here is an example:
<html>
<head>
<title>Exercise</title>
<head>
<body>
<form id="exercise">
<h3>Exercise</h3>
<button name="btnCreate">Create</button>
</form>
</body>
</html>
The Reset Button
Most of the forms allow the user to fill out text controls and make selections from other controls. These actions change the values of the controls. If in the middle of filling out a form the user decides to start over, HTML provides a special button that can reset all controls to their default states or values. This is programmatically done using a special button called reset.
To create a reset button, use the <input> tag and specify the type of control as reset to the type attribute. Here is an example:
<html>
<head>
<title>Quadrilaterals: The Square</title>
<style>
.btn { width: 60pt }
</style>
<head>
<body>
<form name="frmSquare">
<h4>Quadrilaterals: The Square</h4>
<table style="width:200px;">
<tr>
<td>Side:</td>
<td><input type="text" name="txtSide" size="6" value="0.00"></td>
<td><input type="button" name="btnCalculate" value="Calculate" class="btn"></td>
</tr>
<tr>
<td>Area:</td>
<td><input type="text" id="area" name="txtArea" size="6" value="0.00"></td>
<td><input type="reset" class="btn"></td>
</tr>
</table>
</form>
</body>
</html>
Unlike the regular button, the reset button has a built-in caption that automatically displays its role to the user. Here is an example:
If this caption is not explicit enough for your application, you can change it. To change the caption of a reset button, assign the desired string to the value attribute. Here is an example:
<input type="reset" value="Start Over">