Web Forms in HTML

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 fields, 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 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 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 (HTTP) header.


Web-forms-image


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 -

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

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.


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


The <form> fields

<Form> fields 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 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.

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.

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

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

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

<textarea>

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.

 For Example:

*An address,

*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
</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 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[].

COMMENTS

Name

Blogging,7,How to,11,Make Money,6,SEO,6,Tricks & Tips,4,Web Designing,10,Web Development,6,
ltr
item
Weblog Tricks - Learn Everything About Web : Web Forms in HTML
Web Forms in HTML
Web Forms in HTML , web forms builder web designing where you can get information from user with GET and Post methods,
https://2.bp.blogspot.com/-4FbUub57y6E/WEfGSHBi-tI/AAAAAAAAAI0/Z3SkkFw2q6IC21-zRPd5Gsap3CX7VvUpQCLcB/s640/Presentation1.jpg
https://2.bp.blogspot.com/-4FbUub57y6E/WEfGSHBi-tI/AAAAAAAAAI0/Z3SkkFw2q6IC21-zRPd5Gsap3CX7VvUpQCLcB/s72-c/Presentation1.jpg
Weblog Tricks - Learn Everything About Web
http://www.weblogtricks.com/2016/12/web-forms-in-html.html
http://www.weblogtricks.com/
http://www.weblogtricks.com/
http://www.weblogtricks.com/2016/12/web-forms-in-html.html
true
3158682668530211189
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy