An HTML form is a section of a document designed to collect user input. It contains various form controls such as text fields, password fields, checkboxes, radio buttons, submit buttons, menus, etc.
HTML forms are essential for collecting data from site visitors. They allow users to input information that can be sent to a server for processing. Common use cases include registering for a service, submitting feedback, and making online purchases.
HTML forms are necessary when you need to gather information from users. For instance, to buy items online, users must fill out forms with their shipping address and payment details.
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML forms are essential for collecting user input. Below is a list of commonly used HTML form tags along with their descriptions:HTML
| Tag | Description |
|---|---|
| <form> | It defines an HTML form to enter inputs by the user side. |
| <input> | It defines an input control. |
| <textarea> | It defines a multi-line input control. |
| <label> | It defines a label for an input element. |
| <select> | It defines a drop-down list. |
| <optgroup> | It defines a group of related options in a drop-down list. |
| <option> | It defines an option in a drop-down list. |
| <button> | It defines a clickable button. |
| <label> | <It defines a label for an input element.> |
| <fieldset> | It groups the related element in a form. |
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Tags Example</title>
</head>
<body>
<h1>HTML Form Example</h1>
<!-- Form Tag -->
<form action="/submit_form" method="post">
<!-- Label and Input Tag -->
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<!-- Textarea Tag -->
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
cols="50"></textarea><br><br>
<!-- Select Tag with Optgroup and Option Tags -->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="American Cars">
<option value="ford">Ford</option>
<option value="chevy">Chevrolet</option>
</optgroup>
</select><br><br>
<!-- Button Tag -->
<button type="submit">Submit</button>
</form>
</body>
</html>
<form>: The container for all form elements. It includes action (the URL to submit the form data to) and method (the HTTP method to use, e.g., "post" or "get").
<input>: A single-line input field. The type attribute can vary (e.g., text, password, checkbox, radio, etc.).
<textarea>: A multi-line input field for longer text input.
<label>: Ties a label to a form element via the for attribute, improving accessibility.
<select>: Creates a drop-down list. The name attribute specifies the name for the drop-down list.
<optgroup>: Groups related options within a drop-down list for better organization.
<option>: Defines an item within a drop-down list. Nested within a <select> or <optgroup>.
<button>: A clickable button that can submit the form when the type is set to submit.