Understanding HTML Forms: Tags, Input Types, and Validation

  

Forms

Forms are a crucial part of HTML because they allow websites to get input from users for processing. In the past, forms were submitted physically. Now, due to advancements in technology, this is done online.

Form Tag

The form tag acts as a container for other form elements. To create a form, start with this tag, place other elements inside it, such as labels, inputs, and buttons, and close this tag after all elements.

The most important attributes of forms are action and method.

1. The action attribute contains the location where we want to store data after submitting the form.<form action="index.html"> </form>
2. The method attribute determines how form data is sent to the server. With method=”get”, the data the user enters is appended to the URL and is commonly used for search forms. With method=”post”, the data is included in the request body and not shown in the URL, making it suitable for sign-in forms to help keep data secure.

Label

The <label> tag is used to describe an input field. It is placed before the input tag. It provides a name for input and also helps screen readers to tell what the input field is asking for, which is crucial for blind people. We can connect a label with an input by writing the same value written in the “for” attribute of label in “id” attribute of input tag.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Fieldset and Legend

A form contains many input fields. A fieldset is used to group related fields in a box. A legend is used inside the fieldset to provide a title for the box. For instance in an admission form we have personal information, parent information, and academic details.

HTML form input types and their uses

The role of the input tag is to get input from the user. The most common attributes of input are

• type: The type attribute defines the kind of input.

         <input type=”text”>

• id: id value is used to connect it with a label.
• name: The role of the name attribute is that when we submit our form, the data is stored as a key-value pair; it gets a key from the name attribute, and the value is what the user writes.

The most important input types are:

1.  text: used for names and general text fields.
2.  password: This type hides characters for security and allows restrictions on minlength or          maxlength.
3.  email: It is used to retrieve the user’s email address and also verify if the provided email address   is valid.
4.  checkbox: It is used when we want to select multiple options at once
5.  radio: It is used to select one option among many
6.  file: It is used for uploading a file from a computer.
7.  date: It is used for selecting dates. Most commonly used for Date of Birth

Form Submission

There are two common ways to submit a form

1. <input type=”submit” value=”Submit”> It is used to submit a form and only contains text; we cannot add an icon to it.
2. <button type=”submit”> Submit</button> It is also used to submit a form. The good thing is that we can also add an icon before text.

Form Validation Attributes

are attributes used with input fields to validate if a user has written valid input or not

1. required: The role of the required attribute is to make sure a field cannot be empty. It should have data in it. If a user tries to submit the form, it will not submit, and a warning will be displayed. It is required.

<input type="text" name="username" required>

2. placeholder: It is the text we write in the input field that helps to understand what the field is asking about, like in the place of Name, we write some name. It disappears when the user starts typing.

<input type="text" name="username" required placeholder="Ali">

3. min and max: It is used to specify the lowest and maximum possible value that the user can write. It is used mostly with dates and numbers. For example, the marks of a person cannot exceed 100 and cannot be less than zero, so min will be 0 and max will be 100.

<input type="number" min="0" max="100">

4. Pattern: It checks if the input follows a specific pattern or not. Used for writing phone numbers.

<input type="tel" name="phone" pattern="[0-9]{10}" required>

The phone number should contain numbers from 0 to 9 and exactly 10 digits.

Example of Form in html

Code:

<form action="submit.html" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Ali" 
required> <br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" 
required><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
</fieldset>
<fieldset>
<legend>Guardian Information</legend>
<label for="guardian_name">Name:</label>
<input type="text" id="guardian_name" name="guardian_name" 
required><br><br>
<label for="guardian_email">Email:</label>
<input type="email" id="guardian_email" name="guardian_email" 
required><br><br>
<label for="guardian_password">Password:</label>
<input type="password" id="guardian_password" 
name="guardian_password" required><br><br>

</form

Output:

Personal Information

Name: 

Email: 

Password: 

Date of Birth: 

Guardian Information

Name: 

Email: 

Password: