The <form> Element
HTML forms are used for collecting user inputs.
The <form> element is used to define an HTML form:
<form>
.
form elements
.
</form>
HTML forms consists of form elements.
Form elements are considered to be different types of input elements, radio buttons, checkboxes, submit buttons, etc.
The <input> Element
The <input> element can be considered the most important form element.
The <input> element consists of many variations, depending upon the type attribute.
Some of the types used are given in this chapter:
| Type | Description |
|---|---|
| text | Defines normal text input |
| radio | Defines radio button input (for selecting one of many choices) |
| submit | Defines a submit button (for submitting the form) |
You will be learning a lot about input types in this forthcoming tutorials.
Text Input
<input type="text"> is defined as a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself
This is how it will look like in a browser:
First name:
Last name:
Note: The form's visibility is not present. Also you can note that the text field's default width is 20 characters.
Radio Button Input
<input type="radio"> is used to define a radio button.
Radio buttons is used to allow a user to select ONE among the limited number of choices:
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
</form>
Try it Yourself
This is the manner in which the HTML code above will be getting displayed in a browser:
Male
Female
Other
The Submit Button
<input type="submit"> is used to define a button for submitting a form to a form-handler.
The form-handler is known to be a server page having a script which is used for processing input data.
The form-handler is mentioned in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself
This is the manner in which the HTML code will be displayed in a browser:
The Action Attribute
The action attribute is used to define the action that needs to be performed during the form submission.
The most common way for submitting a form to a server, is done by usage of a submit button.
Usually, the form will be submitted to a web page which is present on a web server.
In the example given above, a server-side script is used for handling the submitted form:
Example
<form action="action_page.php">
In case the action attribute gets omitted, the action will be set to the current page.
The Method Attribute
The method attribute is used to specify the HTTP method (GET or POST) that is used during the submission of the forms:
<form action="action_page.php" method="get">
or:
<form action="action_page.php" method="post">
When to Use GET?
You can be using GET (the default method):
If the form submission is known to be passive (like a search engine query), and not having any sensitive information.
When you are using GET, the form data will become visible in the page address:
Example
action_page.php?firstname=Mickey&lastname=Mouse
GET is very suitable for short amounts of data. Size limitations are given or set in your browser.
When to Use POST?
You should use POST:
when the form is updating any data, or tends to include any sensitive information (password).
POST is known to offer better security as the submitted data is not getting visible in the page address.
The Name Attribute
Needs to be submitted correctly, a name attribute should be given to input field must have .
The example given below will only be submitting the "Last name" input field:
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>
Try it Yourself
Grouping Form Data with <fieldset>
The <fieldset> element is used for grouping related data in a form.
The <legend> element is used to define a caption for the <fieldset> element.
Example
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Try it Yourself
This is the manner in which the HTML code above will be get displayed in a browser:
HTML Form Attributes
An HTML <form> element, consisting of all possible attributes set, will look similar to this:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
form elements
.
</form>
Here is the list of <form> attributes:
| Attribute | Description |
|---|---|
| accept-charset | Specifies the charset used in the submitted form (default: the page charset). |
| action | Specifies an address (url) where to submit the form (default: the submitting page). |
| autocomplete | Specifies if the browser should autocomplete the form (default: on). |
| enctype | Specifies the encoding of the submitted data (default: is url-encoded). |
| method | Specifies the HTTP method used when submitting the form (default: GET). |
| name | Specifies a name used to identify the form (for DOM usage: document.forms.name). |
| novalidate | Specifies that the browser should not validate the form. |
| target | Specifies the target of the address in the action attribute (default: _self). |
You will be learning more about attributes in the following chapters.