HTML Forms

HTML forms are used to collect some data from the site visitors . when a user registration form is required to fill, a form will take from the site visitor and then will post to a back-end applications. The back-end applications will perform the required processing on the passed data according to the defined logic of the business.
<form> .</form> tag is used to create HTML form. The basic sytax is :-
<form action=script url method =GET or POST>
Form controls are displayed here.
</form>

Form Attributes


  • Action :- It Backend script to process passed data.
  • Method :- it is used to upload the data. Most important methods are GET ,POST.
  • Target :- It Specify the target window where the result of the script will be displayed. It uses the values like _blank, _self, _parent etc.

HTML Form Controls


HTML Form use following controls to collect the data


  • Text Input Control

    • There are three types of text input used on forms:
    • Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

    • Example :
      First name:
      Last name:
    • Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.

    • User ID :
      Password:
    • Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

    • Description :

  • Checkboxes controls

  • Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.


    Checkboxes will be look like following :


    Maths Physics
  • Radion Button Controls

  • Radio button is used when out of many options only one option is need to be selected. They are also created using HTML tag but type attribute is set to radio.


    It Will Produce the following result :
    Maths Physics

  • Select Box Controls

  • A select box which is called drop down box .It provides option to list down various options in the form of drop down list. In this list user can select one or more options.


    It will give the following output :

  • File Select Boxes

  • File Upload select box is used to upload a file to your web site. This is also created using the <input> element but type attribute is set to file.


    It will give the following output :

    Hidden form control is used to hide data to display in the page. Hidden data of the page is used to push on to the server .


    Example :

    This is page 10


  • Clickable Buttons

  • There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button.


    Output will be :


Example

Try It Yourself