What is a Form?

• HTML forms are used to collect user input.
• Forms are created using the <form> element. Inside the form, we place various input types like text fields, checkboxes, radio buttons, and submit buttons.

Form Structure

• A basic form consists of:

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).

Explanation

• 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

• 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:
• text: A single line of text.
• password: Masks the input for passwords.
• email: Validates that an email format is entered.
• radio: Select one option from a set of options.
• checkbox: Allows multiple selections.

Explanation

• <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.

Adding Labels, Placeholder, and Fieldset

Labels and Placeholders:

• 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.

Explanation

• Placeholder Text: A short hint that appears in the input field until the user starts typing.
• Textareas: Used for multi-line input, typically for a comment or bio.

Fieldset and Legend

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

Explanation

• Fieldset: Used to group related form elements, making the form more structured and easier to understand.
• 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.

Explanation

• 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.

Learn next tutorial Nesting, Tables, and Divs