What is a Form?

The HTML forms are used to collect user input. User input is sent to the server to process and retrieve data. Forms are created using the <form> element. Inside the form, we place various input types like text fields, checkboxes, radio buttons, and submit buttons.

• When we talk about html forms there are so many types of them, we can create in html and css, but here we will just talk about two types of forms work and their functions.
• The number one is Sign up and Log in form the second one is Contact us form, You can see this form in our site home page navigation bar. Or click the link above to explore more.
• Third party forms provider names are Google Forms and many others. This form is demo of simple contact form. You can also create your new forms from the provider.

Form structure

A basic html form consists of below elements and tags.

1. The <form> tag which wraps around all form elements.
2. The action attribute, which specifies where the form data should be sent.
3. The method attribute, which specifies how to send the form data usually GET or POST.

Simple html form structure

• The action attribute specifies the server endpoint where form data will be submitted.
• The method attribute define show the data is sent POST is commonly used for form submissions.
• The <label> tags provide labels for the input fields, and the for attribute connects the label with the input’s id.
• The <input> fields collect user data, and the <button> submits the form.

Input Fields and Types

• The HTML offers a variety of input types that allow users to enter different types of data. These include text, email, password, checkbox, radio, date, and many more.

The most common input types include:

• The text input is a single line of text.
• The password is masks the input for passwords.
• The email is validates that an email format is entered.
• The radio select one option from a set of options.
• The checkbox Allows multiple selections.

Explaining Input type fields of the form

Input types work & function

• <input type="text"> Allows users to enter plain text.
• <input type="password"> Masks the user input to protect passwords.
• <input type="radio"> Radio buttons allow users to choose one option from a group.
• <input type="checkbox"> Checkbox allows users to select multiple options.

Text Input Fields

The input type text explain a single input field like Text, Name, Email, Password and more fields.

Radio Buttons

The Radio buttons let a user can select one option from the multiple choices like Gender, City, Country, Language and so on.

A form of radio buttons is as below.

Checkboxes

The Checkboxes let a user can select multiple or unlimited number of options like Skills, Education, languages you talk and more.

Submit Button

The Input type submit button is used to submitting the form data to server. Means if you have filled the form completely then you will click the submit button to submit the data.

Adding Labels, Placeholder, and Fieldset

Labels and Placeholders:

• The Labels are essential for accessibility, as they help users, especially those using screen readers understand what input is required.
• The Placeholder attribute shows a hint inside the input box before the user types.

• The Placeholder Text a short hint that appears in the input field until the user starts typing.
• The Textarea is used for multi-line input, typically for a comment or bio. Textarea is used to write lengthy text content and multiple line input field it is.

Textarea figure

Fieldset and Legend

• The <fieldset> tag groups related fields within a form, while <legend> provides a caption for the grouped fields.

look out to the fieldset & legend visual.

• The Fieldset Used to group related form elements, making the form more structured and easier to understand and Legend provides a title or description for the grouped fields.

Building a Simple Search Bar

How to Create a Search Bar ?

• A search bar is an input field that allows users to search for specific content on the site. The form can be sent via the GET method to process the search.

HTML simple search bar for search anything you want to find.

• The action attribute is set to search, indicating that the form will be submitted to the search endpoint.
• The form method is GET, which is commonly used for search forms because the data is appended to the URL.