📖 Full detailed notes here: Open in Notion
An HTML form is a section of a document that contains interactive controls for users to submit information to a web server. Forms are used for various purposes like login pages, registration forms, contact forms, search boxes, and surveys.
The <form> tag is used to create an HTML form for user input. It acts as a container for different types of input elements like text fields, checkboxes, radio buttons, and submit buttons. The form tag includes attributes like action (where to send form data) and method (how to send form data).
The <input> tag specifies an input field where users can enter data. It's one of the most important form elements and can vary in how it appears based on its type attribute. Input types include text, password, radio, checkbox, submit, button, email, date, and many more.
The <label> tag defines a label for form elements. Using labels improves accessibility as screen readers will read the label when the user focuses on the input element. Labels can be associated with form controls either by wrapping the input element or using the for attribute.
A complete HTML form structure includes the form element as the container, various input fields with appropriate types, labels for each input, grouping elements like fieldset and legend for related controls, and a submit button. Proper form structure ensures usability and accessibility.
The name attribute specifies the name of an input element and is used to reference form data after submission. The value attribute specifies the initial value for an input field. Both are essential for processing form data on the server side.
Radio buttons allow users to select exactly one option from a group of choices. All radio buttons in the same group must share the same name attribute. When one radio button is selected, others in the same group are automatically deselected.
Checkboxes allow users to select one or more options from a set of choices. Unlike radio buttons, multiple checkboxes can be selected simultaneously. Each checkbox functions independently, though they can be grouped conceptually.
The placeholder attribute specifies a short hint that describes the expected value of an input field. The hint is displayed in the input field before the user enters a value. Placeholder text is typically displayed in a lighter color than user-entered text.
💻 Sample Code and Practice Questions: View on GitHub
💻 Blog Article: View on GitHub