Form Tags

All the form elements including

the submit button are placed

within the form tags.

There are two different

submission methods for a form

"POST" and "GET".

Post: You would normally use

for a form

Get: You would normally use

when data is returned as in a

search.

Form Tags

action: indicates the address of the server side script.

<form id="myForm" method="post" action="address.php">

Input elements and submit button</form>

Input Type

Input Type

Place the name of the input area in the label

<label>name of area</label>

id: you need to give each input item an id
name: defines the input item and is used by your server
              the name identifies the data in your email
size: indicates the width
maxlength: limits the user to a certain amount of
                     characters

value: you can include the text withiin the input

<input name="textField" type="text" id="textField" value="your name" size="20" maxlength="30" />

Textarea

Textarea

Drop Down Items

Select from a list
<select name="listForm" id="listForm">
<option>select one</option>
<option>item two</option>
<option>item three</option>
</select>

Check Box

Check Box

 The check box is used if you want the user to check more than one item from a group of items.  If you want the user to only check one item then you should use the Radio Button

<input type="checkbox" name="one" id="one" />

Radio Button

Radio Button

type: radio button
name: name needs to be the same for each button this will
             prevents the user from selecting                       more  than one button.

value: identifies the choice

<input type="radio" name="fruit" id="fruit" value="apple" />

File Field

File Field

Fieldset

Fieldset

A fieldset allows you to divide a long form into managable parts.

It draws a box around related form elements
<fieldset>
<legend>Your info</legend>
<h2>
<input type="checkbox" name="one" id="one" />
<input name="textField" type="text" id="textField" size="20" maxlength="30" />
<br />
<br />
</h2>
</fieldset>

Reset Button

Reset Button

<input type="reset" name="reset" id="reset" value="Reset" />

Submit Button

Submit Button

<input type="submit" name="submit" id="submit" value="Submit" />

php

We are going to create a php form
that will send you an email with the
information from the user and also
bring up a page that thanks the user
for filling out the form.

You will need to create a reply
(thanks.htm) page.

This php is only for a simple document
and does not have any built in additional security.

php

$email = $_REQUEST['email'] ;

For each "name" within the form
<input name="emailaddress" />
you must have a corresponding item in the POST section of your php

$_POST["emailaddress"] ."\n<>".

place your email address in the following section:

mail( "name@address.com"

Place in the following line the information that you want to have appear in the subject line of the email

"Feedback Form City Site",

Place the address of the reply page in the following section:

header( "Location: http://name.com/thanks.htm" );

As long as you include an name="email" in your form you will get the user's email address as the return address in the email you receive.

Use the code below without adding addition spaces.

<?
$email = $_REQUEST['email'] ;

$message =
$_POST["title"] ."\n".
$_POST["name"] ."\n<>".
$_POST["email"] ."\n<>".
$_POST["street"] ."\n<>".
$_POST["city"] ."\n<>".
$_POST["phone"] ."\n<>".
$_POST["other information"] ."\n<>".
$_POST["comments"] . "\n<>" .
$_POST["question"] ."<>";

mail( "name@address.com", "Feedback Form City Site",
$message, "From: $email" );
header( "Location: http://name.com/thanks.htm" );

Styles

to add styles to your form you need to play with the sizes and display along with borders and backgrounds.

The image to the right represents a form that was created using the following styles.

#smallForm{
margin:1em 0;
color:#369;
width:320px;
border:1px solid #369;

}
#smallForm h3{
margin:0;
background:#369;
color:#fff;
font-size:20px;
border:1px solid #369;
border-bottom:none;
}
#smallForm h3 span{
display:block;
padding:10px 20px;
background:369;
}
#smallForm fieldset{
margin:0;
padding:0;
border:none;
border-top:1px solid #369;
background:#fff;
padding-bottom:1em;
}
#smallForm legend{display:none;}
#smallForm p{margin:.5em 20px;}
#smallForm label{display:block;}
#smallForm input{
width:272px;
border:1px solid #369;
background:#fff;
padding:5px 3px;
color:#fff;
}
#smallForm textarea{
height:125px;

border:1px solid #369;
overflow:auto;
}
#smallForm p.submit{
text-align:right;
}
#smallForm button{
padding:0 20px;
height:32px;
line-height:32px;
border:1px solid #369;
background:#369;;
color:#fff;
text-align:center;
}