Scribd
Upload
7 views

Unit-2 Web Application Development

This document covers web application development focusing on HTML page layout, semantic elements, and responsive design. It explains the use of layout elements like <div> and <span>, the importance of semantic elements for accessibility and SEO, and various CSS positioning methods. Additionally, it discusses embedding media, creating image maps, and responsive design techniques to ensure web pages function well across different devices.

Uploaded by

roshan46g
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Unit-2 Web Application Development

This document covers web application development focusing on HTML page layout, semantic elements, and responsive design. It explains the use of layout elements like <div> and <span>, the importance of semantic elements for accessibility and SEO, and various CSS positioning methods. Additionally, it discusses embedding media, creating image maps, and responsive design techniques to ensure web pages function well across different devices.

Uploaded by

roshan46g
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

UNIT-2

WEB APPLICATION DEVELOPMENT

HTML PAGE LAYOUT: USING LAYOUT ELEMENTS


Layout elements are used to organize and structure the content visually on a webpage, typically
focusing on how elements are positioned rather than their meaning or purpose. Examples:
• <div>: A generic container for grouping and styling content.
• <span>: An inline container for styling or grouping text.
Use Cases:
• Creating custom layouts and structures, such as grids or sections.
• Adding styling hooks with CSS classes and IDs.
Web page layout is the most important part to keep in mind while creating a website so that our
website can appear professional with a great look. You can also use CSS and JAVASCRIPT
based frameworks for creating layouts for responsive and dynamic website designing.

SEMANTIC ELEMENTS
Semantic elements clearly define their purpose and meaning in the structure of a document,
improving readability and accessibility.
➢ Characteristics:
• Semantic: Provides meaning to the content for both developers and assistive
technologies (e.g., screen readers).
• Helps improve search engine optimization (SEO) by better structuring the content.
• Enhances code readability and maintainability.
➢ Use Cases:
• Defining the logical structure of a webpage.
• Enhancing accessibility and SEO.

Examples:
• <header>: Represents the header section of a document or a section.
• <footer>: Represents the footer section of a document or a section.
• <article>: Represents a self-contained, independent piece of content.
• <section>: Defines a thematic grouping of content.
• <aside>: Represents content related to the main content (like a sidebar).
• <nav>: Represents navigation links.
• <main>: Represents the main content of a document.
CODING EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Elements Example</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main Content -->


<main>
<section id="home">
<h2>Welcome</h2>
<p>This is the home section of the website.</p>
</section>

<section id="about">
<h2>About Us</h2>
<article>
<h3>Our Mission</h3>
<p>We aim to create meaningful content for our users.</p>
</article>
</section>
</main>

<!-- Sidebar Content -->


<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#blog">Blog</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
</aside>
<!-- Footer Section -->
<footer>
<p>&copy; 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>

CREATING, POSITIONING AND FORMATTING DIVISIONS


CSS positioning defines how elements are placed within a web page. It allows you to control
the layout, stacking order, and alignment of elements. The position property specifies the type
of positioning method used for an element (static, relative, fixed, absolute or sticky).
Types of Positioning
1. Static Positioning
2. Fixed Positioning
3. Absolute Positioning
4. Relative Positioning
5. Sticky Positioning
1.Static Positioning
The default positioning for every HTML element. The element appears in the normal document
flow.
Example
<div style="position: static;">Static Position</div>
2. Relative Positioning
The element remains in the normal document flow but can be offset from its original position
using top, right, bottom, and left. It does not affect other elements' positioning.
Example
<div style="position: relative; top: 20px; left: 10px;">Relative Position</div>
3. Absolute Positioning
The element is removed from the normal document flow and positioned relative to its nearest
positioned ancestor (an element with position: relative, absolute, or fixed). If no ancestor is
positioned, it defaults to the <html> element.
Example
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;">Absolute Position</div>
</div>
4. Fixed Positioning
The element is removed from the document flow and positioned relative to the browser
window. It does not move when scrolling the page.
Example
<div style="position: fixed; top: 0; left: 0;">Fixed Position</div>

6. Sticky Positioning
This positioning combines features of position: relative and position: fixed. The element is
treated as position: relative until it reaches a specified threshold, then it becomes position:
fixed.
Example
<div style="position: sticky; top: 10px;">Sticky Position</div>

FLOATING DIVISIONS NEXT TO EACH OTHER


