Web Forms in HTML , web designing
Most of the HTML you write helps you display content and information for your users.
Sometimes, however, you want a Web page to gather information from users
instead of giving static information to them.
One of the most useful page of any website is the html contact form page. No website should be
without a contact or feedback form.
HTML form markup tags give you a healthy collection of elements and attributes for creating forms
to collect information from visitors to your site.
HTML forms simply place a handful of GUI controls on the user agent to allow the user to enter data.
After the data is entered into the ﬁelds, a special control is used to pass the entered data on to a
program that can do something useful with the data.
Such programs are typically referred to as form handlers because they “handle” the form data.
You can insert a form into your document by placing form ﬁelds within <form> tags.
All of the input elements associated with a single form are contained within a <form> tag.
<form method=“get|post” action=“process.php”>
The action attribute deﬁnes a URL where the data from the form should be sent to be “handled.”
The second attribute, method, controls how the data is sent to the handler. The two valid values are
get and post.
Get sends the form’s data to the form handler on the URL.
Post sends the form’s data in the Hypertext Transfer Protocol
Difference Between “Get” And “Post”
Fundamental Difference is probably the Visibility -
*GET request is sent via the URL string (appended to the URI with a question-mark as
separator), which is visible.
*POST request is encapsulated in the body of the HTTP request and can't be seen.
*GET request goes via URL. Previously its length was approximately 255 characters long,
in the modern browsers its length is thousands of characters long
(this is browser dependent).
*No such maximum length limitation holds for the POST request for the obvious reason that
it becomes a part of the body of the HTTP request and there is no size limitation for the
body of an HTTP request/response.
Type of Data -
*GET request is sent via URL string and as we all know that URL can be text-only, so
GET can carry only text data
*POST has no such restriction and it can carry both text as well as binary data.
*Again for the obvious reason that a GET request is nothing but an URL hence it can be
cached as well as Bookmarked.
*No such luxuries with a POST request.
FORM Default -
*GET is the default method of the HTML FORM element.
* To submit a FORM using POST method, we need to specify the method attribute and give it the value "POST".
*If Get method is used and if the page is refreshed it wouldn’t prompt before the request is
*If Post method, would prompt request before the request is resubmitted if page is refreshed.
When to Use GET?
You can use GET (the default method):
* if the “form submission data” is without sensitive information.
* If someone is requesting data from your application.
* When you use GET, the form data will be visible in the page address like:
When to Use POST?
You should use POST:
•If the form is updating data, or includes sensitive information ( like password etc ).
•If someone is pushing (inserting or updating ; or deleting) data to your application.
• POST offers better security because the submitted data is not visible in the page address.
<Form> ﬁelds are:
different types of input, textarea and select.
The input element is a way to take input from user, creating a different form control depending
on the value of its type attribute. The other two, textarea and
Select, create just one control type each. but there are a few characteristics common to all
these three .
The Name Attribute:
If all the inputted data in a form was sent without anything to identify each piece of data, a
form-processing script wouldn’t know what piece of data is what.
The name attribute supplies this necessary identifier (such as <input name=”book” />)
and, in fact, the data in any input, textarea, or select form field won’t be sent at all if there isn’t
a name attribute present.
The Type Attribute:
With just this single element “Input” you can create 10 different types of controls
“Type” Attribute Values
text — for single-line text
password — for secure text
checkbox — for a simple on or off ( eg. multiple choice )
radio — for selecting one from a number of options
submit — for initiating the sending of the form data
reset — for returning the form fields to their original values
button — Simple button to perform some scripting on some event
Input Type = “Text”
An input element with the attribute type=”text” is a single-line text box.
This is the most common form field, used for short pieces of textual information such as
#credit card number.
text is the default value for the type attribute (so you don’t need to explicitly use the type
attribute, if a textbox is what you’re after).
Other Attributes Of Text Filed are as follows:
value provides an initial value for the text input control that the user will see when the form loads.
size allows you to specify the width of the text-input control in terms of characters.
maxlength allows you to specify the maximum number of characters a user can enter into the text box.
<input type = “text” name = “any_name" maxlength = “3” size = “100” />
Input Type = “Password”
The password type works like the text type, apart from one characteristic:
As the user types, instead of the characters appearing in the text box, placeholder characters
(usually asterisks or circular bullets, depending on the browser) will appear in their place.
The idea behind this is that anyone peering over the user’s shoulder won’t be able to see what is being typed in.
<input type = "password" name = "pword" maxlength = 3 size = 100 />
Input Type = “checkbox”:
The checkbox type creates a simple checkbox, used to supply a
By default, a browser will style this as a small empty square box, which, when selected, will display a “tick” inside the box.
You can also specify that the initial state of a checkbox should be selected by adding the attribute and value combination checked=”checked”.
If a checkbox is not selected when the form data is submitted, no value will be sent.
When the checkbox is selected, “on” will be sent as the value for the corresponding
name unless the tag has a value attribute, in which case the value of that will be sent for the
<input type = ”checkbox” name = ”modern” checked = ”checked” />
Input Type = “radio”
Radio buttons, defined by the radio type, are similar to checkboxes, but the idea is that you can
only select one option in a group at a time. You give a group of radio input elements the same
name.When one of the radio buttons in that group is selected, any other radio buttons that were
selected will be turned off.
<input type = ”radio” name = ”color” value = ”red” checked = ”checked” />
<input type = ”radio” name = ”color” value = ”orange” />
<input type = ”radio” name = ”color” value = ”blue” />
You really need to use the value attributes here.
Input Type = “submit”
common and easiest way is by hitting a submit button.
The submit input type takes the form of a button and when this button is pressed, the form data
will be sent to the value of the action attribute in the opening form tag.
but value can be changed with the value attribute.
<input type = ”submit” value = ”Send” />
Input Type = “reset”:
The reset input type creates a reset button, which, when clicked (or otherwise .
selected), will reset the form, with form fields returning to the values that they had
when the page was first loaded.
Like submit, the text on the reset button (“Reset,” by default) can be changed with
the value attribute.
<input type = ”reset” value = ”Reset Form” />
With both submit and reset buttons, the name attribute isn’t particularly necessary.
Input Type = “button”:
Button input elements do absolutely nothing.
<input type = ”button” value = ”Start again” />
The textarea element is straight-forward, having just one simple state.
It works something like a big text-type input element, but is used for bigger chunks of textual
data, usually with multiple lines.
*A comment on a feedback form.
Unlike the input element, textarea has an opening and closing tag.
Any text in between the opening and closing tag makes up the initial value of the element.
<textarea name = ”whatever” rows = ”10” cols = ”20”>
Type something here
Select form fields present the user with a list (which is usually displayed as a drop-down menu),
from which one or more options can be selected.
Key to their operation, another element is needed—the option element, which defines each
option in the list.
<select name = ”book”>
<option selected = “selected” >The Trial</option>
<option>Things Fall Apart</option>
You can supply different values for each option element by using the value attribute inside the
opening option tag.
When the value attribute is present, its value will be sent instead of the option element’s content.
You can set one option element to be initially selected by using the selected attribute
( eg. selected = ”selected” ).
Beyond the variables you declare in your code, PHP has a collection of environment variables,
which are system defined variables that are accessible from anywhere inside the PHP code
There are three environment variables used for Form Processing:
There are various reasons to be cautious about using the $_REQUEST , like what happens
when we have a GET field and and POST field with the same name.
Data returned from the client using the POST method are stored in the $_POST Variable by
Data returned from the client using the GET method, or as a query string in the URL, are stored
in the $_GET.