Scribd
Upload
7 views

web design unit 2

This document provides an overview of using HTML for forms and images in web design, detailing various input elements and their attributes. It emphasizes best practices for form design and efficient image usage, including optimization techniques and file formats. Additionally, it covers graphics technologies like SVG, PNG, and Canvas API for enhancing web page aesthetics and user experience.

Uploaded by

ragavihr131211
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

web design unit 2

This document provides an overview of using HTML for forms and images in web design, detailing various input elements and their attributes. It emphasizes best practices for form design and efficient image usage, including optimization techniques and file formats. Additionally, it covers graphics technologies like SVG, PNG, and Canvas API for enhancing web page aesthetics and user experience.

Uploaded by

ragavihr131211
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 37

Unit II

Forms & Images Using Html: Graphics:Introduction-How to work efficiently


with images inweb pages, image maps, GIF animation, addingmultimedia, data
collection with html forms textbox,password, list box, combo box, text area, tools
for building web page front page.

Forms
Forms Design is used to create interactive forms on web pages that allow users to
input and submit data to a server for processing.
 The <form> tag defines the form structure.
 Form elements like <input>, <button>, and <select> are used to collect data.
 HTML forms are essential for tasks such as login, registration, and surveys.

<html>

<body>

<form action="/submit-form" method="post">

<label for="name">Name:</label>

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

<br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<br><br>

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="30"></textarea>

<br><br>

<button type="submit">Submit</button>

</form>

</body>

</html>
 <form> defines a section for collecting user inputs with attributes
specifying where (action) and how (method) to send the data.
 <label>, <input>, and <button> create a simple field for text input and a
button to submit the form.
 Input Elements in HTML Forms
 Input elements are the building blocks of HTML forms, allowing users
to enter and submit various types of data. Common input elements
include:
 1. Text Field: Allows the user to input single-line text. It is created
using the <input> element with type=”text”
<!DOCTYPE html>
<html>

<body>
<h3>Example of Text Field</h3>
<form>
<label for="email">Email ID:</label><br>
<input type="text" name="email" id="email"><br>
</form>
</body>

</html>
 The <input type=”text”> element creates a single-line text field for user
input.
 The <label> element provides a descriptive label for the text field,
enhancing accessibility and usability.
2. Number Field: This field accepts numeric input. It is created using the
<input> element with type=”number”.
<html>
<body>
<form>
<label for="age">Age:</label><br>
<input type="number" name="age" id="age">
</form>
</body>
</html>
 The <input type=”number”> element creates a numeric input field,
allowing users to enter their age.
 The <label> element provides a descriptive label (“Age:”) for the input
field, enhancing accessibility and usability.
3. Password Field: A password field masks the user’s input (e.g.,
asterisks or dots). It is created using the <input> element with
type=”password”.

<html>

<body>

<form>

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

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

</form>

</body>

</html>

 The <input type=”password”> element creates a password input field


where user entries are masked, enhancing privacy during data entry.
4. Radio Buttons: Used when the user needs to select one option from a
list. Radio buttons are created using the <input> element with type=”radio”.
<html>

<body>

<form>

<label>Select Gender:</label><br>

<input type="radio" name="gender"

id="male" value="Male">

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

<input type="radio" name="gender"

id="female" value="Female">

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

</form>
</body>

</html>

 The <input type=”radio”> elements create radio buttons, allowing users to


select one option from the provided choices (e.g., “Male” or “Female”).
 Each <label> element is associated with a corresponding radio button,
providing descriptive text and enhancing accessibility by enabling users to
click on the label to select the associated option.
Checkboxes: Used to allow users to select one or more options from a list.
Checkboxes are created using the <input> element with type=”checkbox”.
<html>

<body>

<form>

<b>Select Subjects:</b><br>

<input type="checkbox" name="subject"

id="maths" value="Maths">

<label for="maths">Maths</label><br>

<input type="checkbox" name="subject"

id="science" value="Science">

<label for="science">Science</label><br>

<input type="checkbox" name="subject"

id="english" value="English">

<label for="english">English</label>

</form>

</body>

</html>

File Select Box: Allows users to select a file from their local device and
upload it. It is created using the <input> element with type=”file”.
<html>
<body>

<form>

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

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

</form>

</body>

</html>

 The <input type=”file”> element creates a file upload field, allowing users
to select a file from their device for submission.
 The <label> element provides a descriptive label (“Upload a file:”) for the
file input field, enhancing accessibility and usability.
Select Boxes: Used to present a dropdown list of options. Select boxes are
created using the <select> element, and the individual options are defined
using the <option> element.
<html>

<body>

<form>

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

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

<option value="India">India</option>

<option value="Sri Lanka">Sri Lanka</option>

<option value="Australia">Australia</option>

</select>

</form>

</body>

</html>

 The <select> element creates a drop-down list labeled “Country,” allowing


users to choose one option from the provided list.
 Each <option> element within the <select> defines an individual choice in
the drop-down menu, such as “India,” “Sri Lanka,” and “Australia.”
9. Reset And Submit Buttons: The Submit Button allows the user to send
the form data to the web server. The Reset Button is used to reset the form
data and use the default values.
<html>

<body>

<form action="test.php" method="post" id="users">

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

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

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

<input type="reset" value="Reset">

</form>

</body>

</html>

 The <input type=”submit”> element creates a button that, when clicked,


submits the form data to the server.
 The <input type=”reset”> element creates a button that, when clicked,
resets all form fields to their default values

Best Practices for HTML Form Design


 Use Semantic HTML5 Elements: Utilize <form>, <fieldset>, <legend>,
and <label> to enhance form structure and accessibility.
 Keep Forms Concise: Limit the number of fields to essential information
to prevent user overwhelm.
 Provide Clear Labels and Instructions: Use descriptive labels and
placeholders to guide users in completing the form accurately.
 Implement Inline Validation: Provide real-time feedback to users as they
complete the form to reduce errors and improve user experience.

The HTML <img> tag is used to embed an image in a web page.


Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

 Syntax
 <img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute


The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:

Width and Height, or Style?


The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5


Icon" style="width:128px;height:128px;">

</body>
</html>

Graphics

Graphics are representations used to make web-page or applications


visually appealing and also for improving user experience and user
interaction. Some examples of graphics are photographs, flowcharts,
bar graphs, maps, engineering drawings, constructional blueprints, etc.
Usually, the following technologies are used in web graphics with
HTML5 Canvas API, WebCGM, CSS, SVG, PNG, JPG, etc.

Scalable vector graphics(SVG)


 These are images created by a markup language that are reusable,
simple, high-quality standalone images that can be exported and imported
as well.
 They are cross-browser friendly and can be used both on the client-side
and server-side of the application.
 They can be manipulated to create animations, hybrid images, etc by
editing the markup language or by editing using a stylesheet.
 Files come with a .svg extension.
<!DOCTYPE html>

<body>

<svg width="550" height="50" viewBox="0 0 550 50"

fill="green" xmlns="http://www.w3.org/2000/svg">

<text x="0" y="20">I love GeeksforGeeks</text>

<svg>

</body>

</html>

Output:

PNG (Portable Network Graphics)


 They are portable, static and lossless with proper indexed-color control.
 Files come with a .png or .PNG extension.
 Cross-browser friendly and have streaming capabilities.
Example:
 HTML

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

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

</head>

<body>

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20210729182205/
Component1-300x258.png" >

</img>

</body>

</html>

Output:

JPG or JPEG (Joint Photographic Experts Group)


 Lossy compressed with an adjustable degree of compression.
 Used mainly with digital photography and can achieve a compression of
10:1.
 Files come with a .jpg or jpeg extension.

Example
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

</head>

<body>

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20210729183033/Component2-
300x189.jpg">

</img>

</body>

</html>

OutPut:

CSS (Cascading Style Sheets):


 This is a type of language mainly used for designing and HTML and SVG
elements by using code.
 They are scalable and give more space for creativity to the user.
 Files usually come with a .css extension.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<link rel="stylesheet" href="styles.css"></link>

</head>

<body>

<div class="star"></div>

</body>

</html>

styles.css: The following code is used in the above HTML file.


body {
position: relative;
}

.star {
position: absolute;
width: 423px;
height: 384px;
left: 456.7px;
top: 80.34px;
background: #346d33;
transform: rotate(18.69deg);
}
Output:

Canvas API
 Has no DOM and uses vector based methods to create objects, graphics
and shapes.
 Canvas API applications can be standalone or integrated with HTML or
SVG.
 Widely used for games
 Client-side scripting with native modern browser support.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

</head>

<body>

<canvas id="canvas1" width="400" height="200"

style="border:2px solid green; border-radius:35px">


Your browser does not support the canvas element.

</canvas>

</body></html>

OUTPUT:

WebCGM (Web Computer Graphics Metafile)


 Very similar to SVG when it comes to graphical features.
 CGM is the ISO standard for vector image definition.
 Used in aeronautics, automotive engineering, technical illustration, etc.
 They are not widely used traditionally. More modern approaches have
been to use SVGs, Canvas, etc.
To work efficiently with images in web pages, you can optimize images, use the right
file formats, and implement lazy loading
 Compress images
Use image compressors to reduce the file size of your images without
compromising quality.
 Resize images
Resize images before exporting them.
 Use the right file format
Use the right file format for the image, such as JPG, PNG, GIF, SVG, or
WebP.
 Use image editors
Use image editors to adjust the size, resolution, and appearance of your
images.
Use the right file format
 Use SVGs
Scalable Vector Graphics (SVGs) are a good choice for logos, icons, text,
and simple images. SVGs are automatically scalable and can be smaller in
file size than other formats.
 Use the right dimensions
Use the correct dimensions for your images so they fit the layout of your web
page.
Implement lazy loading
 Use the "loading" attribute set to "lazy" in HTML to tell the browser to load
images only when they are visible on the page. This can improve page
loading performance.
Use a content delivery network (CDN)
 Host your images on a CDN to increase page load speed. A CDN is a network
of servers that host identical copies of your files.
HTML Images – FAQs
1. Use the <img> tag with the src attribute. ...
2. The alt attribute provides alternative text for an image if it cannot be displayed
and improves accessibility by describing the image to screen readers.
3. Use the width and height attributes. ...
4. The src (source) attribute specifies the path to the image file.
Images are an important part of web design, Images can easily explain what
text cannot. Using images in an efficient manner improves the UI design,
users can understand it faster but it will affect webpage performance if not
used efficiently. So in this article, we will understand how to use images in an
efficient way.
How to Use Images Efficiently in Web Design?
Step 1. Choosing right Images
First step of creating an efficient design is choosing right images, if images
are bad then it does'nt matter where they are placed. So how will you choose
right images just keep three things in mind
 Relevance: Images should be relevant to the content of your site. You
should choose images which portray the your message and brand
identity, not distract or confuse the users For example if you have site
related to health and foods, you can show images of different foods or
nutrients but not random images of landscapes.
 Quality: Images should be clear, high quality and not blurry. Images
should not be like cut from between or half. They should also have good
contrast, lighting and colors.
 Size: Image should be of size which would fit properly in web design and
does not look too small big or strange. If the size of image is larger you
can change its dimensions with help of online image resizing tools in few
clicks.
 Format: Images can be in many formats like Webp, JPG, SVG, GIF Png
etc you should use appropriate format images with proper research
because each format have there own advantages and disadvantages.
Step 2. Optimising Image Placement
Now after choosing the right image, its time to optimise the image placement
in your web design. Following aspects should be considered for optimising
image placement.
 Alignment: Images should be aligned properly with other elements of
webpage. There should not be gaps between that would disrupt the
readibitlity of page You can use CSS properties like float, display,
position, margin, padding, and flexbox to control the alignment of your
images.
 Balance: There should be a proper balance between images and text of
webpage. There should not be like lot of images and less text or lot of text
but no images. You should aim for a harmonious and proportional
distribution of visual weight and white space on your web page.
 Hierarchy: The images should be arranged accordingly on page, for ex.
you should place the images which are very important content above in
page while use less important images below. Because showing less
important images which distract users. You can use various techniques
such as proper scaling, colors, shapes and use of animation to create
visual hierarchy of images
Step 3. Enhance the accessibility of Image
If we found right image and right place for it. Then the third step is to make is
easily accessible to users. For you consider following things
 Alt Text: It means alternative text, it is shown in the case the image does
not open or fails to open. It should represent he content of image in form
of text. Its also very good for seo, because it helps understanding the
search engine what the image is about?
 Captions: The images should have captions that provide additional
information or context about the image content to users who can see
them. Captions are also useful for SEO, as they can include keywords
and phrases that relate to your content.
 Fixing problems: You should prevent and fix the errors which are
causing your images fail to open, like sometimes images does not open
because the size of image is too big, sometimes its on server which have
problem.
So this is a small guide for efficient use of images now we will look for what
are benefits of efficient usage of image and what things to avoid.
Benefits of Efficient Placement of Images
 Use of high quality, relevant images at good place on page will grab users
attention in first look and will be memorable for them.
 Clear relevant images clarify concepts when combined with images.
 Good image placement ensures a balanced layout.
 Images enhance storytelling by illustrating concepts or narratives.
Sequential images can guide users through a story or process.
 High-resolution images in the wrong places can slow down your website's
loading time, resulting in a poor user experience and potential loss of
visitors But the good placement do exactly opposite

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below

Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="co
mputer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="pho
ne.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffe
e.htm">
</map>

The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Create Image Map


Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
You must also define some coordinates to be able to place the clickable area
onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels
from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
This is the area that becomes clickable and will send the user to the page
"computer.htm":

Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300
GIF animations

GIF animations are basic animations created by combining images or


frames in a Graphics Interchange Format (GIF) file. They can be used in web
design to create motion design for user interfaces and other elements.

How to create a GIF animation in web design?


1. Use a program like Google Web Designer, Canva, or Adobe Photoshop
2. Select the Animated GIF file type
3. Choose the dimensions of the GIF
4. Customize the design
5. Add animation or effects
6. Preview, download, and share
creating GIF animations
 Consider the goal of the GIF
 Select a key design element
 Choose the number of slides
 Be aware of the different guidelines for each platform

How to use an animated image in HTML page

 Animated images in HTML are an image on a web page that moves. It is


in GIF format i.e. Graphics Interchange Format file.
 We need to use the <image> tag with the src attribute to add an
animated image in HTML. The src attribute adds the URL of the image
(file destination).
 Also, we can set the height and width of the image using
the height and width attribute.
Syntax
<image src=”Animated image”>
Example

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="description" content="meta tag in the web document">


<meta name="keywords" content="HTML,CSS">

<meta name="author" content="lokesh">

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


scale=1.0"> </head>

<body> <p>Adding Animated Images to the web page</p>

<img src="https://tutorialspoint.com/images/html.gif"> </body>


</html>

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can
hear or see, like images, music, sound, videos, records, films, animations, and
more.

Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.

Multimedia files have formats and different extensions


like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats


There are many video formats out
there.

The MP4, WebM, and Ogg formats are


supported by HTML.

The MP4 format is recommended by


YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving


.mpeg Pictures Expert Group. The first
popular video format on the web. Not
supported anymore in HTML.

AVI .avi AVI (Audio Video Interleave).


Developed by Microsoft. Commonly
used in video cameras and TV
hardware. Plays well on Windows
computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video).


Developed by Microsoft. Commonly
used in video cameras and TV
hardware. Plays well on Windows
computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple.


Commonly used in video cameras and
TV hardware. Plays well on Apple
computers, but not in web browsers.

RealVideo .rm RealVideo. Developed by Real Media to


.ram allow video streaming with low
bandwidths. Does not play in web
browsers.

Flash .swf Flash. Developed by Macromedia.


.flv Often requires an extra component
(plug-in) to play in web browsers.

Ogg .ogg Theora Ogg. Developed by the