Floating three div elements side by side using CSS means aligning them horizontally in a row.
This is done by applying float: left; to each div, which moves them to the left of the parent
container, allowing them to sit next to each other.
Using float property
Using the float property, you can align elements horizontally by applying float: left; or float:
right; to each element. This causes the elements to float next to each other in a row, allowing
them to stack side by side within the container.
Using display property
Using the display property, you can align elements side by side by setting display: flex; or
display: inline-block; on the parent container. flex creates a flexible row layout, while inline-
block places elements inline, allowing them to sit horizontally next to each other.
CODING EXAMPLE
<html>
<head>
<style>
#left{
float:left;
width:25%;
height:500px;
background:ORANGE;
}
#middle{
float:left;
width:50%;
height:500px;
background:WHITE;
}
#right{
float:left;
width:25%;
height:500px;
background:GREEN;
}
</style></head>
<body bgcolor="lightblue">

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>

RESPONSIVE WEB DESIGN


Responsive Web Design ensures that web pages look good and function well on devices of all
sizes (desktops, tablets, and mobile phones). It uses flexible layouts, media queries, and
responsive images to adjust the layout based on the screen size.
Key Features of Responsive Design
1. Flexible Layouts: Use percentage-based widths so elements resize with the screen.
2. Media Queries: Apply different styles depending on screen size.
3. Responsive Images: Ensure images scale within their containers.
4. Mobile-First Design: Prioritize small screens first, then add styles for larger screens
HTML Viewport meta tag for Responsive Web Design
The HTML viewport is the visible area of the screen that users see. It changes depending on
the device being used. With this approach, we set the width of web pages to match the
available screen width, making it 100%. This helps content adapt and look good on any
device, ensuring a responsive layout.
Syntax

<meta name="viewport" content= "width=device-width, initial-scale=1.0">

Example

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Design</title>

<style>

body { font-family: Arial, sans-serif; margin: 0; padding: 0; }

.box { width: 100%; padding: 20px; text-align: center; background: lightblue; }

</style>

</head>

<body>

<div class="box">Responsive Box</div>

</body>

</html>

Responsive Images

Responsive images play a key role in responsive websites. These are images that can adjust
their size, getting bigger or smaller, based on the width of the browser.

Responsive Texts

In this method, we set font sizes using %, vw, vh, etc. This ensures that text sizes are
responsive, adjusting automatically until reaching a certain limit. Once the limit is reached,
the content is justified to fit within the available width.

Using flexbox property

In this approach, we will use CSS display property to make the page responsive. Display
layouts like flexbox, inline, blocks, and grids can be used to make the design responsive.

Syntax

.container{
display:flexbox;
}
INLINE FRAMES
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML
<iframe> tag defines an inline frame, hence it is also called as an Inline frame.An HTML iframe
embeds another document within the current HTML document in the rectangular region.The
webpage content and iframe contents can interact with each other using JavaScript.
Syntax
<iframe src="URL"></iframe>
Here, "src" attribute specifies the web address (URL) of the inline frame page.
Set Width and Height of iframe
You can set the width and height of iframe by using "width" and "height" attributes. By default,
the attributes values are specified in pixels but you can also set them in percent. i.e. 50%, 60%
etc.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
<iframe src="form.html" height="300" width="400"></iframe>
</body>
</html>

CREATING GRAPHICS BASED ON NAVIGATIONBAR


Text hyperlinks are clear and unambiguous, but not all that attractive. We might prefer to create
a navigation bar that uses buttons or other graphics instead of text links.
HTML MEDIA, TABLES AND FORMS: EMBEDDING IMAGES
HTML Media refers to content types such as images, audio, and video that can be embedded
into a webpage to make it more engaging and interactive.

Types of HTML Media:


1. Images
2. Audio
3. Video
4. Inline Frames
EMBEDDING IMAGES IN HTML
Images are embedded in HTML using <img> tag. The <img> tag is self-closing because they
don't have a closing tag. The src attribute is the required attributes in the <img> tag, it helps to
specify the source URL. The alt attribute provides the alternative text to an image. If the image
does not load up then this message will be displayed.
<img src="example.jpg" alt="An example image" width="300">

EMBEDDING VIDEO ON WEB PAGE


