Unit-I
# Introduction to web designing:
Web designing is the process of creating, planning, and arranging the visual and functional elements of a
website. It involves a combination of graphic design, user interface (UI) design, user experience (UX) design,
and front-end development to produce an aesthetically pleasing, user-friendly, and responsive website.
Key Components of Web Designing
Web designing involves several key components that work together to create a complete website. These
include:
▪ Content Strategy: This involves planning the type of content that will be included on the website,
such as text, images, videos, and other multimedia elements. It also includes defining the target
audience and the overall message the website aims to convey.
▪ Information Architecture: This focuses on organizing and structuring the website's content in a
logical and intuitive manner. It involves creating a sitemap, defining navigation menus, and ensuring
that users can easily find the information they need.
▪ User Interface (UI) Design: This involves designing the visual elements of the website, such as
buttons, forms, and other interactive components. The goal is to create a user-friendly interface that
is both visually appealing and easy to use.
▪ User Experience (UX) Design: This focuses on the overall experience that users have when interacting
with the website. It involves conducting user research, creating user personas, and testing the
website to ensure that it meets the needs of its target audience.
▪ Visual Design: This involves choosing the colors, fonts, and other visual elements that will be used
on the website. The goal is to create a visually appealing design that is consistent with the website's
brand and message.
▪ Web Development: This involves writing the code that makes the website function. This includes
front-end development (which focuses on the user interface) and back-end development (which
focuses on the server-side logic).
The Web Design Process:
The web design process typically involves several stages:
Planning: This stage involves defining the goals of the website, identifying the target audience, and creating
a content strategy. It also includes conducting research on competitors and identifying best practices.
Design: This stage involves creating wireframes and mockups of the website. Wireframes are basic outlines
of the website's layout, while mockups are more detailed visual representations of the design.
Development: This stage involves writing the code that makes the website function. This includes front-end
development (HTML, CSS, and JavaScript) and back-end development (server-side logic).
Testing: This stage involves testing the website to ensure that it functions correctly and meets the needs of
its target audience. This includes testing the website on different devices and browsers, as well as conducting
user testing.
Deployment: This stage involves launching the website on a web server. This includes configuring the server,
uploading the website files, and testing the website to ensure that it is working correctly.
Maintenance: This stage involves maintaining the website to ensure that it remains functional and up-to-
date. This includes updating the website's content, fixing bugs, and implementing security updates.
P PAVANI ,MCA 1
Technologies for Web Designing
▪ Several technologies are essential for web designing. Understanding these technologies is crucial for
creating effective and modern websites.
▪ HTML (HyperText Markup Language): This is the foundation of all websites. HTML provides the
structure and content of a webpage. It uses tags to define elements such as headings, paragraphs,
images, and links.
▪ CSS (Cascading Style Sheets): CSS is used to style the HTML elements and control the visual
appearance of a website. It allows designers to define colors, fonts, layouts, and other visual
properties.
▪ JavaScript: This is a scripting language that adds interactivity and dynamic behavior to websites. It
can be used to create animations, handle user input, and communicate with servers.
▪ Responsive Design: This is an approach to web design that ensures that websites look good and
function well on all devices, from desktops to smartphones. It involves using flexible layouts, images,
and CSS media queries to adapt the website to different screen sizes.
# Difference between web applications and Desktop application
Web Applications Desktop Applications
Installed and run on a specific operating
Run in a web browser (cross-platform)
system
No installation required Must be installed on each device
Usually requires internet access Can work offline (unless designed otherwise)
Only accessible on the device where it’s
Accessible from any device with a browser
installed
Updated on the server; users get changes instantly Users must manually install updates
Generally faster with better resource
Slightly slower (depends on internet speed)
utilization
Data stored on cloud/servers (vulnerable to web Data stored locally (but may be vulnerable if
threats) not secured)
Requires web technologies (HTML, CSS, JavaScript, Requires platform-specific technologies (e.g.,
backend frameworks) .NET, Java, C++)
Microsoft Word, Adobe Photoshop, VLC
Gmail, Facebook, Google Docs
Media Player
P PAVANI ,MCA 2
# Introduction to HTML:
HTML (Hypertext Markup Language) is the standard language used to create and design web pages. It forms
the backbone of all websites by defining the structure and layout of web content. HTML uses tags and
attributes to organize text, images, links, forms, and other elements displayed in a web browser.
Key Features of HTML
▪ Foundation of the Web – Every website uses HTML to structure content.
▪ Markup Language – Uses tags (e.g., <h1>, <p>, <img>) to define elements.
▪ Platform-Independent – Works on all operating systems (Windows, macOS, Linux).
▪ Easy to Learn – Simple syntax, making it beginner-friendly.
▪ Supports Multimedia – Embeds images, videos, and audio.
▪ Integrates with CSS & JavaScript – Used alongside CSS (styling) and JavaScript (interactivity).
Evolution of HTML:
HTML was initially created by Tim Berners-Lee in 1991 as a way to share and structure documents on the
web.
1. HTML 1.0 (1993):
▪ The first official version, created by Tim Berners-Lee.
▪ Very basic could only display text, links, and images.
▪ No layout control or styling support.
2. HTML 2.0 (1995)
▪ Standardized by the Internet Engineering Task Force (IETF).
▪ Introduced basic elements like forms, tables, and basic text formatting.
▪ Still limited in terms of design and structure.
3. HTML 3.2 (1997)
▪ Developed by the W3C (World Wide Web Consortium).
▪ Introduced support for scripting (JavaScript), applets, and more form elements.
▪ Added table support and better text formatting options.
4. HTML 4.01 (1999)
▪ A major update that brought structure and flexibility.
▪ Introduced CSS (Cascading Style Sheets) to separate content from design.
▪ Support for scripting, multimedia, and improved forms.
▪ Three types: Strict, Transitional, and Frameset.
P PAVANI ,MCA 3
5. XHTML (2000)
▪ A reformulation of HTML 4.01 using XML syntax.
▪ Stricter rules; aimed to improve code quality and structure.
▪ Faced low adoption due to strictness.
6. HTML5 (2014 – present)
▪ Major milestone developed by W3C and WHATWG( Web Hypertext Application Technology Working
Group)
▪ Designed to support modern web apps and mobile devices.
▪ New semantic tags (<header>, <footer>, <article>, etc.)
▪ Native support for audio, video, and canvas (graphics).
▪ Better form controls and offline capabilities.
▪ Works with CSS3 and JavaScript seamlessly.
# Structure of HTML Document:
Every HTML document follows a basic structure.
Example: <!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
P PAVANI ,MCA 4
</html>
▪ <!DOCTYPE html>:
This declaration defines the document type and tells the browser that this is an HTML5 document.
It should be the very first thing in your HTML file.
▪ <html>:
The root element of an HTML page. All other elements are contained within this tag.
▪ <head>:
Contains meta-information about the HTML document, such as the title, character set, and links to
stylesheets. This information is not displayed on the page itself.
▪ <title>:
Specifies a title for the HTML page (which is shown in the browser's title bar or tab).
▪ <body>:
Contains the visible page content. This is where you put all the text, images, and other elements that
you want the user to see.
▪ <h1>:
Defines a level 1 heading. There are six heading levels, from <h1> to <h6>, with <h1> being the most
important and <h6> the least.
▪ <p>: Defines a paragraph.
# HTML Elements:
An HTML element is a fundamental building block of an HTML document. It defines the structure and content
of a webpage. HTML elements are created using tags, and most elements consist of a start tag, content, and
an end tag.
Basic Syntax of an HTML Element:
<Start tagname>Content goes here</End tagname>
Types of Tags in HTML:
HTML tags are instructions that define how content should be displayed in a web browser. They can be
broadly classified into two main categories:
▪ Container Tags (Paired Tags)
▪ Non-Container Tags (Empty/Unpaired Tags)
Container Tags (Paired Tags):
These tags have both an opening and closing tag, with content placed between them.
P PAVANI ,MCA 5
Example: <html> ... </html>
Non- container Tags:
Non-container tags, also known as empty elements or self-closing tags, are HTML tags that do not have any
content between an opening and closing tag. These tags do not require a closing tag because they don’t
wrap any text or other elements.
Example: <br> - Line break – moves content to the next line
Types of HTML Elements:
Block-Level Elements:
• Block-Level Elements Start on a new line and take full width.
• Used for structuring page sections.
Example: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>
Inline Elements:
• Inline Elements Do not start a new line and take only necessary width.
• Used inside block elements for styling or functionality.
Example: <span>, <a>, <strong>, <em>, <img>, <br>, <button>
Common HTML Elements:
Here are some of the most commonly used HTML elements:
▪ <h1> to <h6>: Headings of different levels.
▪ <p>: Paragraph tag is used to design paragraphs in document body.
▪ <a>: Anchor, used to create hyperlinks.
▪ <img>: Image tag is used to embedded a image
▪ <ul>: is used create Unordered list.
▪ <ol>: is used to create Ordered list.
▪ <li>:Is used to create List item (used within <ul> or <ol>).
▪ <div>: is used to create Division, a generic container for flow content.
▪ <span>: Is used to create a A generic inline container for phrasing content.
▪ <br>: Line break.
▪ <hr>: Horizontal rule.
▪ <table>: Defines a table.
▪ <tr>: is used to create a Table row.
▪ <td>: is used to create Table data cell.
P PAVANI ,MCA 6
▪ <th>: Table header cell.
▪ <form>: Defines an HTML form for user input.
▪ <input>: Used within a <form> to create input fields.
▪ <textarea>: Defines a multi-line text input control.
▪ <button>: Defines a clickable button.
# Attributes in HTML:
HTML attributes provide additional information about HTML elements. They are specified in the start tag of
an element and usually consist of a name and a value.
Syntax: <element attribute="value">Content</element>
attribute: The name of the attribute.
value: The value of the attribute.
Example: <img src="[Link]" alt="A beautiful sunset" width="500" height="300">
Common Attributes in HTML:
▪ Id: Specifies a unique ID for an element. Used for CSS styling and JavaScript manipulation.
▪ class: Specifies one or more class names for an element. Used for CSS styling and JavaScript
manipulation.
▪ style: Specifies inline CSS styles for an element.
▪ src: Specifies the URL of an image (for <img> elements) or a script (for <script> elements).
▪ alt: Specifies an alternate text for an image, if the image cannot be displayed (for <img> elements).
Important for accessibility.
▪ href: Specifies the URL that the link points to (for <a> elements).
▪ title: Specifies extra information about an element (displayed as a tooltip when the mouse hovers
over the element).
▪ width: Specifies the width of an element (e.g., <img>, <table>).
▪ height: Specifies the height of an element (e.g., <img>, <table>).
# HTML Headings:
HTML headings are used to define the titles and subtitles of your web pages. They provide a hierarchical
structure to your content, making it easier for users and search engines to understand the organization
and importance of different sections. HTML offers six levels of headings, ranging from <h1> (the most
important) to <h6> (the least important).
The Six Heading Levels: `
Each heading level has a specific semantic meaning and visual representation.
<h1>: Defines the main heading of the page. Typically, there should only be one <h1> element per page,
representing the overall topic. This is the most important heading and carries the most weight for SEO.
P PAVANI ,MCA 7
<h2>: Defines major sections within the page. These are subtopics of the main heading.
<h3>: Defines subsections within the <h2> sections. These are further subdivisions of the major sections.
<h4>: Defines sub-subsections within the <h3> sections.
<h5>: Defines sub-sub-subsections within the <h4> sections.
<h6>: Defines the least important headings, typically used for very minor sections or labels.
Example:
<h1>My Awesome Website</h1>
<h2>About Us</h2>
<p>Learn more about our company and mission.</p>
<h2>Our Services</h2>
<p>We offer a wide range of services to meet your needs.</p>
<h3>Web Design</h3>
<p>We create beautiful and responsive websites.</p>
<h3>Web Development</h3>
<p>We build robust and scalable web applications.</p>
<h4>Front-End Development</h4>
<p>We specialize in creating user-friendly interfaces.</p>
<h4>Back-End Development</h4>
<p>We handle the server-side logic and database management.</p>
# Paragraphs:
The <p> tag in HTML stands for "paragraph." It's a block-level element used to group related sentences and
ideas into a distinct unit of text. Browsers automatically add a small amount of vertical space (margin) before
and after each paragraph, visually separating them and improving readability.
Basic Syntax:
The basic syntax for using the <p> tag is straightforward:
<p>This is the first paragraph of text.</p>
<p>This is the second paragraph of text.</p>
P PAVANI ,MCA 8
Each <p> tag represents a new paragraph. The text enclosed within the opening <p> and closing </p> tags is
treated as a single, coherent block of content.
Styling Paragraphs with CSS:
You can use CSS to style paragraphs and control their appearance. Here are some common CSS properties
you might use:
▪ font-family: Sets the font of the text.
▪ font-size: Sets the size of the text.
▪ color: Sets the color of the text.
▪ line-height: Sets the spacing between lines of text.
▪ text-align: Aligns the text (left, right, center, justify).
▪ margin: Sets the margin around the paragraph.
▪ padding: Sets the padding inside the paragraph
# Images
Images are the second aspect of a pleasant web site development experience. The problems with images
are legion if they are not used wisely. Loading images is a slow process and if you use too many, or your
images are too large, the download times can easily become intolerable.
Browsers display a limited range of image types. You can use PNG, JPEG OR GIG image file based on your
comfort but make sure you specify correct image file name in “src” attribute. Image name is always case
sensitive. The “alt” attribute is a mandatory attribute which specifies an alternate text for an image, if the
image cannot be displayed.
Insert Image:
You can insert any image in your web page by using <img>tag. Following is the simple syntax to use this tag.
<img src="Image URL" height=”n” width=”n” alt=”alternative name” align=”top”/>
The <img>tag is an empty tag, which means that it can contain only list of attributes and it has no closing
tag.
Src attribute: This attribute is used to specify the image file name which we want to insert in a web page.
Alt: Alt is short for alternative. The value assigned alt attribute is a text [string] that usually describes the
image. When the user mouse-over on image, the alternative text appears as tooltip.
Set Image Width/Height: You can set image width and height based on your requirement using width and
height attributes. You can specify width and height of the image in terms of either pixels or percentage of its
actual size.
Example: <img src="[Link]" alt="Test Image" width="150" height="100"/>
Set Image Border:
By default image will have a border around it, you can specify border thickness in terms of pixels using border
attribute.
P PAVANI ,MCA 9
Example: <img src="[Link]" alt="Test Image" border="3"/>
Set image alignment: The align attribute allows us to position an inline image relative to the line of text that
is on. All current graphical web browsers recognized these values top, bottom and medial. By default image
will align at the left side of the page, but you can use align attribute to set it in the center or right.
Example: <img src="[Link]" alt="Test Image" border="3" align="right"/>
# HTML Tables:
HTML tables are used to display data in a structured format, consisting of rows and columns. They are
particularly useful for presenting information that is best understood when organized in a grid-like layout,
such as financial data, schedules, or comparison charts. While CSS is now the preferred method for layout,
HTML tables remain a valuable tool for displaying tabular data.
Basic Table Structure:
The foundation of an HTML table lies in the following elements:
▪ <table>: This is the root element that defines the entire table.
▪ <tr>: Represents a table row. Each <tr> element contains one or more <td> or <th> elements.
▪ <td>: Defines a standard data cell within a table row. It contains the actual data to be displayed.
▪ <th>: Defines a header cell within a table row. Header cells are typically used to label the columns
or rows and are often displayed in bold text.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th> Name Age City
</tr>
John Doe 30 New York
<tr>
<td>John Doe</td> Jane Smith 25 London
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</table>
Table Attributes:
HTML tables offer several attributes to control their appearance and behavior. While many of these
attributes have been superseded by CSS, understanding them can be helpful when working with older code
or when quick styling is needed.
P PAVANI ,MCA 10
border: Specifies the width of the table border. A value of "1" adds a basic border. Using CSS is the preferred
method for styling borders.
cell spacing: Defines the space between the cells in a table. This attribute is deprecated in HTML5 and should
be replaced with CSS properties like border-spacing.
cellpadding: Defines the space between the cell content and the cell border. This attribute is also deprecated
and should be replaced with CSS padding.
width: Sets the width of the table. Can be specified in pixels or as a percentage of the containing element.
CSS width property is preferred.
height: Sets the height of the table. Similar to width, CSS height is preferred.
align: Specifies the alignment of the table within its containing element. Values can be "left", "center", or
"right". CSS margin properties are preferred for alignment.
bgcolor: Sets the background color of the table. CSS background-color is the preferred method.
summary: Provides a textual description of the table's content. This is primarily for accessibility purposes.
Ex: <table border="1" cellpadding="5" cellspacing="0" width="50%">
Table Headers, Body, and Footer:
For better semantic structure and styling, HTML provides elements to define the different sections of a table:
▪ <thead>: Defines the table header. Typically contains the <th> elements for column headings.
▪ <tbody>: Defines the main body of the table, containing the data rows.
▪ <tfoot>: Defines the table footer. Can be used for summaries or additional information.
Cell Spanning:
HTML tables allow cells to span multiple rows or columns using the rowspan and colspan attributes.
▪ rowspan: Specifies the number of rows a cell should span.
▪ colspan: Specifies the number of columns a cell should span.
# Different types of Lists in HTML
One of the most effective ways of structuring a web site or its contents is to use lists. List may be for
something as simple as supplying a piece of information or for providing a straightforward index to the site.
HTML offers three ways for specifying lists of information. All lists must contain one or more list elements.
List may contain:
• <ul>- An unordered list [This will list items using plain bullets.]
• <ol>- An ordered list [This will use different schemes of numbers to list your Items]
• <dl>- A definition list [This arranges your items in the same way as they are arranged in a dictionary.
Unordered lists:<ul>
An unordered list is a collection of related items that have no special order or sequence. This list is created
by using HTML <ul> tag. Each item in the list is marked with a bullet.
P PAVANI ,MCA 11
The type Attribute:
You can use type attribute for <ul>tag to specify the type of bullet you like.
By default it is a disc. Following are the possible options:
Ex: <ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>
Ordered Lists:
If you are required to put your items in a numbered list instead of bulleted list then HTML ordered list will
be used. This list is created by using <ol>tag. The numbering starts at one and is incremented by one for each
successive ordered list element tagged with<li>.
The type Attribute: you can use type attribute for <ol>tag to specify the type of numbering you like. By
default it is a number. Following are the possible options:
Ex :<ol type=”1” start=”4”>- Default case numerals.
<ol type=” I”>- Upper case roman numerals.
<ol type=”I”>- Lower case Roman Numerals.
<ol type=”a”>- Lower case Letters.
<ol type=”A”>- Upper case letters.
Definition Lists: HTML and XHTML support a list style which is called definition lists where entries are listed
like in a dictionary or encyclopedia. The definition list is the ideal way to present a glosssry , list of terms, or
other name/value list.
Definition list makes use of following three tags.
• <dl>- Defines the start of the list
• <dt>- A term
• <dd>- Term definition
• </dl>- Defines the end of the list
Program:
<html>
<head><title> List Example page </title></head>
<body>
<h2 color=”red”> Course Details</h2>
<ol type=”I” start=”4”>
<li>Web Technologies</li>
P PAVANI ,MCA 12
<li>C,C++ languages </li>
<li>Java </li>
<li>Dot Net<li>
</ol>
<hr>
<h2 color=”green”>Dot Net Technologies concepts<h2>
<ul type=”circle”>
<li>C#.Net language </li>
<li>[Link] Web application development Technology </li>
<li>[Link] language </li>
</ul>
<hr>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language </dd>
<dt><b>HTTP <b></dt>
<dd>This stands for Hyper Text Transfer Protocol </dd>
</dl>
</body>
</html>
# Blocks In HTML:
In HTML, elements are categorized as either block-level or inline elements. Block-level elements are those
that:
▪ Occupy the full width available to them: By default, they stretch to fill the entire width of their parent
container.
▪ Always start on a new line: They create a line break before and after the element, effectively pushing
the next element onto a new line.
▪ Can contain other block-level and inline elements: They act as containers for other HTML elements.
▪ Respect width and height properties: You can explicitly set the width and height of a block-level
element using CSS.
▪ Respect margin and padding properties: You can control the spacing around and within block-level
elements using CSS margin and padding properties.
Common Block-Level Elements:
P PAVANI ,MCA 13
Here are some of the most commonly used block-level elements in HTML:
<div> (Division): A generic container element used to group other elements together. It has no semantic
meaning on its own but is often used for styling and layout purposes.
Example: <div>
<h1>Heading</h1>
<p>This is a paragraph inside a div.</p>
</div>
<p> (Paragraph): Represents a paragraph of text.
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
<span> tag: The HTML <span> is an inline element and it can be used to group inline elements
in an HTML document. This tag also does not provide any visual change on the block but has
more meaning when it is used with CSS. The difference between the <span> tag and the <div>
tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-
level elements.
# Symbols In HTML
HTML provides several ways to include special characters and symbols that are not readily available on a
standard keyboard. These methods ensure that symbols are displayed correctly across different browsers
and operating systems. The primary methods are:
HTML Entities: Named representations of characters (e.g., © for the copyright symbol).
Numeric Character References: Represent characters using their Unicode code point in decimal or
hexadecimal format (e.g., © or © for the copyright symbol).
Unicode Characters: Directly embedding Unicode characters in the HTML document (e.g., ©).
Reserved Characters (Must be Escaped):
Symbol Entity Name Numeric Code Description
< < < Less than
> > > Greater than
& & & Ampersand
" " " Double quote
' ' ' Single quote
Mathematical Symbols:
Symbol Entity Name Description
± ± Plus-minus
× × Multiplication sign
÷ ÷ Division sign
P PAVANI ,MCA 14
Symbol Entity Name Description
≤ ≤ Less than or equal to
≥ ≥ Greater than or equal
Currency Symbols:
Symbol Entity Name Description
₹ ₹ Indian Rupee
$ $ Dollar
€ € Euro
£ £ British Pound
¥ ¥ Japanese Yen
# Embedding Multimedia content:
Embedding multimedia content, such as images, audio, and video, into HTML documents, HTML provides
different elements and attributes .
Embedding Images
Images are a fundamental part of web design, enhancing the visual appeal and conveying information
effectively. The <img> element is used to embed images in HTML.
Basic Syntax:
<img src="path/to/[Link]" alt="Description of the image">
src attribute: Specifies the URL or path to the image file.
alt attribute: Provides alternative text for the image, which is displayed if the image cannot be loaded or for
users with screen readers. The alt attribute is crucial for accessibility and SEO.
Image Formats:
Common image formats supported by web browsers include:
▪ JPEG/JPG: Suitable for photographs and images with complex colors.
▪ PNG: Ideal for images with transparency and sharp lines, such as logos and icons.
▪ GIF: Supports animation and is suitable for simple graphics.
▪ SVG: A vector-based format that scales without losing quality, making it perfect for logos and icons.
▪ WebP: A modern image format that provides superior compression and quality compared to JPEG
and PNG.
Embedding Audio
The <audio> element is used to embed audio files in HTML.
Basic Syntax:
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/[Link]" type="audio/ogg">
P PAVANI ,MCA 15
Your browser does not support the audio element.
</audio>
Embedding Video
The <video> element is used to embed video files in HTML.
Basic Syntax:
<video controls width="640" height="360">
<source src="path/to/video.mp4" type="video/mp4">
<source src="path/to/[Link]" type="video/webm">
Your browser does not support the video element.
</video>
controls attribute: Displays video controls (play, pause, volume, fullscreen, etc.).
width and height attributes: Specify the width and height of the video player.
<source> element: Specifies different video sources in various formats. The browser will use the first format
it supports.
type attribute: Specifies the MIME type of the video file.
Fallback text: Displayed if the browser does not support the <video> element.
# Forms in HTML:
HTML forms are essential for collecting data from users on websites. They provide a structured way for
users to enter information, such as their name, email address, password, and other details. This data can
then be processed by a server-side script to perform actions like creating an account, submitting an order,
or sending a message.
The <form> element:
The foundation of any HTML form is the <form> element. This element acts as a container for all the form
controls, such as text fields, buttons, and checkboxes.
<form action="/submit" method="post">
<!-- Form controls go here -->
</form>
action attribute: Specifies the URL where the form data will be sent when the form is submitted.
method attribute: Defines the HTTP method used to submit the form data. Common values are get and post.
get: Appends the form data to the URL. Suitable for small amounts of data and non-sensitive information.
post: Sends the form data in the HTTP request body. Suitable for larger amounts of data and sensitive
information.
P PAVANI ,MCA 16
Form Controls:
Form controls are the interactive elements that users interact with to enter data. HTML provides various
types of form controls, each designed for specific input purposes.
<input> element:
The <input> element is the most versatile form control, used for various types of input fields. The type
attribute determines the specific type of input field.
Syntax: <input type=” “ id=” “ name=” “>
Type=”text”: Creates a single-line text field for entering text.
Ex: <label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
type="password":
Creates a text field where the entered characters are masked (usually with asterisks).
Ex: <label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
type="email":
Creates a text field specifically for entering email addresses. Browsers often provide validation to ensure
the input is in a valid email format.
Ex: <label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
type="number":
Creates a field for entering numbers. You can use the min, max, and step attributes to control the allowed
range and increment.
Ex: <label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120"><br><br>
type="radio":
Creates a set of radio buttons, allowing the user to select only one option from a group. Radio buttons within
the same group must have the same name attribute.
EX: <p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
P PAVANI ,MCA 17
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br><br>
Type="checkbox": Creates a checkbox that the user can check or uncheck.
Ex: <p>Interests:</p>
<input type="checkbox" id="coding" name="interests" value="coding">
<textarea> element:
The <textarea> element creates a multi-line text input field, suitable for entering larger amounts of text.
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50">
</textarea><br><br>
rows attribute: Specifies the visible height of the text area in lines.
cols attribute: Specifies the visible width of the text area in characters.
<select> element:
he <select> element creates a dropdown list, allowing the user to select one option from a list of predefined
options.
<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>
<option value="australia">Australia</option>
</select><br><br>
<option> element: Represents each option in the dropdown list. The value attribute specifies the value that
will be submitted with the form.
Labels:
The <label> element provides a user-friendly way to associate a text label with a form control. Using labels
improves accessibility and makes it easier for users to understand the purpose of each form control.
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
The for attribute of the <label> element should match the id attribute of the associated form control.
P PAVANI ,MCA 18