Xiph.Org Foundation. Supported by
HTML.

WebM .webm WebM. Developed by Mozilla, Opera,


Adobe, and Google. Supported by
HTML.

The HTML <video> Element


To show a video in HTML, use the <video> element:

Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How it Works
The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:

Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML Video Formats


There are three supported video formats: MP4, WebM, and Ogg. The browser
support for the different formats is:

Browser MP4 WebM Ogg

Edge YES YES YES

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES


HTML Video Tags

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as


<video> and <audio>

<track> Defines text tracks in media players

HTML Audio - How It Works


The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

HTML <audio> Autoplay


To start an audio file automatically, use the autoplay attribute:

Example
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Example
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML Forms are used to send data across the web, like
login, signup, search etc. Forms are often used as contact
form to convert information input by a user into
leads. Forms includes many inputs controls like text, password,
file, radio, checkbox etc
The elements used in HTML form are form tag as
parent, input, textarea,, select, button and label.

HTML Form Elements


HTML Form Tag

 Input Tag

 Label

 Input type password

 Input type file

 Radio Buttons

 Checkbox
 Select Dropdown

 Textarea

 Button

 Fieldset

HTML Form Tag


Form Tag defines the form and within this tag, there is action
attribute which tells the form where its contents will be sent when
it is submitted

HTML form can have input elements, checkbox, radio


buttons, submit button and more.A form can also contain select
dropdown, textarea, fieldset, legend, and label elements.

Create HTML Form


form is build inside <form> tag. See the code below

<form action="" method="get" name="enquiry">

/* Content */

</form>

</form>
f we want to create the text box in Html document for inserting the characters by the user on
the web page then we have to follow the steps which are given below. Using these steps,
any user can easily create a text box.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html
file in the text editor in which we want to create the text box.

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Create the Text Box
6. </Title>
7. </Head>
8. <Body>
9. Hello User! <br>
10. </Body>
11. </Html>
Step 2: For creating the text box, firstly we have to define the <form> tag, if not defined in
the code. Now, we have to place the cursor at that point in the <form> tag where we want to
create the text box. And, then we have to type the <input> tag at that point.

1. <form>
2. Student Name:
3. <input >
4. <br> <br>
5. Course:
6. <input >
7. </form>
Step 3: After writing the <input> tag, we have to use its attribute whose name
is type. This attribute specifies what type of data is to be entered. So, to create the text box
we have to give the value "text" in the type attribute.

1. <form>
2. Student Name:
3. <input type="text" name="Name">
4. <br> <br>
5. Course:
6. <input type="text" name="Course">
7. </form>
Step 4: If we want to define the width of the text box, then we can define it with the help of
the size attribute.

1. <form>
2. Student Name:
3. <input type="text" name="Name" size="20">
4. <br> <br>
5. Course:
6. <input type="text" name="Course" size="15">
7. </form>
Step 5: And, at last, we have to save the Html file and then run the file in the browser.

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Create the Text Box
6. </Title>
7. </Head>
8. <Body>
9. Hello User! <br>
10. <form>
11. Student Name:
12. <input type="text" name="Name" size="20">
13. <br> <br>
14. Course:
15. <input type="text" name="Course" size="15">
16. </form>
17. </Body>
18. </Html>

HTML <input type=”password”> is used to specify the password field of


the input tag. Password should be served over the HTTPS pages because it
includes the sensitive information of the user.
Note: We can add the <label> tag for improved accessibility.
Syntax
<input type="password">
Example: We are using the HTML <input type=”password”> to create a
password field where characters are masked, enhancing security by hiding
sensitive information like passwords from plain view

<!DOCTYPE html>

<html>

<body>

<h3>HTML input type="password" Example</h3>


<form action="/action_page.php" method="post">

<label for="email">Email:</label>

<input type="email" name="email"

placeholder="Email Address"

required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<br>

<br>

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

<input type="password" name="password"

placeholder="Password" required>

<br>

<br>

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

</form></body>

</html>

Tips for Password Input in HTML


Here are a few tips for using <input type=”password”>:
 Password Input in HTML Forms : Use <input type=”password”> to
