In this HTML tutorial, we will discuss the HTML From tag. Let's see what is the HTML Form tag and how to use the HTML Form Tag.
What is an HTML Form
HTML form tags are the basic part of web development that allows the user to fill in the details according to the form requirement. With the help of this form, we can create different types the forms like "Login Form", "Registration Form", "Contact Form", and "Feedback Form", and add multiple types of input according to the form requirements.
In the form, we can use multiple types of input like "text", "email", "file", "date" etc. These input fields are used according to the form requirements. let's see the basic structure of the HTML form.
Explanation of the code
<form>:- This is the starting point of the HTML form. we can also say this opening tag of the HTML form Some attributes are also added in this tag of the form like "action", "method", "class", "id", "enctype". "action" and "method" attributes are mandatory in HTML <form> tag.
action attribute:- In this attribute, we add the URL where we write the functionality after submitting the form.
method attribute:- In this attribute, we add two values. These values are “get” and “post”.
enctype:- This attribute is an optional attribute. When we send any file, images, etc so we add this attribute in the form opening tag.
Input Fields:- I have added two input fields which are "text" and "password". Username and password can be entered in this field.
Submit Button:- The form contains a submit button (<input> with type="submit") which when clicked, sends the form data to the server for processing. The value of the submit button is "submit", which will appear on the button.
List of the Input Type
| Type | Description | Basic Definition |
|---|---|---|
button |
Represents a button with no default behavior. | <input type="button" /> |
checkbox |
Renders a checkbox that can be checked, unchecked, or indeterminate. |
<input type="checkbox" /> |
color |
Renders a color picker or a text box for entering color codes. | <input type="color" /> |
date |
Control for entering a date in the format: YYYY-MM-DD. | <input type="date" /> |
datetime-local |
Control for selecting or entering a date and time. | <input type="datetime-local" /> |
email |
Renders a control for email address entries, with format validation. | <input type="email" /> |
file |
Allows file upload from local storage. | <input type="file" /> |
hidden |
Hidden control with no visual representation, but the value is submitted. | <input type="hidden" /> |
image |
Represents a button with an image as its value. | <input type="image" /> |
month |
Control for entering a date in the format: YYYY-MM. | <input type="month" /> |
number |
Control that allows number entries, including validation. | <input type="number" /> |
password |
Renders a text field for password entries, obscuring the input. | <input type="password" /> |
radio |
Control for selecting a single option in a group. | <input type="radio" /> |
range |
Represents a slider control with a predefined range. | <input type="range" /> |
reset |
Button that resets form values to their initial state. | <input type="reset" /> |
search |
Optimized text field for search queries. | <input type="search" /> |
submit |
Button with default behavior of submitting a form. | <input type="submit" /> |
tel |
Text field optimized for telephone number entries. | <input type="tel" /> |
text |
Basic single-line text field. | <input type="text" /> |
time |
Control for entering time, often in the format: hh:mm:ss. | <input type="time" /> |
url |
Text field optimized for URL entries, with validation. | <input type="url" /> |
week |
Control for entering a week, typically in the format: yyyy-Www. | <input type="week" /> |
progress |
Represents the progress of a task, shown as a progress bar. | <progress value="70" max="100">70%</progress> |
Tags
html