An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing.
Why use HTML Form
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.
GET INSTANT HELP FROM EXPERTS!
- Looking for any kind of help on your academic work (essay, assignment, project)?
- Want us to review, proofread or tidy up your work?
- Want a helping hand so that you can focus on the more important tasks?
Hire us as project guide/assistant. Contact us for more information
HTML Form Syntax
<form action=”server url” method=”get|post”>
//input controls e.g. textfield, textarea, radiobutton, button
</form>
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type – Description
<input type=”text”> – Defines a one-line text input field
<input type=”radio”> – Defines a radio button (for selecting one of many choices)
<input type=”submit”> – Defines a submit button (for submitting the form)
Text Input
<input type=”text”> defines a one-line input field for text input:
Example
<form>: First name:
<input type=”text” name=”firstname”>
Last name:
<input type=”text” name=”lastname”>
</form>
Radio Button Input
<input type=”radio”> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<form>
<input type=”radio” name=”gender” value=”male” checked> Male
<input type=”radio” name=”gender” value=”female”> Female
<input type=”radio” name=”gender” value=”other”> Other
</form>
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called “/action_page.php”. This page contains a server-side script that handles the form data:
<form action=”/action_page.php”>
If the action attribute is omitted, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:
<form action=”/action_page.php” method=”get”>
or:
<form action=”/action_page.php” method=”post”>
When to Use GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too.
When to Use POST?
Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.
GET INSTANT HELP FROM EXPERTS!
- Looking for any kind of help on your academic work (essay, assignment, project)?
- Want us to review, proofread or tidy up your work?
- Want a helping hand so that you can focus on the more important tasks?
Hire us as project guide/assistant. Contact us for more information
POST has no size limitations, and can be used to send large amounts of data.
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the “Last name” input field:
Example
<form action=”/action_page.php”>
First name:
<input type=”text” value=”Mickey”>
Last name:
<input type=”text” name=”lastname” value=”Mouse”>
<input type=”submit” value=”Submit”>
</form>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
Leave a Reply
You must be logged in to post a comment.