HTML FORMS

                                                                     HTML FORMS

Form: It provides an easy way to collect required information from web page visitors. Web page forms have three important parts: atag, form input elements, and a submit button

An Input control is a type of input mechanism on a form. A form may contain several different types of input controls. • Text Input Controls (Text Box, Password Box) • Data Input Controls (Check Box, Radio Button, List Box, Combobox) • Button Controls (Submit Button)

HTML forms are set of different form elements that allow to interact with the user by your HTML web page and collect the data and information from user.

HTML Form fields

HTML supports certain fields to collect different information from user. These fields are as following:

1.     Textbox : It is used to user allow to enter a single line text field in HTML forms. Textfield is mostly used to collect Names or any single value in forms.

2.     TextArea: It is used to collect multi-line text entries in HTML forms. This field is used to accept the address field in a form.

3.     Password: It is similar to the textbox field but the characters are displayed in a special symbolic form when the user enters them. As its name, it is used to collect a password from the user.

4.     Radio Buttons: These fields are used to accept a single value from given multiple choices or options. It looks like a circle with a dot when selected. For example, select gender, stream like science, commerce, and humanities, etc.

5.     Checkbox: It is used to select multiple choices from a given set of values. It is coming in a square box with a tick mark in front of it when selected. For example hobbies, subjects etc.

6.     Combobox: It also provides a list but with a drop-down list. It means when users click on the small arrow coming to next to the dropdown it will expand to downwards and display the list.

7.     Button: Buttons are used to submit or save the data as well as clear the enterd data into form.

These fields are categorized into the following categories:

1.     Input : Textbox, Password, TextArea

2.     Select: Radio Button, Checkbox, List and Combobox

3.     Call to Action: Submit button or Reset Button

Inserting fields into HTML form

Textbox

To insert textbox in HTML form follow this syntax:

<input type=”text” size=”n” maxlength=”n”>

Example:

<input type=”text” size=40 maxlength=″10″ value=”Enter text”>

The input tag is used to insert a textbox in HTML form. It has following attrinutes:

1.     type: It must text when you want to insert textbox.

2.     size: It specifies the width of the textbox. It must be a numeric value.

3.     maxlength: It is used to specify the maximum number of characters allowed on a textbox.

4.     value: It is used to provide the default text inside textbox.

Output

TextArea

To insert a textarea, <textarea> is used with below given syntax:

<textarea rows=”n” cols=”n”></textarea>

Example:

<textarea rows=7 cols=40 ></textarea>

The textarea tag has two primary attributes:

1.     rows: Specifies number of lines in the textarea field by default.

2.     cols: Allow number of characters allowed in a single line.

Output

Password

Password field allows to accept password from keyboard. the syntax is as following:

<input type=”password”>

Example:

<input type=”password”>

The password field can accept similar attributes as textbox.

Output

Radio Button

Radio button allows to insert a circle button to select only one choice from given set of values. The syntax is as following:

<input type=”radio” name=”text” value=”text” checked>Text_2_display

Example:

<input type=”radio” name=”gen” value=”Male” checked>Male
<input type=”radio” name=”gen” value=”Female”>Female

Radio button accepts following attributes:

1.     name: When you want to allow to select a single value, you have give same name to all radio buttons in the form.

2.     value: It saves the text written as value into the database when submit button is clicked.

3.     checked: If you want to display the checkbox should be selected automatically when your HTML page loads in the browser, you can use this attribute.

Output:

 

Checkbox

As we have already discussed that checkbox allows to select multiple values from given choices. The syntax is almost similar like radio button. So let us take an example:

<input type=”checkbox” name=”gen” value=”Plying Cricket” checked>Plying Cricket
<input type=”checkbox” name=”gen” value=”Reading Books”>Reading Books

Output

Combobox

To create combobox you need to combine two tags in HTML form.

1.     Select : To create a list

2.     Option: To create item list to fill in combobox.

Example:

<select>

<option> January

<option> February

<option> March

</select>

Output

Button

There are three types of buttons:

1.     Submit: It allows to save data.

2.     Reset: It allows to clear the form.

3.     Button: It is mostly used to run the developer’s code.

The syntax is as following:

<input type=”button” value=”text”>

Example:

<input type=”submit” value=”Save”>

<input type=”reset” value=”reset”>

Output

Creating a form in HTML

A form tag is used to create a form in HTML. The syntax for form tag is as following:

<form action=”file” method=”method”>….</form>

The form tag has following attributes:

1.     Action: This accept the file name or page should be redirected after click on the button.

2.     Method: This specifies how the data will be saved either get or post after click. The value get means getting data and post means sending data through the form into server.

Example:

<body>  

  <form>  

     Enter your name  <br>  

    <input type="text" name="username">  

  </form>  

</body>