Html Add Values in Form

							WORKING WITH FORMS

Forms are the oldest and most flexible method of allowing your site visitors to interact with your site, and
ultimately, you. Whether you're providing a method of collecting feedback for the site's improvement.
collecting demographic information, or receiving orders for products on your site, forms are the interface
through which you are most likely to interact with your audience.

Unlike more static HTML methods, forms depend upon a relationship between the site visitor and the page
you create as well as scripts residing on the Web server.

Typically, this relationship is helped along by a process known as CGI, or the Common Gateway Interface.
CGI acts as the conduit through which the information passes, and hands off the information server-side to
a program -- usually written in Perl -- for processing, however in our case it will be PHP, an open-source
script language.

Forms can encompass a wide range of functions, including the simple gathering of a user's name, address
and contact information which is then sent to an email address (often referred to as a mailto form), to the
creation of games based on user input.

Server technologies differ, and CGI isn't the only method by which forms are processed. Because of the
various methods of processing forms, you will have to work with your ISP (Internet Service Provider) or
systems administrator to find out some information about your server and how it will process the feedback
forms.

Forms employ tags and special elements to enable diverse input options to be displayed and made
functional by the form. The special elements are known as controls.

<form>....</form> is the foundational element of all forms, the close and end tags are required. Form
accepts a variety of attributes. The two most critical are action, which combines with a URL to the form
processor and method, which takes the value of get or post depending upon the way the form technology is
set up.
<fieldset>...</fieldset> is used to group form controls into logical, related “chunks.” (Accessibility Feature)
<legend>...</legend> is used to add a caption to a fieldset, which helps users to understand the context of
the form controls contained within that fieldset. (Accessibility Feature)

<input /> the input element is responsible for managing the input controls that will be placed within the
tag, which only has an opening with no associated closing tag so it must end with />. Commonly used
attributes for the <input /> tag are as follows:
type="x" this specifies the type of control being called upon.
name="x" the name attribute names the control.
value="x" value describes the input control. This is optional with all controls except for radio.
size="x" the width of the input control in pixels. sometimes the number of characters determines the size
of the control, as is the case with the text and password controls.
maxlength="x" the maximum numbers of input characters allowed in an input controls.
check="x" this option pre-selects a given radio button or checkbox within a form.
src="x" allows you to determine the location of an image to be used for graphical button elements within
the form.

<textarea>...</textarea> This element creates a text input area. It's the same in concept as a control, but it
is managed using an element instead of an attribute. The attribute it accepts are name, rows="x" where x
defines the number of lines in the box and cols="x" where columns specifies the width of the box.

<select>...</select> the select element creates a menu. It can be a drop-down menu or a text list menu,
depending upon the way you define the attributes of the element. You can add the multiple attributes of the
element. If the size attribute has a value of 1 it will be a drop-down menu (default no size is specified).
<option>...</option> this element defines each individual list item within a menu. both the opening and
closing tags are required. note that the end tag is optional with the option element.
<label>...</label> this element is an accessibility feature that provides context for users with speech-based
browsers.

Controls
Form controls define the kind of input option that will appear onscreen. Controls are syntactically an
HTML value and are placed in the value position of the type attribute within an <input /> tag statement.
The controls available include:
     text creates an input text box that consists of a single line. Width of the box is controlled by the
         size attribute, default size is 20 characters wide.
     password Exactly like text, except the characters input by the visitor will reflect back as asterisks.
     checkbox Creates a box that can be checked. You can have multiple checkboxes in a selection,
         and all of them may be checked if applicable.
     radio This creates a radio button. You can have as many as you want in a give subject area, but
         only one may be selected.
     submit This control creates the familiar "submit" button, which appears as a raised button with a
         push-button look. The word on the control can be customized using the value attribute.
     reset The same in appearance and customization features as submit, this control will clear the
         form so the sire visitor can re-enter his or her answers.
     file This creates a file selection control. The site visitor can then select a file to upload.
     hidden Hidden controls are those that don't render in the browser. They are used to insert
         information for the recipient of the form data.
     image Allows for the insertion of a custom image. This gives the designer the ability to use a
         graphic for submit and reset instead of the default option.
     button Creates a push button. These must be associated with a script in order to work, since there
         is no built-in action for them.

