How to create a web form in html

Sometimes, however, you want a Weblog to gather information from users instead of giving static information to them.

One of the most useful pages of any website is the HTML simple contact form HTML page. that website should be without a contact or feedback form.

What is WebForm?

HTML Webform markup tags give you a healthy collection of elements and attributes for creating web forms to collect information from visitors to your site.

HTML Web 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 fields, a special control is used to pass the entered data on to a 

a program that can do something useful with the data.

Such programs are typically referred to as Webform handlers because they “handle” the data.

How to create a web form in HTML

You can insert a form into your document by placing form fields within <form> tags.

All of the input elements associated with a single form are contained within a <form> tag.

Syntax:

<form method=“get|post” action=“process.php”></form>

The action attribute defines 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 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 (HTTP) header.

Difference Between “Get” And “Post”

Fundamental Difference is probably the Visibility -

*GET request is sent via the URL string (appended to the URL 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. Length -

*, 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  in webforms

*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 HTML texts as well as binary data.

Caching/Bookmarking -

*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.

WEB FORM Default 

*GET is the default method of the HTML FORM element.

* To submit a FORM using the POST method, we need to specify the method attribute and give it the value "POST".

Form Re-submission-

*If Get method is used and if the page is refreshed it wouldn’t prompt before the request is resubmitted.

*If Post method, would prompt request before the request is resubmitted if the 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:

  page_action.php?firstname=Noor&lastname=Ali 

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 to the page address.

The Webform fields

<Form> fields are:

different types of input, text area, and select.

The input element is a way to take input from a user, creating a different form of control depending on the value of its type attribute. The other two, text area and Select, create the form 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, text area, 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 Types

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

#someone’s name,

#email address,

#credit card number.

the 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.

the max length allows you to specify the maximum number of characters a user can enter into the textbox.

Example:

<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

yes/no, set/unset, on/off option.

 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 

name instead.

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

There are other ways of submitting form data (namely with a bit of JavaScript), but the most 

the 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 a 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.

They are used to invoke client-side scripts (namely JavaScript)

  <input type = ”button” value = ”Start again” />

<textarea>

The text area element is straightforward, having just one simple statement. 

It works something like a big text-type input element but is used for bigger chunks of textual 

data, usually with multiple lines.

 For Example:

*An address,

*A comment on a feedback form.

Unlike the input element, the text area 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
</textarea>

<select>

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>The Outsider</option>
<option>Things Fall Apart</option>
<option>Animal Farm</option>
</select>

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:

$_GET

$_POST

$_REQUEST

There are various reasons to be cautious about using the $_REQUEST[], like what happens

when we have a GET field and POST field with the same name.

Data returned from the client using the POST method are stored in the $_POST[] Variable by 

PHP.

Data returned from the client using the GET method, or as a query string in the URL, are stored in the $_GET[].

So guys, if you like this kindly share with your friends