|
|
|
|
|
|
Forms on the Web are very similar to hard copy forms: they are for collecting data from a person. Hard copy forms have "controls" (text boxes, check boxes, etc.) that they fill out. HTML Tags For FormsThere are 10 HTML tags for forms. Some are for grouping or meta data, but the primary form tags are "controls", i.e. a thing that users see and interact.
Source Code for "EG Handling Forms"I've made "EG Handling Forms" --a page that demonstrates basic form elements and how they're implemented on the client-side (mostly with HTML and JavaScript) and dealt with on the server-side (mostly with VBScript and ASP). I'm including the source code here so you can see the server-side code as well as the client-side code. <% ' This is server side code.
On Error Resume Next 'This is lazy error handling
' First check to see if this page just sent itself data.
Dim strSelfSubmitted
strSelfSubmitted = Request.Form("SelfSubmitted")
If strSelfSubmitted = "t" Then
Dim Field, FieldValue
Dim strFirstName,strLastName,strEmail,strGender,strSecret, strPetHidden, strNoteHidden
For Each Field in Request.Form
FieldValue = Request.Form(Field).Item
'This next If statement would only be used if you were inserting this into a SQL database.
If FieldValue = "" Then
FieldValue = "NULL"
Else
FieldValue = "'" & FieldValue & "'"
End If
' This snippet is convenient for testing during development. ''''''''''DEV ONLY
' It shows that we get all the fields, including 'Submit' but not the other buttons.
Response.Write("<li>" & Field & ": " & FieldValue & ".</li>" & Chr(10))
' Here's where we get the desired fields
Select Case Field
Case "FirstName" strFirstName = FieldValue
Case "LastNameHidden" strLastName = FieldValue
Case "Email" strEmail = FieldValue
Case "Secret" strSecret = FieldValue
Case "Gender" strGender = FieldValue
Case "PetHidden" strPetHidden = FieldValue
Case "NoteHidden" strNoteHidden = FieldValue(NoteHidden)
End Select
Next
If Err.Number <> 0 Then
strAction = "ERROR"
Else
'Perform server-side action with info.
'Stuff like interact with apps, DBs, etc.
End If
End If
%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GH EG Handling Forms</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="author" content="George Hernandez" />
<meta name="description" content="Example ASP page demonstrating form handling." />
<script type="text/JavaScript" language="JavaScript">
<!--
//I frequently make a function that kicks in when the page loads.
function initialize() {
document.frm1.FirstName.focus();
document.frm1.FirstName.select();
}
//Validate form on client-side before submitting to server. Return true if OK & false if not.
function validate(form) {
//To insist that the user enter a first name.
if (!form.FirstName.value) {
alert("You must enter a First Name.");
form.FirstName.focus();
return false;
}
//If the value were to go into a SQL database,
//then escape any apostrophes and put it in a hidden field.
var strLastName = String(form.LastName.value);
form.LastNameHidden.value = strLastName.replace(/'+/g, "''");
if (!form.LastName.value) {
alert("You must enter a Last Name.");
form.LastName.focus();
form.LastName.select();
return false;
}
//Some fancy code to help get a well-formed email.
if (!form.Email.value) {
alert("You must enter an Email Address.");
form.Email.focus();
form.Email.select();
return false;
} else if (window.RegExp) { //For browsers that do support RegExp
var strReg1 = "(@.*@)|(\\.\\.)|(@\\.)|(\\.@)|(^\\.)";
var strReg2 = "^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\\.([a-zA-Z]{2,3}|[0-9]{1,3})(\\]?)$";
var reg1 = new RegExp(strReg1);
var reg2 = new RegExp(strReg2);
if (!reg1.test(form.Email.value) && reg2.test(form.Email.value)) {
form;
} else {
alert("Improper email format.");
form.Email.focus();
form.Email.select();
return false;
}
} else { //For browsers that don't support RegExp
if (form.Email.value.indexOf("@") >= 0) {
form;
} else {
alert("Improper email format.");
form.Email.focus();
form.Email.select();
return false;
}
}
//If a control isn't required, like the "Secret" password control,
//then there is no need to validate it.
//Requiring that a gender must be chosen on the radio control.
if (form.Gender[0].checked) {
alert("You must select a Gender.");
form.Gender[0].focus();
return false;
}
//Requiring that at least 1 box is checked in a set of checkboxes.
//I also did a trick of dumping the Pet checkbox choices
//into a hidden field to avoid dealing with a collection/array.
var blnPet=false;
form.PetHidden.value = "";
for (var i=0;i<form.Pet.length;i++){
if (form.Pet[i].checked) {
blnPet = true;
form.PetHidden.value += form.Pet[i].value;
}
}
if (!blnPet) {
alert("You must select at least 1 pet.");
form.Pet[0].focus();
return false;
}
//For contrast, I did not do the hidden field trick for the Fruit select choices.
//Reading a textarea. It is escaped here for safe SQL storage. When read, it should be unescaped.
form.NotesHidden.value = escape(form.Notes.value);
}
// /-->
</script>
<style>
.comment {
color:#090;
font-style:italic;
}
</style>
</head>
<body onload="initialize()"><a name="startContent" id="startContent"></a>
<%
'Check again if this page just sent itself data.
If strSelfSubmitted = "t" Then
'Yes, the form just sent itself data. Show the results.
%>
<hr />
<p>The above was done prior to the HTML as a check.</p>
<p>Here is the info properly placed into HTML.<p>
<ul>
<li>First Name: <%= strFirstName %></li>
<li>Last Name: <%= strLastName %></li>
<li>Email: <%= strEmail %></li>
<li>Secret: <%= strSecret %></li>
<li>Self-Submitted: <%= strSelfSubmitted %></li>
<li>Gender: <%= strGender %></li>
<li>Pet Hidden: <%= strPetHidden %></li><%
Dim intFruit
For intFruit = 1 To Request.Form("Fruit").Count
Response.Write(" <li>Fruit: " & Request.Form("Fruit")(intFruit) & "</li>")
Next
%>
</ul>
<%
ElseIf strAction = "ERROR" Then
'Ow! This page tried to send itself data so show an error message.
'So as cheap user-visible error handling,
'we're sending the user back so at least some of his data is still there.
%>
<p color="red">There has been an error sending your request.</p>
<p>Please use your browser's back button and try again.</p>
<p>
<form name="frmFailure">
<input type="button" ID="cmdBack" name="cmdBack" value="Back" onclick="history.back();">
</form>
</p>
<%
Else
'The user just arrived at the page and needs to fill out this form
%>
<h1>Demonstrating Form Elements</h1>
<form name="frm1" method="POST" action="egHandlingForms.asp" onSubmit="return validate(this)">
<!-- Note that the form calls the same page it's on. It could have called a different page. -->
<fieldset>
<legend>Legend of Fieldset for Text Box Controls</legend>
<label><input type="text" name="FirstName" size="20" /> FirstName </label>
<label><input type="text" name="LastName" size="30" /> LastName </label> <br />
<label><input type="text" name="Email" size="40" /> Email
<span class="comment">(All 3 are <input type="text">)</span></label>
<p class="comment">Note that there isn't much formatting control with the label tag</p>
<p><input type="password" name="Secret" size="10" /> Secret
<span class="comment">(This field isn't required. <input type="password">)</span></p>
<input type="hidden" name="LastNameHidden" />
<input type="hidden" name="SelfSubmitted" size="1" value="t" />
<p class="comment">You can't see any <input type="hidden">'s at all!</p>
</fieldset>
<legend>Legend of Fieldset for Multiple Choice Controls</legend>
<p>Gender <span class="comment">(<input type="radio"> because only 1 can be selected. In this EG, a selection is required)</span><br />
<input type="radio" name="Gender" value="None" checked="checked" />None Selected (the default)<br />
<input type="radio" name="Gender" value="M">Male<br />
<input type="radio" name="Gender" value="F">Female
</p>
<p>Pets
<span class="comment">(<input type="checkbox"> because 0 or more can be selected. In this EG, 1+ required)</span><br />
<label><input type="checkbox" name="Pet" value="Dog" />Dog</label>
<label><input type="checkbox" name="Pet" value="Cat" />Cat</label>
<label><input type="checkbox" name="Pet" value="Bat" />Bat</label>
<label><input type="checkbox" name="Pet" value="Rat" />Rat</label>
<input type="hidden" name="PetHidden" />
</p>
<p>Fruits
<span class="comment">(<select> because 0, only 1, or 1+ can be selected. In this EG, 0 are required.)</span> <br />
<select name="Fruit" multiple="multiple">
<optgroup label="Apples" disabled="disabled">
<option label="Mac" value="AppleWAMa">Washington Macintosh</option>
<option label="Gala" value="AppleORGa">Oregon Gala</option>
</optgroup>
<optgroup label="Bananas">
<option label="Plantain" value="BananaCUPl">Cuban Plantain</option>
<option label="Mini" value="BananaPHMi">Philippine Mini-Banana</option>
</optgroup>
<optgroup label="Oranges">
<option label="Navel" value="OrangeNVNa">Nevada Navel Orange</option>
<option label="Tangerine" value="OrangeTXTa">Tenessee Tangerine</option>
<option label="Tangelo" value="OrangeTNTo">Tennessee Tangelo</option>
</optgroup>
</select>
</p>
</fieldset>
<fieldset>
<legend>Legend of Fieldset for Textarea Control</legend>
<label>Notes<br />
<textarea name="Notes" rows=3 cols=30></textarea>
</label>
<input type="hidden" id="NotesHidden" name="NotesHidden" />
</fieldset>
<fieldset>
<legend>Legend of Fieldset for Button Variations</legend>
<p>
<input type="submit" value="Submit" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
<input type="image" value="Image" name="Image"
src="http://www.georgehernandez.com/Media/zMisc/GHLogo.gif" alt="GH logo used as button" />
<button type="button" value="Button" name="Button" onclick="alert('hi')"><img
src="http://www.georgehernandez.com/Media/zMisc/GHLogo.gif"></button>
</p>
</fieldset>
</form>
<%End If%>
</body>
</html>
2007-05-14t19:12:42Z |
| ||||||||
![[PHOTO: George Hernandez]](/h/Media/zMisc/GHLogo.gif){kind=small}