Embedding Video
The <video> tag helps us to embed the required video into the webpage. The width and height
properties determine the size of the video. The control property adds playback control like play,
pause, volume. etc. The <source> tag specifies the specific video file and the type attribute is
used to specify the MIME (Multipurpose Internet Mail Extensions) type. If the browser does
not support a video tag then the content present inside will be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedding video in HTML</title>
</head>
<body>
<video width="500px" height="300px" controls>
<source src="Small_movie.mp4" type="video/mp4">
<source src="Small_movie.webm" type="video/webm">
Your browser does not support this video tag.
</video>
</body>
</html>

Embedding Audio
The <audio> tag, helps us to embed the required audio into the webpage. The control property
adds playback control like play, pause, volume. etc. The <source> tag specifies the specific
audio file and the type attribute is used to specify the MIME (Multipurpose Internet Mail
Extensions) type. If the browser does not support video a tag then the content present inside
will be displayed.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Embedding audio in HTML</title>
</head>

<body>
<audio controls>
<source src="Small_audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>

</html>
IMAGEMAPS IN HTML
HTML image maps are defined by the <map> tag. An image map enables specific areas of an
image to be clickable, acting as links to different destinations. This technique is useful for
creating complex navigation systems or interactive graphics on a webpage.
By defining various shapes (rectangles, circles, and polygons) within an image, each with its
own associated link, developers can create dynamic and interactive visual content that enhances
user engagement and navigation.
TYPES OF IMAGEMAPS
1. Client-Side Image Map
• The image map logic is handled in the browser using HTML.
• Defined using the <map> and <area> tags.
• Each <area> specifies a shape (rectangle, circle, or polygon) and links to a URL.
• Lightweight and doesn't require server processing.
2. Server-Side Image Map
• The map logic is processed on the server.
• The entire image is submitted to the server, and coordinates of the clicked point are
sent.
• Defined using the <input type="image"> element.
• Used when server processing is needed to decide the destination.
<form action="server-script.php" method="post">
<input type="image" src="image.jpg" name="mapImage">
</form>

Use of Image Maps

It is useful to create interactive graphics by defining clickable regions within an image. This
allows users to interact with different image parts, triggering specific actions or links.

TAGS USED TO IMPLEMENT IMAGEMAPS IN HTML


The HTML tags used for maps are <img>, <map>, and <area>. The <map> tag defines an
image map, which is an image with clickable areas. The <area> tag defines the clickable areas
within the image map.
• <img>: Defines an image
• <map>: Defines an image map
• <area>: Defines a clickable area within an image map
To create an image map, you can:
1. Use the <map> tag to define the image map
2. Use the <img> tag to define the image
3. Use the <area> tag to define the clickable areas within the image map
4. Associate the <map> tag's name attribute with the <img> tag's usemap attribute
Each <area> tag defines a shape (rectangle, circle, or polygon) and specifies the coordinates
for the clickable area.
HTML <map> Tag

The <map> tag in HTML is used to define an image map. It is an image with clickable areas
that link to different destinations or perform specific actions. The <map> tag is typically used
in combination with the <img> tag and <area> tags to create these interactive regions. Each
<area> tag within a <map> defines a shape (rectangle, circle, or polygon) and specifies the
coordinates for the clickable area.
Syntax
<img src="image.jpg" usemap="#mapname" alt="Descriptive Image">

<map name="mapname">
<area shape="rect" coords="x1,y1,x2,y2"
href="link1.html" alt="Rectangle Area">
<area shape="circle" coords="x,y,radius"
href="link2.html" alt="Circle Area">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..."
href="link3.html" alt="Polygon Area">
</map>
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Imagemap Example</title>
</head>
<body>
<h1>Interactive Image with Imagemap</h1>

<!-- Image with an associated imagemap -->


<img src="World_Map.jpg" alt="World Map" usemap="#worldmap" width="600">

<!-- Map definition -->


<map name="worldmap">
<!-- Rectangle: Links to Google -->
<area shape="rect" coords="50,50,150,150" href="https://www.google.com"
alt="Google">

<!-- Circle: Links to Bing -->


<area shape="circle" coords="300,150,50" href="https://www.bing.com" alt="Bing">

<!-- Polygon: Links to Yahoo -->


<area shape="poly" coords="400,200,500,250,450,300" href="https://www.yahoo.com"
alt="Yahoo">
</map>

<p>Click the areas on the image to navigate to different websites!</p>


</body>
</html>

