Alwanza Home Form Magic Revealed Alwanza Bells and Whistles
 
Start the Form:

Send the form to an email address:

<FORM METHOD="POST" ACTION="mailto:bogus@bogus.com">

Or send the information from the form to a scripting page:

<FORM METHOD="GET" ACTION="sampleForm2.html">

Or send the information from the form to another frame:

<FORM METHOD="POST" ACTION="sampleForm.html" TARGET="_parent">

If you will want to refer back to the FORM elements in a JavaScript (for validation, etc), it is handy to include a NAME element in the FORM tag (see JavaScript? - the rest of the code is at bottom of page):

An element can be accessed either by its element number ( example:  document.myForm.elements[9].value )
Or by its assigned name ( example:  document.myForm.Email.value )
Note:  If using the name, remember they are Case Sensitive

<FORM NAME="myForm" METHOD="POST" ACTION="mailto:bogus@bogus.com" onSubmit="return validateAll(this)">

Get will display the Key - Value pairs to the right of the URL in the browser address box, and so it has some SIZE constraints.

Post will not display the Key - Value pairs, which may make it more difficult to test, but more importantly, more difficult to hack.


Choose Input Methods:

Use checkboxes for choices that are not mutually exclusive.  They are toggle switches.

<INPUT TYPE="checkbox" NAME="paramName-Key1" VALUE="Selection1-Value">
<INPUT TYPE="checkbox" NAME="paramName-Key2" VALUE="Selection2-Value">

Receiving input from checkboxes can be tricky.  If you use a "NAME" that is the same for all of them, you need to receive it in a way that allows multiple values for the same key.  Or, you can assign a unique (but similar) name to each checkbox.


Use radio buttons for mutually exclusive choices.  The one marked "Checked" is the default.

<INPUT TYPE="radio" NAME="radio-Key" VALUE="One-value">
<INPUT TYPE="radio" NAME="radio-Key" VALUE="Two-value" Checked>
<INPUT TYPE="radio" NAME="radio-Key" VALUE="Three-value">
<INPUT TYPE="radio" NAME="radio-Key" VALUE="Four-value">


There can be hidden fields which contain information that the user does not enter:

<INPUT TYPE="hidden" NAME="browser_type" VALUE=javascript:navigator.appName>

To make a pull-down select list:

<SELECT MULTIPLE NAME="Metasyntax1" SIZE="3">
<OPTION VALUE="Woo">Voo</OPTION>
<OPTION SELECTED>Roo</OPTION>
<OPTION VALUE="Bang">She</OPTION>
<OPTION>Moo</OPTION>
</SELECT>
<SELECT NAME="Metasyntax2" SIZE="1">
<OPTION VALUE="1" SELECTED>Fee</OPTION>
<OPTION VALUE="2">Fie</OPTION>
<OPTION VALUE="3">Foe</OPTION>
<OPTION VALUE="4">Fum</OPTION>
</SELECT>

Note, "SIZE" contains the number of options viewable without scrolling.
And "multiple" allows for more than one selection.

And now, the SCARIEST type of INPUT:  Fields

They are scary because the programmer cannot control what the user enters, so they must be accompanied by validation and limits.  There are times that you might not want users entering backticks or astericks into a text field.

The default input is a single line text area:

<INPUT NAME="Your Name" SIZE="30" MAXLENGTH="35">

But this is the preferred syntax:

<INPUT TYPE="text" NAME="Emailinput" SIZE="30" MAXLENGTH="35" onBlur="validateEmail()" onFocus="this.select()">

For multi-line user input, use a TEXTAREA:

<TEXTAREA NAME="PELEGROSA" ROWS="4" COLS="40" WRAP="soft" onBlur="validatePelegrosa()" onFocus="this.select()">Whatever you put between the opening and closing tags shows up here! </TEXTAREA>



<TEXTAREA NAME="Comments" ROWS="3" COLS="40" WRAP="hard" onBlur="validateComments() onFocus="this.select()">Your comments go here </TEXTAREA >

The values for WRAP are OFF, Physical (same as Hard), or Virtual (same as Soft)

WRAP="OFF" means that the text in the box does not wrap to the next line.

WRAP="Hard" or WRAP="Physical" means that not only does the text wrap in the box, but that the breaks are included in the transmission.

WRAP="Soft" or WRAP="Virtual" means that the text in the box wraps, but it is sent as one long continuous string without breaks.

Here is a password field:

<INPUT TYPE="Password" MAXLENGTH="20" NAME="Psswd" SIZE="15" VALUE="password">


Add Submit (and Reset) Buttons:

<INPUT TYPE="submit" VALUE="Send">         <INPUT TYPE="reset" VALUE="Clear">

It is also possible to use an image as a submit button.  The coding would look like this:

<INPUT TYPE="image" SRC="../images/submit_off.gif" WIDTH="180" HEIGHT="60" BORDER="0" ALT="Submit">   But, this type of submit button does not do well with JavaScript event handlers inside this tag (better to do validation in form tag if you are using this).




Close Form:

</FORM>
 
JavaScript Validation (goes in page head):

< SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

<!-- // hide script from old browsers

// Function to validate email address.
function validateEmail() {
   var emailstring = document.myForm.Email.value;
   var at_Index = emailstring.indexOf("@");
   var afterAt_sign = emailstring.substring((at_Index + 1), emailstring.length);
   // find a dot in the portion of the string after the at sign only
   var dotIndex = afterAt_sign.indexOf(".");
   // determine dot position in entire string (not just after 'at' portion)
   dotIndex = dotIndex + at_Index + 1;
   // afterAt_sign will be portion of string from at sign to dot
   afterAt_sign = emailstring.substring((at_Index + 1), dotIndex);
   // afterDot will be portion of string from dot to end of string
   var afterDot = emailstring.substring((dotIndex + 1), emailstring.length);
   var beforeAt_sign = emailstring.substring(0,(at_Index));
   var regex = /\;|#|\$|%|\^|&|\*|\(|\)|\+|\\|\/|\?|>|<|\{|\}|\,|\[|\]|\`|\|/;
   // index of -1 means "not found"
   if ((emailstring.indexOf("@") != "-1") &&
      (emailstring.length > 5) &&
      (afterAt_sign.length > 0) &&
      (beforeAt_sign.length > 1) &&
      (afterDot.length > 1) &&
      ! (regex.test(emailstring)) ) {
      // window.alert("email good");
      return true;
   } else {
      alert("Please check your email address!");
      document.myForm.Email.focus();
      return false;
   }
}

// Function to validate input.
function validatePelegrosa() {
   var PelegrosaString = document.myForm.PELEGROSA.value;
   var BadCharsRegex = /=|\;|\$|%|\^|\*|\@|\(|\)|\+|\\|>|<|\{|\}|\,|\[|\]|\`|\|/;
   var PelegrosaLength = PelegrosaString.length;
   var MaxLength = 160;
   var Difference = MaxLength - PelegrosaLength;
   if (PelegrosaLength > MaxLength) {
      ("value is " + PelegrosaLength + " characters long. Please reduce by " + Difference + " characters.");
      return false
   }
   if (BadCharsRegex.test(PelegrosaString) ) {
      alert("Please check your input! Bad characters found.");
      return false;
   } else {
      // alert("value is " + PelegrosaLength + " characters long.");
      return true;
   }
}

// Function to validate input.
function validateComments() {
   var CommentsString = document.myForm.Comments.value;
   var BadCharsRegex = /=|\;|\$|%|\^|\*|\@|\(|\)|\+|\\|>|<|\{|\}|\,|\[|\]|\`|\|/;
   var CommentsLength = CommentsString.length;
   var MaxLength = 120;
   var Difference = MaxLength - CommentsLength;
   if (CommentsLength > MaxLength) {
      ("value is " + CommentsLength + " characters long. Please reduce by " + Difference + " characters.");
      return false
   }
   if (BadCharsRegex.test(CommentString) ) {
      alert("Please check your comments! Bad characters found.");
      return false;
   } else {
      // alert("value is " + CommentsLength + " characters long.");
      return true;
   }
}

// Function to validate form.
function validateAll() {
   var valid = 0;
   if (validateEmail() ) {
      valid++;
   } else {
      document.myForm.Emailinput.focus();
      return false;
   }
   if (validatePelegrosa() ) {
      valid++;
   } else {
      document.myForm.PELEGROSA.focus();
      return false;
   }
   if (validateComments() ) {
      valid++;
   } else {
      document.myForm.Comments.focus();
      return false;
   }
   if ( valid < 3 ) {
      return false;
   } else {
      return true;
   }
}
// -->
</SCRIPT>


To email please see:  contact.cgi if you have any comments or questions about this page.


Created: 5/20/00
Updated: 08/31/09