HTML Forms

Define :

Web forms are one of the main important points of interaction between a user and a website or an app.
The main purpose of forms is to allow a user to submit some information to a website for some specific purpose.
HTML forms have a variety of applications using HTML forms we can create login forms or sign-in forms, data entry forms, feedback forms, online application forms query forms, etc.
It is the block-level HTML tag.
In HTML, a form is created using different types of semantics forms elements and not through the generic div or span elements

Form tag has a few important attributes:

FORM element

The form element is a container for different types of input fields, required fields, text fields, radio buttons, checkboxes, etc.

It is the opening and closing tag .

Output :

Input Element with name attribute:

It specifies the input field where the user can enter data. It is an empty element, meaning it does not have any content or closing tag. But it is the most important element in the form tag.

We want to add the actual places or boxes where someone will type their name and email.

this is the syntax of input element with name attribute :

Output :

Label Element :

These form fields names like name, email, password, etc into labels by using the label element.

Button Element

We also need a button on our form, that people can click to submit the form.

It has both an opening and closing tag and whatever words we put as content in between the tags, are the words that will display on the button itself.

Example :

Output :

Type attribute:

When I type inside these two input fields, I can type anything I want and the form will accept it.

Well, for that we use the type attribute in each of the input elements.

for the name fields, we will collect text, which is the default type of the input element.

Example :

Output :

Required attribute:

Next, we can further enhance our form, by making any of the input fields compulsory because of the submitting of the form.

So to make a particular field compulsory, we can add the required attribute It's an input element.

Output :

Placeholder attribute:

Lastly, let's look at including some placeholder or a default value in our input boxes. To do that use placeholder attributes.

Placeholder attribute used like suggested text appears in the box.

Output :

Value attribute:

User names, addresses, credit card numbers then must use a value attribute instead of the placeholder attribute.

the placeholder is just a suggestion, whereas the value is real data.

Output :

Name attribute :

We are going to use this name attribute and access this name attribute in a processing page that means to access this form by this name in a javascript file or a server-side file like a PHP file or ASP file so that is the main purpose of the name attribute.

Text fields :

Syntax of text fields

Example :