HTML Forms

HTML forms are used to collect user input on a web page. Forms allow users to enter data and submit it to a server for processing. Let's explore the basic structure of an HTML form and various form elements.

Basic HTML Form Structure

A basic HTML form is defined using the <form> element, which has two essential attributes:

action: Specifies the URL to which the form data is sent for processing.
method: Defines the HTTP method for the form submission, typically GET or POST.

<form action="process.php" method="post">
<!-- Form elements go here -->              
</form>

Common Form Elements

HTML provides a range of form elements, each serving a distinct purpose:

Text Input: The <input type="text"> element allows users to enter text. You can identify the input field using the name attribute.
Password Input: The <input type="password"> element is used for securely entering passwords.

HTML

Output

Radio Buttons: Radio buttons are used when users need to select one option from a set of choices. They share the same name attribute.
Checkboxes: Checkboxes allow users to select multiple options from a set, each with a unique name attribute.

HTML

Output

Dropdown List: Dropdown lists are created using the <select> element with <option> elements inside.

HTML

Output

Text Area: Text areas, defined by the <textarea> element, allow users to input multi-line text.

HTML

Output

Buttons

HTML forms can include various types of buttons for user interaction. These buttons allow users to trigger specific actions or events within the form. Common types of buttons include

Button Element: The <button> element can be used to create custom buttons with JavaScript event handlers. This button type is versatile and can trigger various actions.
Submit Button: The <input type="submit"> button is used to submit the form to the server for processing. When clicked, it sends the data to the URL specified in the form's action attribute.
Reset Button: The <input type="reset"> button allows users to reset the form, clearing all input fields and returning them to their default values.

HTML

Output

In this example, the form includes both a "Login" button (Submit) and a "Clear" button (Reset). Users can enter their username and password, and the "Login" button submits the form to the server for processing, while the "Clear" button resets the form, clearing all input fields.

IFrames (Inline Frames)

An <iframe> is an HTML element used to embed another HTML document or web page within the current page. It provides a way to display content from an external source, such as a video, map, or another web page, in a designated area of the current page.

HTML

Output

The src attribute specifies the source URL of the content to be displayed in the iframe. You can also set the width and height attributes to define the dimensions of the iframe.

Iframes are commonly used for embedding videos from platforms like YouTube, maps from Google Maps, and external web content. They offer a way to include external resources seamlessly within your web page

Form Attributes

Forms can have additional attributes that modify their behavior and appearance:

action: Specifies the URL where the form data will be sent for processing.
method: Defines the HTTP method for the form submission, typically GET or POST.
target: Specifies where to display the response to the form submission, such as in a new browser window.

HTML forms are highly versatile, providing a means to gather data from users and interact with web servers. They are fundamental elements of various web applications and are highly customizable to meet specific requirements.