HTML Forms and ColdFusion Variables

Contact Us or call 1-877-932-8228
HTML Forms and ColdFusion Variables

HTML Forms and ColdFusion Variables

How HTML Forms Work

A very common way to submit data to a web server is through HTML forms. There are two methods of submitting data through a form: the get method and the post method. The method used is determined by the value of the method attribute of the form tag. The default method is get.

Get Method

When the get method is used, data is sent to the server in name-value pairs as part of the query string. The get method is most commonly used by search pages and is useful when it is important to be able to bookmark the resulting page (i.e, the page that is returned after the form is submitted).

Post Method

When the post method is used, data is sent to the server in name-value pairs behind the scenes. The two major advantages of the post method are:

  1. The name-value pairs are not visible in the location bar, so sensitive data such as passwords are not displayed on the screen.
  2. Files, such as images and Office documents, can be uploaded via the form.

The major disadvantage is that the resulting page cannot be bookmarked.

A Sample HTML Form

The following is a sample HTML form for calculating the time it takes to run a specified distance at a specified speed.

Code Sample:

Basics/Demos/Calculator.html
<html>
<head>
	<title>Marathon Time Calculator</title>
</head>
<body>

<h1>Marathon Time Calculator</h1>

<form method="post" action="ProcessCalculator.cfm">
<table>
<tr>
	<td>Your Name:</td>
	<td><input name="yourname" type="text" size="30"></td>
</tr>
<tr>
	<td>Your Speed:</td>
	<td><input name="yourspeed" type="text" size="4"></td>
</tr>
<tr valign="top">
	<td>Friend's Name:</td>
	<td><input name="friendname" type="text" size="30"></td>
</tr>
<tr>
	<td>Friend's Speed:</td>
	<td><input name="friendspeed" type="text" size="4"></td>
</tr>
<tr>
	<td>Units</td>
	<td>
		<select name="units">
			<option value="mph">MPH</option>
			<option value="kph">KPH</option>
		</select>
	</td>
</tr>
<tr>
	<td colspan="2" align="right">
		<input type="submit" value="Calculate">
	</td>
</tr>
</table>
</form>

</body>
</html>

The above is a simple HTML form and contains no embedded ColdFusion code. Its action page is ProcessCalculator.cfm, which would contain ColdFusion code for processing the submitted form.

Next