HTML Forms:

HTML forms are used to collect user input and send it to a server for processing. They consist of various form elements for text input, selection, and interaction.

<form> Element:

The <form> element is used to create a form on a web page. It acts as a container for form elements.

The "action" attribute specifies the URL to which the form data should be sent.

The "method" attribute defines the HTTP method (GET or POST) used to send the data. Example:

<form action="/submit" method="POST">

<!-- Form elements go here -->

</form>

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Text Input Fields (<input type="text">):

Text input fields are used for single-line text input. The "type" attribute is set to "text."

The "name" attribute specifies the name of the input field. Example:

<label for="username">Username:</label>

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

Password Input Fields (<input type="password">):

Password input fields are used for entering sensitive information, like passwords. The "type" attribute is set to "password."

Example:

<label for="password">Password:</label>

<input type="password" id="password" name="password">

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Radio Buttons (<input type="radio">):

Radio buttons allow users to select a single option from a list.

Each radio button has a unique "name" attribute, but they share the same "name" to form a group. The "value" attribute specifies the value sent when the radio button is selected.

Example:

<label for="male">Male</label>

<input type="radio" id="male" name="gender" value="male">

<label for="female">Female</label>

<input type="radio" id="female" name="gender" value="female">

Checkboxes (<input type="checkbox">):

Checkboxes allow users to select one or more options from a list.

Each checkbox is independent and can have its own "name" and "value" attributes. Example:

<label for="subscribe">Subscribe to Newsletter:</label>

<input type="checkbox" id="subscribe" name="newsletter" value="yes">

Textarea (<textarea>):

Textareas are used for multi-line text input.

They do not have a "type" attribute but can have "name" and "id" attributes.

The content between the opening and closing <textarea> tags defines the default text. Example:

<label for="comments">Comments:</label>

<textarea id="comments" name="comments" rows="4" cols="50">Enter your comments here...</textarea>

Dropdown Lists (<select> and <option>):

Dropdown lists are used to select one option from a list of options.

The <select> element creates the dropdown list, and <option> elements define the options. The "value" attribute specifies the value sent to the server when an option is selected.

Example:

<label for="country">Country:</label>

<select id="country" name="country">

<option value="usa">United States</option>

<option value="canada">Canada</option>

<option value="uk">United Kingdom</option>

</select>

File Upload (<input type="file">):

File upload fields allow users to select and upload files. The "type" attribute is set to "file."

The "name" attribute specifies the name for the uploaded file. Example:

<label for="file">Upload a file:</label>

<input type="file" id="file" name="uploadfile">

Fieldset and Legend (<fieldset> and <legend>):

The <fieldset> element groups related form elements together and creates a visual border. The <legend> element provides a caption or title for the <fieldset>.

They improve the organization and accessibility of the form. Example:

<fieldset>

<legend>Contact Information</legend>

<!-- Form elements go here -->

</fieldset>

Form Elements

These are the following HTML <form> elements:

Style.css

/*Creating style.css>
body
{
background-color: antiquewhite;
}
.title
{
    text-align: center;
}
.re
{
    color: red;
}