A form can begin anywhere on a standard HTML page. You'll use the from <form> tag and its companion
closing tag </form>, within the body of the HTML page.
1. open a standard html page and introduce a form
2. add the form tag and its companion closing tag.
3. to set up the way in which your form sends information to the server, you'll need to add the method
attribute and an appropriate value. Values are get and post:
<form method="post">
</form>
4. next you need to make sure that the data you send goes to the correct place for processing. to do this,
you'll use the action attribute, combined with the path to the script on the server that will help perform the
action:
<from method="post" action"http:://www.tcnj.edu/~miranda/cgi-bin/mailscript">
</form>

Adding a Text Field
Now begin adding areas where people can input data in to the form. One of the most common input areas
is known as a text field. You may use text fields for information that is entered on a single line, such as
name, address, phone number, and email address.
Set up the text field by using the <input> tag and the type attribute. Fields are defined by the type
attribute's value. There are also a number of additional attributes and values including name, size, and
maximum amount of characters the field will allow.

Making a Menu List
Another powerful method of offering form selections for your visitors is a menu with options. These are
especially helpful when you have numerous items in a list, such as a list of states or countries.
Drop-down lists are created by using the <select> element and individual <option> tags. There are several
attributes that can modify both.
-- select alone will give you a drop-down menu. to create a list box with all choices available, add the
"multiple" attribute into the select tag and to ensure that the correct number of options are shown use the
name attribute. in this case: <select size="7" multiple="multiple">

Creating a Text Area
The <textarea>...</textarea> tag allows your visitors to input longer messages. The row attribute used in
the textarea tag sets how high the text area will be. Also in the textarea tag, to set the width in characters,
use the cols attribute with a numeric value.

Providing Reset and Submit Buttons
With most of your form complete, it's time to offer your user the ability to submit the form or reset the
information and start over.

To add a submit button, use the input tag with the type attribute. The value "submit" will create the button
and customize what the submit button says by adding a value:
<input type="submit" value="send it!">

The reset button works using the same logic. Simply use the reset value in the type attribute to create a
reset button. If you'd like to customize how the button is labeled, use the value attribute:
<input type="reset">
-------------------------------------

Create a functioning simple form that deposits the data into a PHP file by designating a php file following
the action direction:

Note: There are two choices you have with METHOD: GET and POST. The difference between using
GET versus POST is squarely in how the information is passed from the form to the processing script. The
GET method will send all the gathered information along as part of the URL and has a 256 character limit,
but may be bookmarked (e.g. Google maps). The POST method transmits the information invisibly to the
user, only the server sees the content. Hence it's best for secure information.
For example, upon submitting your form, if you use the GET method, the resulting URL will be something
like:

http://www.domain.com/php/HandleForm.php?firstname=Ricardo&lastname=Miranda

Whereas using the POST method, the end user would only see

http://www.domain.com/php/HandleForm.php

When choosing which method to use, you may want to keep in mind these three facts:
1. with the GET method you are limited as to how much information can be passed, 256 characters;
2. the GET method publicly sends the input to the handling script (which means that, for example, a
password which is entered in a form becomes viewable by anyone eyesight of the Web browser, creating a
larger security risk);
3. a page generated by a form that used GET method can be book marked while one based upon POST
cannot be.
Both methods work equally well, but POST is generally preferred.
To Create Your PHP Script
You must write the register.php script to receive and process the data generated by the form.html page.
Here is where the true simplicity of PHP is demonstrated:

<html>
<head>
<title>Form Results</title>
</head>
<body>
<?php /* This page receives and handles the data generated by "form1.html". */
print "Your first name is $firstname.<br />\n";
print "Your last name is $lastname.<br />\n";
print "Your email is $email.<br />\n";
print "{$_POST['major']} is your major<br />\n";
print "Your gender is $gender.<br />\n";
print "These are your tech problems:<br />\n
$response<br>\n";
?></body>
</html>

By taking the value of the name="firstname" element in your html form and adding a dollar sign, you
create a variable that contains the value of what the user entered in that corresponding form field. This is
true whether html input type is TEXT, TEXTAREA, or a SELECT menu and is one of the reasons why
PHP is so great for handling html forms (compared to say CGI scripts which require parsing code).