DEV Community: Narmatha

HTML FORMS

Narmatha — Thu, 16 Jul 2026 14:33:38 +0000

WHAT IS HTML FORM?

An HTML form is used to collect information from users and send the data to a server for processing. It is created using the

tag and contains different form elements like text fields, checkboxes, radio buttons, and buttons

USAGE OF THE HTML FORMS

1.User Registration
Collects user information such as name, email, and password.
2.Login Pages
Used to enter usernames and passwords for authentication.
3.Contact Forms
Allows users to send messages, queries, or feedback.
4.Search Forms
Used to search information on websites.
5.Online Shopping
Collects customer details, addresses, and order information.
6.Surveys and Feedback
Helps collect opinions and responses from users.

Common HTML Form Elements

Text Field ()

Used to enter single-line text such as name, username, or address.
Example:

Password Field ()

Used to enter passwords. The entered characters are hidden.
Example:

Radio Button ()

Allows the user to select only one option from a group.
Example:
Male

Checkbox ()

Allows the user to select multiple options.
Example:
Music

Dropdown List () Provides a list of options from which the user can select one. Example:
India
USA

Textarea ()</p> <p>Used to enter multiple lines of text, such as comments or messages.<br> Example:<br> <textarea>

Submit Button ()

Used to submit form data to the server.
Example:

File Upload ()

Allows users to upload files like images or documents.
Example:

HTML ATTRIBUTES

Narmatha — Thu, 16 Jul 2026 14:23:46 +0000

WHAT IS HTML ATTRIBUTES

HTML attributes are special properties that provide additional information about an HTML element or modify its behavior and appearance. They are written inside the opening tag of an HTML element and usually have the format attribute="value".

*href Attribute *

The href (Hypertext Reference) attribute is used to specify the destination URL of a hyperlink. It is mainly used with the (anchor) tag to link one web page to another, or to files, email addresses, or sections within the same page.

Syntax
Link Text
Example
Visit Google

Common HTML Attributes

id **– Gives an HTML element a unique name or identifier. It is used to target a specific element with CSS or JavaScript.
**Example:

Welcome

*class *– Groups multiple HTML elements together so they can be styled or controlled using CSS or JavaScript.
*Example:
*

Hello

style **– Applies CSS styles directly to an HTML element (inline CSS).
**Example:

Heading

title – Provides extra information about an element and displays it as a tooltip when the mouse is placed over it.
Example:

Hello

*href *– Specifies the URL or destination of a link. It is mainly used with the tag.
*Example:
*
Visit

*src *– Specifies the source location of an image, video, or other media files. It is mainly used with tags like , , and .
*Example:
*

HTML LIST

Narmatha — Thu, 16 Jul 2026 14:03:30 +0000

*HTML List
*
An HTML list is used to display a group of related items in an organized and easy-to-read format on a web page. Lists help present information clearly using numbers, bullets, or descriptions.

Types of HTML Lists
__
Ordered List (

Unordered List (

Description List (

for the term and

for the description.

*SIMPLE EXAMPLES FOR OL,UL,DL
*
Example

HTML
CSS

Apple
Banana

HTML: HyperText Markup Language

FLEXBOX IN CSS

Narmatha — Thu, 16 Jul 2026 13:52:25 +0000

WHAT IS FLEXBOX IN CSS ?

CSS Flexbox (Flexible Box Layout) is a CSS layout system designed to make it easy to arrange, align, and distribute space between items inside a container, even when their sizes are unknown or change dynamically.

HOW FLEXBOX WORKS

Flexbox has two main parts:

Flex container: The parent element with display: flex.
Flex items: The direct children inside the flex container.

PROPERTIES OF FLEXBOX IN CSS

Container properties
Property Purpose
display: flex Enables Flexbox
flex-direction Row or column layout
justify-content Aligns items along the main axis
align-items Aligns items along the cross axis
flex-wrap Allows wrapping
gap Adds space between items

Example:

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
Item properties
Property Purpose
flex Controls how an item grows or shrinks
flex-grow Allows an item to grow
flex-shrink Allows an item to shrink
flex-basis Sets the initial size
align-self Overrides alignment for a single item

Example:

.item {
flex: 1;
}

.big-item {
flex: 2;
}