Forms are an important element in websites they play an important role between buyer and seller and in other roles, the most useful and popular examples of forms are Contact Forms, login and signup Let’s explore together how to create forms in HTML
For creating forms in HTML we use form tag <form> </form> also, we use labels and input fields to get data from users
This is an example of a simple HTML form
let’s break it down step by step and clear concepts
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" placeholder="First Name"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" placeholder="Last Name"><br>
<label for="email">Email</label> <br>
<input type="email" id="email" name="email" placeholder="email">
</form>
This is a preview of that code
First, we use a form tag to create a form in HTML,
Action Attribute
then we define an attribute action=”” inside that is used to redirect that form data on that link particular link action=”abc.host.org”, then we use the label tag <label> </label> , label tag is mostly used to give a name to the input field of the form <label> </label> have a for=”” attribute.
For Arrtibute
The for attribute in the <label> element associates the label with a specific form input. This link is established by matching the value of the for attribute with the id of the input element.
Input Field
then we use the input field, HTML we have many input fields for various types of data text for alphabetical passwords for the password fields, and many more discussed soon.
Name Attribute
then we have an name attribute inside of the input field The name attribute in an HTML form is used to assign a unique identifier to form inputs. It plays a crucial role in submitting form data to the server, as it serves as the key for each input's value in the data that is sent.
Placeholder Attribute
The placeholder attribute in HTML forms is used to provide a short hint or example about what to input into a form field. It displays text inside the input field as a guide for the user and disappears when the user starts typing.
Required Attribute
required attribute is considered most important attribute in forms that ensures the input field must be filled before form submission.
Input Fields
All these are the input fields in HTML, different fields for different type of Data
<input type="text">(default value)<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="time"><input type="url"><input type="week">
Get & Post Method of Form Submission
The GET and POST methods are the two most commonly used HTTP request methods in HTML forms to send data to a server. Each method has specific use cases and characteristics.
Get Method
Data Visible in URL
Length Limitations
Not Secure
Cachable and Bookmarkable
In the above image data is visible in URL fname, lname and email
Post Method
Data Not Visible in URL
No Length Limit
More Secure
Not Bookmarkable
Thank you For reading 🤝