HTML Forms

An HTML form is a web page that contains form elements. A basic form has three important parts : the <form> tag, which include the URL of the script needed to process the form elements, which are similar to the text fields; and the submit button, which send the data on the server.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

The HTML <form> element defines a form that is used to collect user input

The Form Elements

The <form> is a block-level element thats defines an interactive part of a webpage. All form controls like <input>, <textarea> or <button> must appear within a <form> element.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

<form action = "script url">
      form elements input, textarea, button etc
</form>

The <input> Element

The <input> element can be displayed in several ways, depending on the type attribute

Text Input Example

F. Name :

L. Name : 

Email : 

Sex :
 Male
 Female
 Other

Radio Button Input Example

<form>
   <input type="radio" name="Branch" value="Information Technology" checked />
   <input type="radio" name="Branch" value="Computer Science" />       
</form>

This is how it will look like in a browser

What is Web Server

If you don’t know what is web server then don’t worry, the web server is just a computer which have storage drive and it is always connected threw internet

Processing HTML Form Information

Now we have to understand that how this information is processed from html page to web server, for common understanding we can assume there are 3 things i.e. HTML Form, backed code, web server.

• Step 1 : Filling of all required information in web form and pressing submit button.
• Step 2 : After press submit button, work of backend code is started, backend code can be .net, php or other script. The backend code collects all information from HTML Elements and sends them to server.
• Step 3 : Now server receives whole information and stores in his storage drive for further use.

Note : Don’t warry about what is backend code and how to store data in server, we will learn all these latter, here we have to learn how to design a HTML Form, what are the elements of HTML Forms, so let’s start to design HTML Forms.

HTML Forms Attributes

There are 3 most important attribute of html form, which are listed below:

• Action
• Method
• Target

The Action Attribute

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

<form action = "backend_code path/script_path here"> </form>

The Method Attribute

When we click submit button in HTML Forms then this method attribute value defines that which HTTP rules will be followed in transferring data from html page to web server. There are two value of method attribute which defines different rules for data transferring between web page and web server.

The values are listed below:

1. get
2. post

1. Use GET Method

The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field

• Never use GET to send sensitive data
• Useful for form submissions where a user want to bookmark the result
• GET is better for non-secure data, like query strings in Google
• The length of a URL is limited

<form action = "/abc_page.php" method="get" ></form>

/abc_page.php?f_name=mau&l_name=tod

Problem with GET value

• In this method submitted data is visible in URL, anyone can see.
• Data send in name and value pairs, a web browser URL can have maximum 3000 characters, if submitted form data is larger than max size of URL limit then it will cause some problem.
• We can use it where is no security concern and data size is limited.

2. Use POST Method

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

The Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

• _self
• _blank
• _top
• _parent

The default value is "_self" which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value "_blank"

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

HTML Form Controls

• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

The list of form attributes -

Importance of Name/Value Pair in HTML Form

In HTML Forms Elements like textbox, radio button, dropdown list the name/value pair is very important. This is common problem with beginners they often forget to manage name/value pair, If there is no Name attribute in HTML forms element then the HTML Form will not send the value of that element to the web server so always try to manage name/value pair in HTML Form elements.

<form>
    F_Name :
    <input type="text" name="f_name"  value="sam" />
    L_Name : 
    <input type="text" name="l_name"  value="tod" />       
</form>