Forms in HTML

Form incorporated in the web page allows a user to submit feedback, questions and concern to get a more detailed response, to collect personal information such as name, email address, credit card details to order a product or provide an interface for a chart session.

Form is a collection of fields of information on the page. The various fields of information in the form may contain text box, radio buttons, dropdown menu, checkbox, password box and other elements. These elements are called Form Control.

Form field: Form field is the data entry field on the page. A user supplies information into a field either by typing text or by selecting a value from a list of predefined values.

The simple HTML codes contain two elements: the form element and an input element nested within the form element.

The form element sets up an area of the webpage for a form.

The input element creates a button, input textbox, checkbox,  etc. in the form area.                                                                                                                               

Creating Forms 

Every form uses a form element, which begins with the <form> tag and ends with the </form> tag. It also includes some special elements for each control such as input element, select element, and textarea element.

To set up a form you need to specify the two important attributes: Action and Method. 

Action

It normally specifies the file/ page that the form is submitted to. The values could either be a URL to the script or an email address, defined with mailto: function, that should receive the form information.

 Method

It specifies that the form information should be posted to the URL, given in the action attribute. Possible values are “GET” and “POST”. 

Ex- <form action= “mailto:email id” method= “Post”> </form>

GET  is the default value. It is used whenever you wish to email the form content.

POST  is used whenever you want to pass the information to the URL specified in the action attribute.

Input Elements

Input elements are form elements that can accept input from the user.  The following are some input elements that can be used to form. These are also called form control.

1.Text box

2. Checkbox

3. Radio button

4. Password box

Other elements in forms-

1. Buttons

2. Drop Down List (Pull down menus)

3. Textarea (Multiple line text input)

<Input> tag and its Attributes

<input> tag is used to create the form elements.the attributes which can be associated with this tag are-

Type: This attribute specifies what type of form-control will be added to the form. Text is the default type for an input element. It defines only one line of text.

Name: Every control in the form must have a name to identify it. It appears as the label in the form and should be unique.

Value: It specifies the initial value for the field.

Size: It specifies the width of the input field.

 Maxlength: It specifies the maximum number of characters for the input field. 

Adding a Textbox 

A textbox allows a user to enter data such as a character and the numbers. This input element creates a single line text box. In order to add textbox, you need to do the following: 

<input type= “text”>

Ex-

Here:

<form>- Specifies the beginning of the form.

 <input type= “text”- The value text indicates that the text input field is the interface element.

 name= “first name”- First name is the name of the input field or text box.

 size= 30- Specifies the width of the text field. By default the size of the text input field is 20.

 Max length= 30- Specifies the maximum number of characters that the user can enter into the input field.

value= “”- Specifies any default text in the input field. In the above case, since we have not specified anything within the quotes so the input field will appear blank.

Adding a Checkbox 

Checkbox is like a toggle switch where the user can select or deselect one or more than one item. As with other form controls, you have to type your label next to the checkbox. 

<input type= “checkbox” name= “Hobbies” value= “reading” checked>

Ex-

Here:

type= “checkbox”- Indicate that checkbox is the interface element.

name=”C1”-specifies the name of the checkbox by which it will be identified.

value=”Graduate” specifies the value that will be assigned to the checkbox when it is in the checked state.

checked it causes the checkbox to be on checked when the form is first created.

Adding a Radio button 

Radio buttons are used when the user has to make a selection of only one among the several possible options. 

Ex-

Here:

type= “radio” indicates that radio button is the interface element.

 name= “gender” specifies the name of the radio group.

 value= “male” and value= “female”- based upon which radio button will be selected, the particular value will be assigned to the radio group “gender”.

 checked- the radio button with this attribute will be selected by default.

Adding a Password Field

A password form control is similar to a text field, except that whatever the user enters into this field does not get displayed instead, dots and asterisks are shown on screen so that no one can see the typed information.

Ex-

Here:

type= “password” indicates that password in the interface element.

name= “password”- this is the name of the password field.

size= “20”- this specifies the width of the password field.

Adding a Drop Down List

Dropdownlist displays a list of options from which the user can select an item. The select tag is used to define the selection list in the form. It should be defined within the form tag. The <option> tag is attached to the <select> tag to display a list of options. You can make use of selected attributes with the <option> tag to indicate that the option is preselected. It is a container tag and ends with the select tag. 

Ex-

Adding buttons

Once all the details in the former entered, the data has to be stored somewhere so that it can be reused and the form is also cleared for another set of information to be entered. The commonly used predefined buttons are Submit and Reset. 

Submit Button

On clicking this button, the data in all the fields will be sent to the server as a series of name and value pairs. The ‘name’ being the name of the form element and the ‘value’ is whatever the user has entered. The data is sent to the page specified in the action attribute of the form tag.

 Reset Button

 The reset button is used to clear the contents and set default values of all the form elements to the original state and make them active.

Ex-

 Adding Multiple Line Text Field

 In certain cases, it might be necessary to accept several lines of text from the user, in such a case you need to use the <text area> tag. It must include the name attribute, and you must specify a number of rows and columns with the rows and cols attributes. Finish this control with <textarea> closing tag. 

<textarea rows= “10” cols= “60” name= “Questions”>

Here:

Rows: Defines the height of the text area.

Cols: Defines the width of the text area.

The rows and columns just determine the size of the textarea control. A user can type text as wide as the area is defined on the screen.