Form Controls of HTML

HTML stands for markup language for web page creations. Its define the web pages structure and behaviors. HTML is consist of tags and elements that helps in structuring the web page. This elements can be grouped together insides a form to collects data from a Users in a User-friendly manners. However, notes that an HTML are a stateless protocols that mean its could not store anythings and you will be lose the data on a pages refresh.

HTML Form Control

These are various type of form controls that is define in the HTML.

1)Input Text Control

Input text control is use to collects User data as a free texts. On the web pages, it will be form a rectangle boxs where User can be to inputs the data.

These are different type of input texts control that can be to use in the HTML form. Let have a looks at the different type of input text control.

  • Single line Input Text ControlThese are allow the user to enters only a single lines of data. A typically example of such input texts control are for entering the names, search boxes, city, etc. 
  • Multi-line Input Text ControlThese are input control type allow the users to enter data of multiple line. Typically usage of such inputs control are for comment, address, descriptions and so on. 
  • Password Input ControlAs the name of suggest its typically used for the password fields. These is work in the same way as the input texts field but the text gets masked for safety purposes. 

2)Input Type Submit

When input types are of submitting its perform the action to define in the form actions and sends the form data to the servers.

Here the username and password value will be to submitted to the servers on the button click events of Submit buttons. The actions in the form are the servers method that accept the inputs.

3)Input Type Radio

Radio button is uses when you expects User to fills data as a Boolean values or you expects only one input as true out of multiples option. Some common uses case of radio buttons are gender determination, employee types (Regular / Temporary) and so on.>

4)Input Type Checkbox

A checkbox let the User selects whatever information are true in his cases. Its a very convenient ways of accepting the data when the possibles input are already known.

For examples, if you do want to collects the types of insurance an individual hold you can be easily so with the checkboxes as the option would be limit.>

5)Input Type Drop-down list

The drop-down list enable the user to selects one options out of multiple possible option. These are a very User-friendly way to gets the details from the User as it provide an exhaustive lists of possible option that help the user to identify the options best suit him.

For examples, drop-down to lists down the city in which an employees can be belong to.

6)Input Type Optgroup

Optgroup are working in a similars ways as of the drop-downs lists, the only differences are that the optgroups let you to logically groups certain options under one umbrellas. Its helps the user to quickly identify the relevants options with the help of the optgroup labels.

For examples, drop-down list to lists down the city of the different states in India’s grouped by states.

7)Fieldset

Fieldsets are another useful tags in the Html form which lets the developer to logically groups certain control under one legend, this help the developers to give User a clear instructions on what to expects in this sections.

8)HTML output Tag

These output tags are introduced in HTML5. It lets you display the outputs of a calculation instantly. These are quite useful when the user need to do ay calculations instantly and see the result. A typical examples of such cases are when the user want to check the sum of all the item presents in the carts.

In the examples above, we have define the items price range like 0 to 100 and can be change on runtime, the other text box which have a values 12 in its the tax levied on that items, it can also be change on runtime. The outputs of result 58 are the sum of both the value.

9)Input type Color

Its often required in the form to just shows the color instead of any texts. Input type colors in HTML 5 will be let you do that. Its show the colors which you wants to display in the forms. Typical scenario’s where its being used are to shows the status of a projects or a phases.

10)Input type Date

Input type date are commonly used where a date type fields as input are expected by the Users, it could be anything likes a Date of Birth, Hiring date, termination date and so on. Its introduced in HTML 5 and the date format varies a little with the changes of browser.

Leave a Reply

Your email address will not be published. Required fields are marked *