Course notes
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Intro to Forms

March 15th, 2011

Overview:

  1. FORM element
  2. Examples
  3. Form attributes (action & method)
  4. Using onclick

Forms add interactivity to your site and are made up of text boxes, check boxes, radio buttons, drop-down lists, and other input fields.

Form tags can be placed anywhere in the BODY of your html doc:

<form>

      <input>

</form>

Even if you just want to substitute a text or image link with a type of Form input, you will still need to use the form tags. In other words, all input tags, select tags, and textarea tags must be contained within a FORM tag.

INPUT tags are the primary tag used in FORMs. The input tag allows your readers to input data to your Web server.

There are eleven specific types of elements that can be used in forms:

1. button
2. checkbox
3. image
4. radio
5. select
6. text
7. reset
8. submit
9. file
10. hidden
11. password

You choose which type of input tag you would like by placing it in the type=" " attribute.


Button
<input type="button" value="my button" name="thebutton" />
The button input type allows you to create custom input buttons. It is most commonly used with JavaScript forms with the onClick attribute so that data is not sent to the Web server until the JavaScript has processed it.


Checkbox
<input type="checkbox" name="choices" value="choice1"/>
<input type="checkbox" name="choices" value="choice2"/>

With a checkbox element, you can give your readers a list of items to choose from. They can choose more than one in the list. If you have a group of checkboxes, link them all together by giving them the same name. The values will all be sent to the form separately.

Choice 1 Choice 2


Image
<input type="image" name="my_image" src="images/pixel.jpg" width="100" height="50" border="0" />

With the image input type, you can create images for your button using forms. One thing to note, images as submit buttons don't allow for the tab key to move the focus to it, and this makes them less accessible for people with no mouse.


Radio
<input name="myRadio" type="radio" value="lettuce" />
Radio buttons give readers a "one of many" choice combination. Like the checkbox input type, radio button groupings all have the same NAME, and each value is different. If a reader chooses one value, all the other values will be deselected.

lettuce
tomato
onion
pickle


Select
<select name="choices">
<option value="0"></option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
</select>
Pull down menus allow users to choose one of many options. Like the radio button input type, select menus groupings all have the same NAME, and each value is different.


Text
<input name="myText" type="text" size="20" maxlength="20">enter text
The text box is the most common input type and to make HTML easier, is the default for the INPUT tag. This input element allows your readers to type in any text information into the box.

<textarea name="myTextArea" cols="20" rows="6">enter text</textarea>

The textarea box allows you set a larger box for the text input.

single line

multi-line


Reset
<input type="reset" name="myReset">
The reset button resets the form to its default value. With most forms, this is blank entries, but if the fields have starting values, the reset button will return the form to that. This "resetting" is done by the browser, not the server. This button will have the default value of "Reset", if you want it to say something different, change the VALUE="" attribute.


Submit
<input type="submit" name="mySubmit">
In order for a form to be sent to the server it needs some form of submit button. This field sends the form information to the Web server when it is clicked. In Internet Explorer it has a default value of "Submit". If you want to change this, change the VALUE="" attribute.


File
<input type="file" />
The file input type allows your readers to upload a file to your Web server. This typically needs to be processed with some Javascript, PHP or other web programming language.


Hidden
<input type="hidden" />
Hidden fields are used to "save state" within an HTML form. They are most often used in forms that have multiple pages and information that needs to be carried from one page to the next. They are not shown on the Web page, but the information is sent along with other form input fields.


Password
<input type="password" name="myPassword" value="enter password"/>
The password field looks almost identical to the text field. However, when you type in it, the letters are hidden. This allows you to have a little more security for passwords on your forms. Remember, however, that the passwords are not sent encrypted in any way. So don't rely on this to secure truly important secret information.

enter password

EXAMPLES

FORM ATTRIBUTES

Ex: <FORM action="processForm.php" method="post">

action (required)
This attribute tells the browser where to go upon submission (and where to submit the data to).

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. You will not see the information in the URL.

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.

Example: <form action="../cgi-bin/mycgi.pl" name="testform" onSubmit="return TestDataCheck()">


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://bgsu.edu", "my_win", "width=800, height=600");
      }

</script>

In BODY: to create my button...

<form>

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

</form>

B) Create button to alert someone

The 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://digitalarts.bgsu.edu', 'digWIN');">

</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>


HOMEWORK GIVEN


HOMEWORK GIVEN: Proj 3: Concept - One page

Description: Create a one-page document that has at minimum: One paragraph about the concept One paragraph about the aesthetics/visuals One paragraph about the interactivity
DUE: Mar. 17, 2011

HOMEWORK GIVEN: Proj 3: Mockup

Description: Create mockups (images) for three pages of your project. Save them as JPGs and upload them to the class folder - Project3/mockups PRIOR to class.
DUE: Mar. 22, 2011

HOMEWORK GIVEN: Proj 3: 75 percent done

Description: Upload your 75% completed project(all files, not including PSDS) into the Project3/75_percent folder in the class directory PRIOR to class.
DUE: Mar. 29, 2011