HTML Forms

In general, the form is a method to collect information from the people.

In terms of HTML, the form is used to collect user input.

<form> element

HTML <form> element is used to define a form.

Example:

<form>
.
.
Here come the form elements
.
.
<form>

Each HTML form contains form elements, which specify different types of input elements. You can use text fields, check boxes, submit button, clickable buttons, radio buttons, and many more, depending on the kind of form you want to incorporate into your HTML page.

<input>element

It is the most important element of the <input> element.

This element can be displayed in different ways, based on the <type> attribute used to input the data.

Example:

<input type="text" >
It is used to define a one-line text field.

<input type="radio" >
It is used to define a radio button, where you can select only one from multiple options.

<input type="submit" >
It is used to define a submit button, where clicking this button signifies the data input or we can say submission of data.

Now, we will get some detailed examples of these three <type> attribute.

Text Input

<input type="text" >

Example:

<!DOCTYPE html>
<html>
<body>

<form>
Name of a Fruit:<br>
<input type="text" name="fruitname" >
<br>


Name of a Vegetable:<br>
<input type="text" name="vegetablename">
<br>

</form>

</body>
</html>

The default width of the text input field is 20 characters only.

Radio Button Input

<input type="radio">

It lets the user to select one from the number of choices.

Example:

<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="fruitname" value="mango" checked> Mango <br>
<input type="radio" name="fruitname" value="orange" checked> Orange <br>
<input type="radio" name="fruitname" value="strawberry" checked> Strawberry <br>
<input type="radio" name="fruitname" value="pineapple" checked> Pineapple <br>
<input type="radio" name="fruitname" value="watermelon" checked> Watermelon
</form>
</body>
</html>

Submit or Click Button Input

<input type="radio" >

It defines a button used for submitting the form data to a form-handler, where it is specified in the form’s ‘action’ attribute.
Basically, form-handler is a server page which includes a script for processing input data.

Example:

<!DOCTYPE html>
<html>
<body>
<form action="/input_page.php" >
Name of a Fruit:<br>
<input type="text" name="fruitname" value="Mango">
<br>
Name of a Vegetable:<br>
<input type="text" name="vegetablename" value="Cabbage">
<br>
<br>

<input type="submit" value="submit">
</form>
</body>
</html>

When you click on Submit button, the input data of a form will be sent to a page, named as- ”/input_page.php”.

Action Attribute

This attribute of form defines the action to be executed when input data of a form is submitted.

When a user clicks on the submit button, the form data is sent to a page stored on the server.

Here, in the above example, it is sent to a page, ”/input_page.php” and it holds a server-side script which is responsible to manage the form data.

Such as:

<form action="/input_page.php">

If you do not use action attribute, the action is set to the current page.

Target Attribute

This attribute specified whether the result of form data is to be displayed on a new tab, current window or in a frame.

Example:

<form action="/input_page.php" target="_blank" >

Target attribute can have the following values (only one at a time):

_blank
A link will open in a new window or tab.

_self
A link will open in the same window or tab.

_parent
A link will open in a parent frame. This value is only applicable when you use frames in your HTML document.

_top
A link will open in the full body of the window by canceling out any frames.

framename
A link will open in a targeted frame, where you have to mention the name of a specific frame.

Name Attribute

This attribute is mandatory to specify with each input field. If you will not define the framename attribute, the data of that particular input field will not be sent anywhere.

Example:

<!DOCTYPE html>
<html>
<body>
<form action="/input_page.php">
Name of a Fruit:<br>
<input type="text" name="fruitname" value="Mango">
<br>
Name of a Vegetable:<br>
<input type="text" value="Cabbage" >
<br>
<br>

<input type="submit" value="submit">
</form>
</body>
</html>

Here, only the data of input field “Name of a Fruit:” will be submitted.