HTML Forms Part 2
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
FORM ATTRIBUTES

Forms are typically used with CGI (Common Gate Interface) scripts that are located on a server. Common languages to write CGIs are Perl and C. The <FORM> tag has attributes that give specific information to the server that helps it process the information it is sending.

We can also process form data using JavaScript.

Ex: <FORM action="/scripts/mycgi.pl" enctype="multipart/form-data" method="post">

action (required)
This attribute tells the browser where the CGI is located that will process this form.

NOTE: The only time you would leave out this attribute is if you were using an onClick or other JavaScript method to access the form.

method (required)
This can be equal to either GET or POST. This is the method that the browser will use to communicate to the Web server and send the form information.

GET - the default, this method puts the form information in the URL after a question mark.
EX: http://www.server.com/cgi-bin/test.pl?name=value

POST - this method sends the form information as a data block to the server through HTTP protocols

enctype
This indicates the format of the data submitted to the server. This is most often used with forms where there is a file-upload option.

accept
This is a list of the MIME types that the server will accept.

accept-charset
This is a list of the character sets that the server will accept.

onsubmit
If you want to perform JavaScript validation on your form, then you need to have a JavaScript call within the form tag. The onSubmit attribute tells the browser to complete a JavaScript script before submitting the form to the server.

Form Lessons:
A) Create a button that opens a new window:The code...

In HEAD:

<script>

function my_web(){

//basic open window script
window.open("http://lmrusnak.com", "lauras_win", "width=800, height=600");

}

</script>

In BODY: to create my button...

<form>

<input name="my_button" type="button" value="Go to Laura's website" onclick="my_web();">

</form>

B) Create button to alert someoneThe code...

In HEAD:

<script>

//greet(message) is passing one parameter--the greeting message
function greet(message){

//opens alert box with custom greeting
alert(message);

}

</script>

In BODY:

<form>

//single quotes around greeting message in ()
<input name="my_button" type="button" value="greetings" onclick="greet('hello');">

</form>

C) Multiple message buttons: The code...

In HEAD:

<script>

function multiButtons(myURL, my_Win){

window.open(myURL ,my_Win, "width=800, height=600");

}

</script>

In BODY:

<form>

<input name="my_button" type="button" value="go here" onclick=" multiButtons('http://google.com', 'googleWIN');">

<input name="my_button" type="button" value="go there" onclick=" multiButtons('http://bgsu.edu', 'bgsuWIN');">

<input name="my_button" type="button" value="go anywhere" onclick="multiButtons('http://lmrusnak.com', 'lauraWIN');">

</form>

D) Receiving form information:

Type your name:

Type your address:

 

In HEAD:

<script>

function popUp(){

//create new window; no HTML doc in single quotes because we want a blank slate
newWin = window.open(' ', 'myWIN', 'toolbar=no, statusbar=no, width=400, height=300');

//adds header to new window
newWin.document.write("<h3>Form Data</h3>");

//adds name info
newWin.document.write("<strong>Your name is:</strong> " + document.form1.namestring.value + "</p>");

//adds address info
newWin.document.write("<strong>Your address is:</strong> " + document.form1.address.value + "</p>");

}

</script>

In BODY:

<form name="form1" onSubmit="popUp();">

Type your name:
<input type="text" name="namestring" size="50">
<br><br>
Type your address:
<input type="text" name="address" size="80">
<br><br>
<input type="submit" value="submit form">
<input type="reset" value="clear">

</form>