ADDING FAVICON
An HTML favicon (or favorite icon) is a small image or icon that represents a website, typically
shown in the browser tab, bookmarks, and shortcuts.
Need of favicons in HTML
• Brand Recognition
• A favicon helps users quickly identify a website among multiple open tabs or
bookmarks.
• It reinforces brand identity by displaying a recognizable logo or symbol.
• Improved User Experience
• Users can easily spot a specific tab, especially when several tabs are open.
• Enhances website professionalism and trustworthiness.
• Bookmark Visibility
• Favicons appear next to the site name in bookmarks and browser history, making the
site visually distinct.
• SEO and Accessibility
• While it doesn't directly affect search rankings, a favicon can improve user engagement,
indirectly benefiting SEO.
• Accessible icons make it easier for users to navigate and revisit sites.
• Browser Functionality
• Favicons are used in browser tasks like pinned tabs or progressive web apps (PWAs),
enhancing usability.
• Visual Appeal
• Adds a polished, complete look to the website.
• A missing favicon often leaves a generic or blank icon, detracting from the site’s
aesthetic.
• Favicon File Format Support
• ICO
• PNG
• GIF
• JPEG
• SVG
<html>
<head>
<title>HTML FAVICONS</title>
<link rel="icon" type="image/x-icon" href="google.png">
</head>
<body bgcolor="pink">
<h1><marquee direction="right">WELCOME TO GOOGLE</marquee></H1>
</BODY>
</HTML>

TABLES IN HTML
HTML Tables allow you to arrange data into rows and columns on a web page, making it easy
to display information like schedules, statistics, or other structured data in a clear format.There
can be many columns in a row.We can create a table to display data in tabular form, using
<table> element, with the help of <tr> , <td>, and <th> elements.In each table, table row is
defined by <tr> tag, table header is defined by <th>, and table data is defined by <td>
tags.HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page .
HTML Table Tags

SIMPLE CODE EXAMPLE


<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Sheetal</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Gulati</td>
<td>32</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</BODY>
</HTML>

TABLE DIMENSION

<table style="width: 100%; height: 200px;" border="1">


<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

MERGING TABLE CELLS

Rowspan and Colspan are attributes used in HTML tables to merge cells, either vertically or
horizontally, to create a more organized layout. The rowspan attribute is used to merge multiple
rows into a single cell.Rowspan is useful when a cell's content spans vertically across multiple
rows.The colspan attribute is used to merge multiple columns into a single cell.Colspan is
useful when a cell's content spans horizontally across multiple columns.
<table style="border-collapse:collapse"; border="1" >
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td rowspan="2">John</td>
<td>Age</td>
<td>25</td>
</tr>
<tr>
<td>Role</td>
<td>Developer</td>
</tr>
</table>
FORMATTING TABLES: APPLYING BORDERS, BACKGROUND AND
FOREGROUND FILLS

<table border="1" style="border-collapse: collapse;">


<tr style="background-color: lightblue;">
<th style="color: white;">Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td style="background-color: lightgreen;">25</td>
</tr>
</table>

CHANGING CELL PADDING, SPACING AND ALIGNMENT


<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th style="text-align: center;">Name</th>
<th style="text-align: right;">Age</th>
</tr>
<tr>
<td style="vertical-align: top;">John</td>
<td>25</td>
</tr>
</table>

COLLECTING USER INPUT WITH HTML FORMS


HTML Forms use the <form> tag to collect user input through various interactive controls.
These controls range from text fields, numeric inputs, and email fields to password fields,
checkboxes, radio buttons, and submit buttons.
Syntax
<form>
<!--form elements-->
</form>
Form Elements
The HTML <form> comprises several elements, each serving a unique purpose. For instance,
the <label> element defines labels for other <form> elements. On the other hand, the <input>
element is versatile and can be used to capture various types of input data such as text,
password, email, and more simply by altering its type attribute.
1.<form>
• Defines the structure of a form and contains form elements.
• Example: <form action="/submit" method="post"> ... </form>
2.<input>
• Allows user input; supports various types like text, password, checkbox, etc.
• Example: <input type="text" name="username">
3.<textarea>
• Used for multiline text input.
• Example: <textarea name="comments"></textarea>
4. <select>
• Creates a dropdown list with options.
• Example:
<select name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
5.<option>
• Defines items in a <select> dropdown.
• Example: <option value="india">India</option>
6. <button>
• Creates a clickable button.
• Example: <button type="submit">Submit</button>
7. <label>
• Adds descriptive text for form controls; improves accessibility.
• Example: <label for="email">Email:</label>
8.<fieldset>
• Groups related form controls within a box.
<fieldset>
<legend>Personal Details</legend>
<input type="text" name="name">
</fieldset>

