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" ENCTYPE="text/plain">

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

<FORM METHOD="GET" ACTION="sampleForm2.html" ENCTYPE="text/plain">

Or send the information from the form to another frame:

<FORM METHOD="POST" ACTION="sampleForm.html" TARGET="_parent" ENCTYPE="text/plain">

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):

<FORM NAME="myForm" METHOD="POST" ACTION="mailto:bogus@bogus.com" ENCTYPE="text/plain" onSubmit="if (! validateAll() ) { return false }">

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-Key" VALUE="Selection1-Value">
<INPUT TYPE="checkbox" NAME="paramName-Key" VALUE="Selection2-Value">

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="date" VALUE="$date">

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="Email" 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.elements[9].value;
   var ampIndex = emailstring.indexOf("@");
   var afterAmp = emailstring.substring((ampIndex + 1), emailstring.length);
   // find a dot in the portion of the string after the ampersand only
   var dotIndex = afterAmp.indexOf(".");
   // determine dot position in entire string (not just after amp portion)
   dotIndex = dotIndex + ampIndex + 1;
   // afterAmp will be portion of string from ampersand to dot
   afterAmp = emailstring.substring((ampIndex + 1), dotIndex);
   // afterDot will be portion of string from dot to end of string
   var afterDot = emailstring.substring((dotIndex + 1), emailstring.length);
   var beforeAmp = emailstring.substring(0,(ampIndex));
   var regex = /\;|#|\$|%|\^|&|\*|\(|\)|\+|\\|\/|\?|>|<|\{|\}|\,|\[|\]|\`|\|/;
   // index of -1 means "not found"
   if ((emailstring.indexOf("@") != "-1") &&
      (emailstring.length > 5) &&
      (afterAmp.length > 0) &&
      (beforeAmp.length > 1) &&
      (afterDot.length > 1) &&
      ! (regex.test(emailstring)) ) {
      // window.alert("email good");
      return true;
   } else {
      alert("Please check your email address!");
      document.myForm.elements[9].focus();
      return false;
   }
}

// Function to validate input.
function validatePelegrosa() {
   var PelegrosaString = document.myForm.elements[10].value;
   var PelegrosaLength = PelegrosaString.length;
   var repetitions = 0;
   if (PelegrosaLength > 250) {
      // prevent infinite loop of alert messages
      if (repetitions < 1) {
         alert("Please confine the text to less than 250 characters!");
         repetitions++;
      }
   } else {
      // alert("value is " + PelegrosaLength + " characters long.");
      return true;
   }
}

// Function to validate input.
function validateComments() {
   var CommentsString = document.myForm.elements[11].value;
   var CommentsLength = CommentsString.length;
   var repetitions = 0;
   if (CommentsLength > 250) {
      // prevent infinite loop of alert messages
      if (repetitions < 1) {
         alert("Please confine the text to less than 250 characters!");
         repetitions++;
      }
   } else {
      // alert("value is " + CommentsLength + " characters long.");
      return true;
   }
}

// Function to validate form.
function validateAll() {
   var valid = true;
   if (! validateEmail() ) {
      document.myForm.elements[9].focus();
      valid = false;
   }
   if (! validatePelegrosa() ) {
      document.myForm.elements[10].focus();
      valid = false;
   }
   if (! validateComments() ) {
      document.myForm.elements[11].focus();
      valid = false;
   }
   if ( valid == false ) {
      return false;
   } else {
      return true;
   }
}
// -->
</SCRIPT>