collect password information securely in HTML forms. This masks the
entered text for privacy.
 Hide Password in HTML: Password masking is done automatically with
<input type=”password”>, preventing the password from being visible in
plain text and enhancing security.

List Box
The list box is a graphical control element in the HTML document that allows a user to
select one or more options from the list of options. HTML listboxes, otherwise called
dropdown lists or select elements, give a helpful method for introducing a list of choices to
clients on a webpage. They are broadly utilized in forms, permitting clients to select one or
different things from a predefined set of decisions. In this article, we'll investigate the HTML
<select> element and its different attributes, alongside reasonable guides to outline their
use.

Syntax:
To create a list box, use the HTML element <select> which contains two
attributes Name and Size. The Name attribute is used to define the name for calling the list
box, and size attribute is used to specify the numerical value that shows the how many
options it contains.

1. <select Name="Name_of_list_box" Size="Number_of_options">


2. <option> List item 1 </option>
3. <option> List item 2 </option>
4. <option> List item 3 </option>
5. <option> List item N </option>
6. </select>

1. <!DOCTYPE html>
2. <html>
3. <title>
4. Example of List Box
5. </title>
6. <body>
7. Customer Name: <input type="text" Placeholder="Enter the Customer Name"/>
8. <br>
9. <br>
10. <select name="Cars" size="5">
11. <option value="Merceders"> Merceders </option>
12. <option value="BMW"> BMW </option>
13. <option value="Jaguar"> Jaguar </option>
14. <option value="Lamborghini"> Lamborghini </option>
15. <option value="Ferrari"> Ferrari </option>
16. <option value="Ford"> Ford </option>
17. </select>
18. </body>
19. </html>

Combobox HTML
We will discuss the Combobox HTML in this article. The name "Combobox" itself contains
the word "combo" which means combination. So, from its name, a combobox is a
combination of boxes. In HTML, it is the element that we can construct with a combination
of tags such as <select> tag and <option> tag. It is mostly utilized inside forms in HTML. It
is utilized to construct the dropdown list.

Combobox HTML Syntax:


1. <label for="name">Name</label>
2. <input type="text">
3. <select>
4. <option>Option 1</option>
5. <option>Option 2</option>
6. <option>Option 3</option>
7. <option>Option 4</option>
8. <option>Option 5</option>
9. <option>Option 6</option>
10. </select>
There are many tags in the above syntax that are defined below:

o The <label for="name"> tag is utilized to provide the name of the element. This tag
uses the "for" attribute that provides more accessibility.
o The <input type="text"> tag is utilized to define the single-line text field where the user
can input.
o The <select> tag is utilized to make a dropdown list.
o The <option> tag is utilized inside the <select> tag to define the options in a list.
o <!DOCTYPE html>
o <html lang="en">
o <head>
o <title>Demonstration of Combobox in HTML</title>
o </head>
o <body>
o <h2>It is the demonstration of Comboxbox in HTML</h2>
o <label for="name">Full Stack Web Development Languages</label> <br> <br>

o <select>
o <option value="HTML">HTML</option>
o <option value="CSS">CSS</option>
o <option value="JavaScript">JavaScript</option>
o <option value="PHP">PHP</option>
o <option value="Scala">Scala</option>
o <option value="Ruby">Ruby</option>
o <option value=".NET">.NET</option>
o <option value="Angular">Angular</option>
o <option value="React">React</option>
o <option value="SQL">SQL</option>
o <option value="C++">C++</option>
o <option value="C#">C#</option>
o <option value="Java">Java</option>
o <option value="Python">Python</option>
o <option value="OC">Objective C</option>
o </select>
o </body>
o </html>
o Output:
o Here is the output in which we can witness the combobox that shows full-stack web

o o
Textarea
The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually
courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined
through CSS height and width properties.
Textarea
1. <textarea rows="9" cols="70">
2. JavaTpoint textarea tag example with rows and columns.
3. </textarea>

Output:

JavaTpoint textarea tag example with rows and columns.

You might also like