The HTML form is a part of the document that contains controls such as input fields, password fields, checkboxes, radio buttons, menus, etc. The HTML form gives the facility to enter data that is to be sent to the server for processing such as name, email, address, password, etc.
The <form> Element:
The HTML form element provides a section to take input from the user.
The form element provided different types of controls for submitting information to a web server.
The <input> Element:
The input element is used to create form fields, to take input from the user. We can use different input fields to collect information from the users.
The input element can be displayed in different ways, depending on the type attribute.
Note: You will learn more about input types later in this tutorial.
Text Input:
The type=”text” attribute creates a single-line input field for text input.
Note: The default width of a text field is 20 characters.
Radio Button Input:
The <input type=”radio”> specifies a radio button.
The radio button is used to choose one option from multiple options.
If you use a radio button for multiple options, you can only select a single option at a time.
The Submit Button:
The <input type=”submit”>specifies a submit button to submit the form data to form handler.
The form is get submitted when the user clicks on the submit button.
The Action Attribute:
The action attribute of the <form> tag specifies where the form data is to be sent to the server after submission of the form. It is used in the <form> element.
In the example above, the form data is sent to a page on the server called “/sample_page.php”.
If the action of the form is omitted then the action is set to the current page.
The Target Attribute:
The target attribute is used to specify whether the submitted result will open in the current window, a new tab or on a new frame.
The default value of the target attribute is “_self” which means the form will be submitted is the current window.
Values of Target Attribute:
- _blank: It will open the link in a new window
- _self: It will open the linked document in the same frame
- _parent: It will open the linked document in the parent frameset
- _top: It will open the linked document in the full body of the window
- framename: It will open the linked document in the named frame
The Method Attribute:
The method attribute defines the HTTP method used to submit the form.
The values of the method attribute are:
get: In the get method, the submitted data will be visible after the submission of the form.
It is the default value while submitting the form, but it is not secure as it displays the data after submission.
post: The post value of the method attribute is used when we want to process the sensitive data as it does not display the submitted data in the URL.
The Name Attribute:
The name attribute specifies the name of the form element, which is used to reference the form data after submitting the form.
You can not omit the name attribute because if you omit the name attribute the data of that input field will not be sent.
Grouping Form Data using <fieldset>:
The <fieldset> element is used to group logically related fields in an HTML form.
The <legend> element is used to define a caption for the <fieldset> element.
You can use the <fieldset> element and <legend> element to make your forms much easier to understand for users.