HTML Form
A section of a document to control text fields, password fields, checkboxes, radio buttons, submit buttons, menus etc. is called and is created by the HTML form. The data thus entered in a form is sent to the server for further processing. Thus collecting some info from the site visitor is easy with the use of the HTML form.
Syntax:
<form action="server url" method="get|post"> //input controls e.g. textfield, textarea, radiobutton, button </form>
HTML Form Tags:
| TAG | USES |
| <form> | To make an HTML form. |
| <input> | To specify an input control. |
| <textarea> | To specify a multi-line input control. |
| <label> | To specify a label for an input element. |
| <fieldset> | To specify groups for the related element in a form. |
| <legend> | To specify a caption for a <fieldset> element. |
| <select> | To specify a drop-down list. |
| <optgroup> | To specify a group of related options in a drop-down list. |
| <option> | To specify an option in a drop-down list. |
| <button> | To specify a clickable button. |
| <datalist> | To specify a list of pre-defined options for input control. |
| <keygen> | To specify a key-pair generator field for forms. |
| <output> | To get the result of a calculation. |
HTML <form> element:
The HTML <form> element is used to specify an HTML form. It is a container which provides a document section to take input from the site visitors, along with the various interactive controls for submitting information to the web server.
Syntax:
<form> //Form elements </form>
HTML <input> element:
The HTML <input> element is used to specify an input control to create form fields and to take inputs from the user. It is a fundamental form element in HTML. Different input fields can be applied to gather different information from the site visitors.
Example:
<!DOCTYPE html> <html> <body> <h2>Text Input Example</h2> <form> Name:<br> <input type="text" name="name"> <br> City:<br> <input type="text" name="city"> </form> </body> </html>
Explanation:
In the above example, we created two one-line text input field.
HTML <textarea> tag:
The <textarea> tag in HTML is used to specify a multi-line input control. It allows the ser to insert multiple-line text in a form. The size of this tag can also be specified, and to serve this purpose we can either use “rows” or “cols” attribute or we can use CSS.
Example:
<!DOCTYPE html> <html> <body> <form> Message:<br><br> <textarea rows="5" cols="30"></textarea> </form> </body> </html>
Explanation:
In the above example, we created a five rows and 30 columns text area field.
HTML <label> Tag:
The HTML Label Tag is used to specify a label for an input element. To write a parser, browser-friendly and user-friendly., the use of HTML Label Tag is recommended in HTML forms.
Example:
<!DOCTYPE html> <html> <body> <form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"/> <br/> <label for="city">City:</label><br/> <input type="text" id="city" name="city"/> <br/> </form> </body> </html>
Explanation:
In the above example, we created two one-line text input field with labels for each.
HTML Password Field Control:
In a password field control, the password is not visible to the site visitors.
Example:
<!DOCTYPE html> <html> <body> <form> <label for="password">New Password:</label> <input type="password" id="password" name="password"/> <br/> </form> </body> </html>
Explanation:
In the above example, we created a password field in HTML.
Example:
<!DOCTYPE html> <html> <body> <form> <label for="email">Email ID:</label> <input type="email" id="email" name="email"/> <br/> </form> </body> </html>
HTML Email Field Control:
The email field in HTML validates the text for a correct email address. It checks for the @ and . in this field. It was introduced in HTML5.
Explanation:
In the above example, we created an Email field in HTML.
HTML Radio Button Control:
For a multiple-choice input, the HTML radio buttons are used. It only allows the selection of a single option at a time.
Example:
<!DOCTYPE html> <html> <body> <form> <label for="option">Option:</label> <input type="radio" id="option" name="option" value="yes"/>YES <input type="radio" id="option" name="option" value="no"/>NO <br/> </form> </body> </html>
Explanation:
In the above example, we created a Radio Button Control field in HTML.
HTML Checkbox Control:
To select multiple options at a time from given checkboxes, the HTML Checkbox control is used.
<!DOCTYPE html> <html> <body> <form> Flowers:<br> <input type="checkbox" id="rose" name="rose" value="rose"/> <label for="rose">Rose</label> <br> <input type="checkbox" id="lily" name="lily" value="lily"/> <label for="lily">Lily</label> <br> <input type="checkbox" id="orchid" name="orchid" value="orchid"/> <label for="orchid">Orchid</label> </form> </body> </html>
Explanation:
In the above example, we created a Checkbox Control field in HTML.
HTML Submit button control:
HTML Submit button control is used to add a submit button for submitting the form to the server.
Syntax:
<input type="submit" value="submit">
Example:
<!DOCTYPE html> <html> <body> <form> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br><br> <label for="city">City:</label><br> <input type="text" id="city" name="city"><br><br> <input type="submit" value="Finish"> </form> </body> </html>
Explanation:
In the above example, we created a Submit Button Control field in HTML.
HTML <fieldset> element:
To group the related information of a form, the HTML <fieldset> element is used with the <legend> element. The latter provides a caption for the grouped elements.
Example:
<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Student Info:</legend> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br><br> <label for="city">City:</label><br> <input type="text" id="city" name="city"><br><br> <input type="submit" value="Finish"> </fieldset> </form> </body> </html>
Explanation:
In the above example, we grouped the related information of a form HTML using the <fieldset> element.
HTML Form Example:
<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Student Info:</legend> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br><br> <label for="city">City:</label><br> <input type="text" id="city" name="city"><br><br> </fieldset><br> <fieldset> <legend>Login Details:</legend> <label for="email">Email ID:</label> <input type="email" id="email" name="email"/><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"/><br> </fieldset><br> <fieldset> <legend>Course Details:</legend> <label for="undergrad">Undergraduate:</label> <input type="radio" id="undergrad" name="undergrad" value="yes"/>YES <input type="radio" id="undergrad" name="undergrad" value="no"/>NO <br><br> Subjects:<br> <input type="checkbox" id="english" name="english" value="english"/> <label for="english">English</label> <br> <input type="checkbox" id="maths" name="maths" value="maths"/> <label for="maths">Mathematics</label> <br> <input type="checkbox" id="science" name="science" value="science"/> <label for="science">Science</label> </fieldset><br> <input type="submit" value="Finish"> </form> </body> </html>
Explanation:
In the above example, we have created an HTML form using the different tags and fields that we have discussed earlier. Here, we have created three different groups for the related information.
- The first one is the “Student Info” group that includes the basic fields like “Name” and “City”.
- The next field set is the “Login Details” group that includes the student login details like the “Email ID” and “Password” fields which we have created using the Email and Password field control features of the HTML forms.
- The last one is ultimately the “Course Details” field set including the fields “Undergraduate” and “Subjects”. In the last group, we have used both the radio button and the checkbox button control features of the HTML forms. The last segment is the Submit Button Control Segment to finish and submit the form to the server. The use of Input element along with different types for different fields can also be checked in the above example. All the text type inputs are the one-line text input fields only. The input type changes for different HTML form controls.
The above example thus includes all the fundamental as well as the most commonly used features in an HTML form.