9.<legend>
• Provides a caption for a <fieldset>.
• Example: <legend>Contact Info</legend>
10.<datalist>
• Provides a list of predefined options for an <input> element.
11. <input type="file">
• Allows users to upload files.
• Example: <input type="file" name="upload">
12. <input type="submit">
• Creates a button to submit the form.
• Example: <input type="submit" value="Submit">

Commonly Used Input Types in HTML Forms


EXAMPLE 1

<!DOCTYPE html>
<html lang="en">

<head>
<title>Html Forms</title>
</head>

<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

EXAMPLE2

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Form</title>
<style>

label
{
display: inline-block;
width: 150px;
display:flex;
}
.checkbox-container
{
display: flex;
white-space: nowrap;
}
.radio-container
{
display: flex; /* Align items horizontally */
align-items: center; /* Align items vertically in the center */
}
</style>

</head>
<body bgcolor="cyan">
<h1>CONTACT US</h1>
<form action="" method="POST">
<!-- Text Input for Name -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br><br>

<!-- Email Input -->


<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required><br><br>
<!--textarea-->

<!--Number-->
<label for="Contact">Contact</label>
<input type="tel" id="number" name="num" min="0" max="9" maxlength="10" required>
<br><br>
<!--Textarea-->
<label for="feedback" >Your Query:</label>
<textarea id="query" name="query" rows="4" cols="50" placeholder="Enter your query
here..." required></textarea><br><br>
<!-- Radio Buttons for Gender -->
<div class="radio-container">
<label for="gender">Gender:</label>

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


<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other1">
<label for="other">Other</label>
</div>
<br><br>

<!-- Checkbox for Agreement -->


<div class="checkbox-container">
<input type="checkbox" id="agree" name="agree" value="yes" required>
<label for="agree">I agree to the terms and conditions</label> </div>
<br>
<!-- Dropdown for Country Selection -->
<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="india">India</option>
</select><br><br>

<!-- Submit Button -->


<input type="submit" value="Submit">
<!--Reset Button-->
<input type="reset" value="Reset">
</form>
</body>
</html>

ADDITIONAL INPUT TYPES IN HTML5


HTML 5 introduces several input types like Date, DateTime, DateTime-local, time, week,
month, email, tel, URL, search, range, color, and number to improve the user experience and
to make the forms more interactive. However, if a browser fails to recognize these new input
types, it will treat them like a normal text box.

<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>HTML5 Form with New Input Types</title>
<style>
label
{
display: inline-block;
width: 150px;
display:flex;
}

</style>
</head>
<body bgcolor="pink">
<h1>HTML5 ADDITIONAL INPUT TYPES</h1>
<form action="" method="POST">
<!-- Date Input -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<!-- Time Input -->
<label for="time">Appointment Time:</label>
<input type="time" id="time" name="time" required><br><br>
<!-- dateTime Input -->
<label for="date">Enter Date-Time : </label>
<input type="datetime" />

<br /><br>

<!-- Date-time local -->


<label for="date">Select Date-Time Local : </label>
<input type="datetime-local" />

<br /><br>
<!-- week Input -->
<label for="time">Select Week : </label>
<input type="week" />
<br>
<br>
<!-- Range Input -->
<label for="age">Age (Select between 18 and 100):</label>
<input type="range" id="age" name="age" min="18" max="100" step="1" value="25"
required><br><br>
<span id="ageValue">25</span> years old<br><br>

<!-- Color Input -->


<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color" value="#ff0000" required><br><br>
<!-- Search Input -->
<label for="search">Enter Search string : </label>
<input type="search" placeholder="search ..." />
<br><br>
<!-- URL Input -->
<label for="url">Enter Url : </label>
<input type="url" placeholder="https://www..." /><br><br>

<!-- Submit Button -->


<input type="submit" value="Submit">
</form>

<script>
// Update age value dynamically based on the range slider
document.getElementById('age').addEventListener('input', function() {
document.getElementById('ageValue').textContent = this.value;
});
</script>
</body>
</html>

You might also like