HTML Form Elements

<form>
form elements
</form>

HTML forms have different types of form elements like text fields, check-boxes, radio buttons, submit buttons etc.

element

The element is a major element of the form element of html.
The element is displayed in many ways based on different types of attributes.

Text Input

This defines a one-line text input field.

Example:

<form>
first name<br>
<input type = "text" name = "firstname"><br>
last name <br>
<input type = "text" name = "lastname"><br>
</form>

Radio Button Input

This defines the radio button.
The radio button allows the user to select one of the various options.

Example:

<form>
<input type = "radio" name = "gender" value = "male" checked>Male<br>
<input type = "radio" name = "gender" value = "female">Female<br>
<input type = "radio" name = "gender" value = "other" >Other<br>
</form>

The above HTML code will be displayed in the browser as follows.

submit button

This defines a button for the form data to be submitted to the form-handler.

A form-handler is usually a server page that contains a script to process the input data.

Example-

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>

The above HTML code will be displayed in the browser as follows.

Action Attribute

The Action Attribute defines the process to be performed while submitting the form.

Normally, when the user clicks on the submit button the form is sent to a web page available on the data server.

In the example above, the form data is sent to a page called “action_page.php” on the server. This page contains a server-side script that handles the form’s data:

Example-

<form action="action_page.php">

Method Attribute

Method Attribute Specifies the HTTP method (GET or POST) to be used when submitting form data.

<form action="action_page.php" method = "get">

Or

<form action="action_page.php" method = "post">

When to use GET?

Always use POST when the form data contains sensitive or personal information. The POST method does not display the form data submitted in the page address field.

POST has no size limit, and can be used to send large amounts of data.

Name Attribute

Each input field must have a name attribute to submit.
If the name attribute is omitted, the data for that input field will not be sent at all.
In the example below, only the “last name” input field will be submitted:

Example:-

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Grouping Form Data with

The

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</fieldset>
</form>