Forms have become a basic necessity for every website. Basically for an E-commerce website. An E-commerce website uses more than one form for different purposes such as Login, Sign Up as well as for delivery details and more. Beside this, if we are creating a Saas website then, in that case, a form is also required.
In Form, the User used to give input to the website and the collected data is securely fetched to the server side. Though form has many attributes which are not possible to remember every time, we need to Google it but the thing that we have to understand is the basic concept to use and handle such attributes.
Let's create a Simple form by using pure HTML.
<h1>FORM</h1>
<fieldset>
<legend>The collected information is secure</legend>
<form>
<br />
<label for="name">Name:</label>
<input
type="text"
id="name"
name="username"
placeholder="Enter Your Valid Name"
autofocus
/>
<br /><br />
<label for="information">Additional Information:</label>
<textarea id="information" name="Comments"></textarea>
<br /><br />
<label for="email">Enter Your Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="xyz@gmail.com"
/>
<br /><br />
<label for="password">Enter Your password:</label>
<input type="password" id="password" name="password" />
<br /><br />
<label for="dob">Enter Your DOB:</label>
<input type="date" id="dob" name="dob" />
<br /><br />
<label for="email">Enter Your Age:</label>
<input type="number" id="age" name="age" min="2" />
<br /><br />
<label>Select Your Gender:</label>
<br /><br />
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="none">None</label>
<input type="radio" id="none" name="gender" value="none" />
<br /><br />
<label for="accept">Accept all the Terms and agreements</label>
<input type="checkbox" id="accept" name="accept" />
<br /><br />
<input type="reset" id="reset" name="reset" value="RESET" />
<br /><br />
<input type="submit" id="submit" name="submit" value="SUBMIT" />
</form>
</fieldset>
This is a basic Html form with some tags and attributes. On hitting submit button the data on the form will fetch in the form of URL which will further direct to serverside, this is an unsecured method because the URL saves in our history and cache so anyone can access it. Therefore, the Post form method is used which avoids the form data to fetched in the URL and directly gives data to the server through a different body.