Scribd
Upload
5 views25 pages

Java Chap3

Uploaded by

mdsulemankhan2767
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
5 views25 pages

Java Chap3

Uploaded by

mdsulemankhan2767
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 25

ABSTRACT:

• APPLET
• TYPES OF APPLET
• DIFFERENCE BETWEEN JSAP AND
APPLET
• APPLET LIFE CYCLE
• CLASSES: GRAPHICS, LABEL,
TEXTFIELD, BUTTON, SCROLLBAR,
CHECKBOX, AND THEIR EVENTS
• EVENT HANDLERS
• HTML TAGS: <HTML>, <HEAD>,
<TITLE> , <BODY>, <P>, <BR> ,
<HR>, <U>, <B>,<I>, <A>, <FONT>,
<IMG>,
• <INPUT TYPE>: TEXT,RADIO,
PASSWORD, CHECKBOX, SUBMIT,
RESET,EXAMPLES USING TAGS.

UNIT 3:APPLETS • APPLET EXECUTION USING JDK


AND HTML

[Document subtitle]

Admin
Divya.D.Parande
UNIT-3 APPLETS

Java Applet
Applet is a special type of program that is embedded in the webpage to generate the
dynamic content. It runs inside the browser and works at client side.

Advantage of Applet: There are many advantages of applet. They are as follows:

o It works at client side so less response time.


o Secured
o It can be executed by browsers running under many platforms, including Linux,
Windows, Mac Os etc.

Drawback of Applet: Plugin is required at client browser to execute applet.

Hierarchy of Applet

As displayed in the above diagram, Applet class extends Panel. Panel class extends
Container which is the subclass of Component.

Lifecycle of Java Applet

1. Applet is initialized.
2. Applet is started.
3. Applet is painted.
4. Applet is stopped.
5. Applet is destroyed.

1
Divya.D.Parande
UNIT-3 APPLETS

Lifecycle methods for Applet:


The java.applet.Applet class 4 life cycle methods and java.awt.Component class
provides 1 life cycle methods for an applet.

java.applet.Applet class
For creating any applet java.applet.Applet class must be inherited. It provides 4 life
cycle methods of applet.00:00/06:36

1. public void init(): is used to initialized the Applet. It is invoked only once.
2. public void start(): is invoked after the init() method or browser is maximized.
It is used to start the Applet.
3. public void stop(): is used to stop the Applet. It is invoked when Applet is stop
or browser is minimized.
4. public void destroy(): is used to destroy the Applet. It is invoked only once.

java.awt.Component class
The Component class provides 1 life cycle method of applet.

1. public void paint(Graphics g): is used to paint the Applet. It provides Graphics
class object that can be used for drawing oval, rectangle, arc etc.

Who is responsible to manage the life cycle of an applet?


Java Plug-in software.

How to run an Applet?


There are two ways to run an applet

1. By html file.
2. By appletViewer tool (for testing purpose).

Simple example of Applet by html file:


To execute the applet by html file, create an applet and compile it. After that create an
html file and place the applet code in html file. Now click the html file.

2
Divya.D.Parande
UNIT-3 APPLETS
/First.java

import java.applet.Applet;
import java.awt.Graphics;
public class First extends Applet{
public void paint(Graphics g){
g.drawString("welcome",150,150);
}
}

Note: class must be public because its object is created by Java Plugin software that
resides on the browser.

myapplet.html

<html>
<body>
<applet code="First.class" width="300" height="300">
</applet>
</body>
</html>

Simple example of Applet by appletviewer tool:


To execute the applet by appletviewer tool, create an applet that contains applet tag
in comment and compile it. After that run it by: appletviewer First.java. Now Html file
is not required but it is for testing purpose only.

//First.java
import java.applet.Applet;
import java.awt.Graphics;
public class First extends Applet{
public void paint(Graphics g){
g.drawString("welcome to applet",150,150);
} }
/* <applet code="First.class" width="300" height="300"></applet> */
To execute the applet by appletviewer tool, write in command prompt:
c:\>javac First.java
c:\>appletviewer First.java

3
Divya.D.Parande
UNIT-3 APPLETS

Types of Applets in Java


A special type of Java program that runs in a Web browser is referred to as Applet. It
has less response time because it works on the client-side. It is much secured executed
by the browser under any of the platforms such as Windows, Linux and Mac OS etc.
There are two types of applets that a web page can contain.

1. Local Applet
2. Remote Applet

Local Applet
Local Applet is written on our own, and then we will embed it into web pages. Local
Applet is developed locally and stored in the local system. A web page doesn't need
the get the information from the internet when it finds the local Applet in the system.
It is specified or defined by the file name or pathname. There are two attributes used
in defining an applet, i.e., the codebase that specifies the path name and code that
defined the name of the file that contains Applet's code.

Specifying Local applet

1. <applet
2. codebase = "tictactoe"
3. code = "FaceApplet.class"
4. width = 120
5. height = 120>
6. </applet>

Let's take an example of Local applet to understand how we can create it and
embedded it into web page.

1. First, we will create a Local Applet for embedding in a web page.


2. After that, we will add that Local Applet to the web page.

4
Divya.D.Parande
UNIT-3 APPLETS
FaceApplet.java

1. //Import packages and classes


2. import java.applet.*;
3. import java.awt.*;
4. import java.util.*;
5. import java.awt.event.*;
6. //Creating FaceApplet class that extends Applet
7. public class FaceApplet extends Applet
8. {
9. //paint() method starts
10. public void paint(Graphics g){
11. //Creating graphical object
12. g.setColor(Color.red);
13. g.drawString("Welcome", 50, 50);
14. g.drawLine(20, 30, 20, 300);
15. g.drawRect(70, 100, 30, 30);
16. g.fillRect(170, 100, 30, 30);
17. g.drawOval(70, 200, 30, 30);
18. g.setColor(Color.pink);
19. g.fillOval(170, 200, 30, 30);
20. g.drawArc(90, 150, 30, 30, 30, 270);
21. g.fillArc(270, 150, 30, 30, 0, 180);
22. }
23. }

Remote Applet
A remote applet is designed and developed by another developer. It is located or
available on a remote computer that is connected to the internet. In order to run the
applet stored in the remote computer, our system is connected to the internet then
we can download run it. In order to locate and load a remote applet, we must know
the applet's address on the web that is referred to as Uniform Recourse Locator(URL).

5
Divya.D.Parande
UNIT-3 APPLETS

Specifying Remote applet

1. <applet
2. codebase = "http://www.myconnect.com/applets/"
3. code = "FaceApplet.class"
4. width = 120
5. height =120>
6. </applet>

Difference Between Local Applet and Remote Applet

Local Applet Remote Applet

There is no need to define the We need to define the Applet's URL in


Applet's URL in Local Applet. Remote Applet.

Local Applet is available on our Remote Applet is not available on our


computer. computer.

In order to use it or access it, we don't In order to use it or access it on our


need Internet Connection. computer, we need an Internet Connection.

It is written on our own and then It was written by another developer.


embedded into the web pages.

We don't need to download it. It is available on a remote computer, so we


need to download it to our system.

6
Divya.D.Parande
UNIT-3 APPLETS
Difference between a Java Application and a Java Applet:
Java Application is just like a Java program that runs on an underlying operating
system with the support of a virtual machine. It is also known as an application
program. The graphical user interface is not necessary to execute the java
applications, it can be run with or without it.
Java Applet is an applet is a Java program that can be embedded into a web page. It
runs inside the web browser and works on the client-side. An applet is embedded in
an HTML page using the APPLET or OBJECT tag and hosted on a web server.
Applets are used to make the website more dynamic and entertaining.
The difference between Application and Applet:

Parameters Java Application Java Applet


Applets are small Java
programs that are designed
Applications are just like a to be included with the
Java program that can be HTML web document.
executed independently They require a Java-
without using the web enabled web browser for
Definition browser. execution.
The applet does not
The application program require the main() method
requires a main() method for its execution instead
main () method for its execution. init() method is required.
The “javac” command is Applet programs are
used to compile compiled with the “javac”
application programs, command and run using
which are then executed either the “appletviewer”
using the “java” command or the web
Compilation command. browser.
Java application programs
have full access to the
local file system and Applets don’t have local
File access network. disk and network access.
Applets can only access
Applications can access all browser-specific services.
kinds of resources They don’t have access to
Access level available on the system. the local system.
First and foremost, the
installation of a Java The Java applet does not
application on the local need to be installed
Installation computer is required. beforehand.
Applications can execute Applets cannot execute
the programs from the programs from the local
Execution local system. machine.
An application program is An applet program is
needed to perform some needed to perform small
Program tasks directly for the user. tasks or part of them.

7
Divya.D.Parande
UNIT-3 APPLETS

Applet Life Cycle in Java


The applet life cycle can be defined as the process of how the object is created, started,
stopped, and destroyed during the entire execution of its application. It basically has
five core methods namely init(), start(), stop(), paint() and destroy().These methods are
invoked by the browser to execute.

Methods of Applet Life Cycle

There are five methods of an applet life cycle, and they are:

o init(): The init() method is the first method to run that initializes the applet. It
can be invoked only once at the time of initialization. The web browser creates
the initialized objects, i.e., the web browser (after checking the security settings)
runs the init() method within the applet.
o start(): The start() method contains the actual code of the applet and starts the
applet. It is invoked immediately after the init() method is invoked. Every time
the browser is loaded or refreshed, the start() method is invoked. It is also
invoked whenever the applet is maximized, restored, or moving from one tab
to another in the browser. It is in an inactive state until the init() method is
invoked.
o stop(): The stop() method stops the execution of the applet. The stop () method
is invoked whenever the applet is stopped, minimized, or moving from one tab
to another in the browser, the stop() method is invoked. When we go back to
that page, the start() method is invoked again.

8
Divya.D.Parande
UNIT-3 APPLETS
o destroy(): The destroy() method destroys the applet after its work is done. It is
invoked when the applet window is closed or when the tab containing the
webpage is closed. It removes the applet object from memory and is executed
only once. We cannot start the applet once it is destroyed.
o paint(): The paint() method belongs to the Graphics class in Java. It is used to
draw shapes like circle, square, trapezium, etc., in the applet. It is executed after
the start() method and when the browser or applet windows are resized.

Sequence of method execution when an applet is executed:

1. init()
2. start()
3. paint()

Sequence of method execution when an applet is executed:

1. stop()
2. destroy()

Applet Life Cycle Working


o The Java plug-in software is responsible for managing the life cycle of an applet.
o An applet is a Java application executed in any web browser and works on the
client-side. It doesn't have the main() method because it runs in the browser. It
is thus created to be placed on an HTML page.
o The init(), start(), stop() and destroy() methods belongs to
the applet.Applet class.
o The paint() method belongs to the awt.Component class.
o In Java, if we want to make a class an Applet class, we need to extend the Applet
o Whenever we create an applet, we are creating the instance of the existing
Applet class. And thus, we can use all the methods of that class.

Flow of Applet Life Cycle:


These methods are invoked by the browser automatically. There is no need to call them
explicitly.

9
Divya.D.Parande
UNIT-3 APPLETS

Syntax of entire Applet Life Cycle in Java


1. class TestAppletLifeCycle extends Applet {
2. public void init() {
3. // initialized objects
4. }
5. public void start() {
6. // code to start the applet
7. }
8. public void paint(Graphics graphics) {
9. // draw the shapes
10. }
11. public void stop() {
12. // code to stop the applet
13. }
14. public void destroy() {
15. // code to destroy the applet
16. }
17. }

10
Divya.D.Parande
UNIT-3 APPLETS

Displaying Graphics in Applet


java.awt.Graphics class provides many methods for graphics programming.

Commonly used methods of Graphics class:


1. public abstract void drawString(String str, int x, int y): is used to draw the
specified string.
2. public void drawRect(int x, int y, int width, int height): draws a rectangle
with the specified width and height.
3. public abstract void fillRect(int x, int y, int width, int height): is used to fill
rectangle with the default color and specified width and height.
4. public abstract void drawOval(int x, int y, int width, int height): is used to
draw oval with the specified width and height.
5. public abstract void fillOval(int x, int y, int width, int height): is used to fill
oval with the default color and specified width and height.
6. public abstract void drawLine(int x1, int y1, int x2, int y2): is used to draw
line between the points(x1, y1) and (x2, y2).
7. public abstract boolean drawImage(Image img, int x, int y, ImageObserver
observer): is used draw the specified image.
8. public abstract void drawArc(int x, int y, int width, int height, int
startAngle, int arcAngle): is used draw a circular or elliptical arc.
9. public abstract void fillArc(int x, int y, int width, int height, int startAngle,
int arcAngle): is used to fill a circular or elliptical arc.
10. public abstract void setColor(Color c): is used to set the graphics current
color to the specified color.
11. public abstract void setFont(Font font): is used to set the graphics current
font to the specified font.

11
Divya.D.Parande
UNIT-3 APPLETS

Example of Graphics in applet:

1. import java.applet.Applet;
2. import java.awt.*;
3.
4. public class GraphicsDemo extends Applet{
5.
6. public void paint(Graphics g){
7. g.setColor(Color.red);
8. g.drawString("Welcome",50, 50);
9. g.drawLine(20,30,20,300);
10. g.drawRect(70,100,30,30);
11. g.fillRect(170,100,30,30);
12. g.drawOval(70,200,30,30);
13.
14. g.setColor(Color.pink);
15. g.fillOval(170,200,30,30);
16. g.drawArc(90,150,30,30,30,270);
17. g.fillArc(270,150,30,30,0,180);
18.
19. }
20. }

myapplet.html

1. <html>
2. <body>
3. <applet code="GraphicsDemo.class" width="300" height="300">
4. </applet>
5. </body>
6. </html>

12
Divya.D.Parande
UNIT-3 APPLETS

Java AWT Label


The object of the Label class is a component for placing text in a container. It is used to display
a single line of read only text. The text can be changed by a programmer but a user cannot
edit it directly.It is called a passive control as it does not create any event when it is
accessed. To create a label, we need to create the object of Label class.

AWT Label Class Declaration:


public class Label extends Component implements Accessible

Java AWT TextField


The object of a TextField class is a text component that allows a user to enter a single
line text and edit it. It inherits TextComponent class, which further
inherits Component class.When we enter a key in the text field (like key pressed, key
released or key typed), the event is sent to TextField. Then the KeyEvent is passed to
the registered KeyListener. It can also be done using ActionEvent; if the ActionEvent
is enabled on the text field, then the ActionEvent may be fired by pressing return key.
The event is handled by the ActionListener interface.

AWT TextField Class Declaration:


public class TextField extends TextComponent

Java AWT Button


A button is basically a control component with a label that generates an event when
pushed. The Button class is used to create a labeled button that has platform
independent implementation. The application result in some action when the button
is pushed.When we press a button and release it, AWT sends an instance
of ActionEvent to that button by calling processEvent on the button.
The processEvent method of the button receives the all the events, then it passes an
action event by calling its own method processActionEvent. This method passes the
action event on to action listeners that are interested in the action events generated
by the button.To perform an action on a button being pressed and released,
the ActionListener interface needs to be implemented. The registered new listener
can receive events from the button by calling addActionListener method of the
button. The Java application can use the button's action command as a messaging
protocol.

AWT Button Class Declaration:


public class Button extends Component implements Accessible

13
Divya.D.Parande
UNIT-3 APPLETS

Java AWT Checkbox


The Checkbox class is used to create a checkbox. It is used to turn an option on (true)
or off (false). Clicking on a Checkbox changes its state from "on" to "off" or from "off"
to "on".

AWT Checkbox Class Declaration


public class Checkbox extends Component implements ItemSelectable, Accessible

Java AWT Scrollbar


The object of Scrollbar class is used to add horizontal and vertical scrollbar. Scrollbar
is a GUI component allows us to see invisible number of rows and columns.It can be
added to top-level container like Frame or a component like Panel. The Scrollbar class
extends the Component class.

AWT Scrollbar Class Declaration


public class Scrollbar extends Component implements Adjustable, Accessible
Scrollbar Class Fields
The fields of java.awt.Image class are as follows:
static int HORIZONTAL - It is a constant to indicate a horizontal scroll bar.
static int VERTICAL - It is a constant to indicate a vertical scroll bar.
Example:
import java.awt.*;
public class LabelExample {
public static void main(String args[]){
// creating the object of Frame class and Label class
Frame f = new Frame ("Label example");
Label l1, l2;
Scrollbar s = new Scrollbar();
s.setBounds (100, 100, 50, 100);
// adding scroll bar to the frame
f.add(s);
// initializing the labels
l1 = new Label ("First Label.");
l2 = new Label ("Second Label.");
// create instance of button with label
Button b = new Button("Click Here");

Checkbox checkbox1 = new Checkbox("C++");

14
Divya.D.Parande
UNIT-3 APPLETS
Checkbox checkbox2 = new Checkbox("Java", true);
f.add(checkbox1);
f.add(checkbox2);
// set the location of label
l1.setBounds(50, 100, 100, 30);
l2.setBounds(50, 150, 100, 30);
// adding labels to the frame
f.add(l1);
f.add(l2);
// set the position for the button in frame
b.setBounds(50,100,80,30);
// add button to the frame
f.add(b);
t1 = new TextField("Welcome to Javatpoint.");
t1.setBounds(50, 100, 200, 30);
f.add(t1);
// setting size, layout and visibility of frame
f.setSize(400,400);
f.setLayout(null);
f.setVisible(true);
}
}

Event and Listener (Java Event Handling)


Changing the state of an object is known as an event. For example, click on button,
dragging mouse etc. The java.awt.event package provides many event classes and
Listener interfaces for event handling.

Important Event Classes and Interface in Java


Event Classes Description Listener Interface

When a button is clicked or a list item is double-


ActionEvent ActionListener
clicked, an ActionEvent is triggered.

This event indicates a mouse action occurred in a


MouseEvent MouseListener
component

15
Divya.D.Parande
UNIT-3 APPLETS
The Key event is triggered when the character is
KeyEvent KeyListener
entered using the keyboard.
An event that indicates whether an item was
ItemEvent ItemListener
selected or not.
when the value of a textarea or text field is
TextEvent TextListener
changed
MouseWheelEvent generated when the mouse wheel is rotated MouseWheelListener

The object of this class represents the change in


the state of a window and are generated when the
WindowEvent WindowListener
window is activated, deactivated, deiconified,
iconified, opened or closed

when a component is hidden, moved, resized, or


ComponentEvent ComponentEventListener
made visible
when a component is added or removed from a
ContainerEvent ContainerListener
container
AdjustmentEvent when the scroll bar is manipulated AdjustmentListener
FocusEvent when a component gains or loses keyboard focus FocusListener

Steps to perform Event Handling


Following steps are required to perform event handling:

1. Register the component with the Listener

Registration Methods:For registering the component with the Listener,


many classes provide the registration methods. For example:

o Button
o public void addActionListener(ActionListener a){}
o MenuItem
o public void addActionListener(ActionListener a){}
o TextField
o public void addActionListener(ActionListener a){}
o public void addTextListener(TextListener a){}
o TextArea
o public void addTextListener(TextListener a){}

16
Divya.D.Parande
UNIT-3 APPLETS
o Checkbox
o public void addItemListener(ItemListener a){}
o Choice
o public void addItemListener(ItemListener a){}
o List
o public void addActionListener(ActionListener a){}
o public void addItemListener(ItemListener a){}

Java Event Handling Code


We can put the event handling code into one of the following places:

1. Within class
2. Other class
3. Anonymous class

Java event handling by implementing ActionListener

1. import java.awt.*;
2. import java.awt.event.*;
3. class AEvent extends Frame implements ActionListener{
4. TextField tf;
5. AEvent(){
6.
7. //create components
8. tf=new TextField();
9. tf.setBounds(60,50,170,20);
10. Button b=new Button("click me");
11. b.setBounds(100,120,80,30);
12.
13. //register listener
14. b.addActionListener(this);//passing current instance
15.
16. //add components and set size, layout and visibility
17. add(b);add(tf);

17
Divya.D.Parande
UNIT-3 APPLETS
18. setSize(300,300);
19. setLayout(null);
20. setVisible(true);
21. }
22. public void actionPerformed(ActionEvent e){
23. tf.setText("Welcome");
24. }
25. public static void main(String args[]){
26. new AEvent();
27. }
28. }

public void setBounds(int xaxis, int yaxis, int width, int height); have been used
in the above example that sets the position of the component it may be button,
textfield etc.

18
Divya.D.Parande
UNIT-3 APPLETS

HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating
web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on
a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used to apply
layout and
formatting conventions to a text document. Markup language makes text more
interactive and dynamic.
It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser.
A web page can be identified by entering an URL. A Web page can be of the static or
dynamic type.
With the help of HTML only, we can create static web pages.
58.1MHence, HTML is a markup language which is used for creating attractive web
pages with the help of styling,
and which looks in a nice format on a web browser. An HTML document is made of
many HTML tags and
each HTML tag contains different content.
Let's see a simple example of HTML.
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
<html > :This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata
(information about the document). It must be closed before the body tag opens.

19
Divya.D.Parande
UNIT-3 APPLETS
<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should
close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible
to the end user.
This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along
with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the
interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like
Windows, Linux,
and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes
it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.
NOTE: It is recommended to write all tags in lower-case for consistency,
readability, etc.

HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag. and which links to destination
page or URL.

href attribute of HTML anchor tag


The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

20
Divya.D.Parande
UNIT-3 APPLETS

HTML <applet> tag


HTML <applet> tag was used to embed the Java applet in an HTML document. This
element has been deprecated in HTML 4.0 and instead of it we can use <object> and
newly added element <embed>.

The use of Java applet is also deprecated, and most browsers do not support the use
of plugins.

Syntax

1. <applet code="URL" height="200" width="100">.............</applet>

Example:
<applet code="Shapes.class" align="right" height="200" width="300">
</applet>

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<img src="good_morning.jpg" alt="Good Morning Friends"/>

Attributes of HTML img tag


1) src
It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Use of height and width attribute with img tag

21
Divya.D.Parande
UNIT-3 APPLETS
You have learnt about how to insert an image in your web page, now if we want to
give some height and width to display image according to our requirement, then we
can set it with height and width attributes of image.
Example:
<img src="animal.jpg" height="180" width="300" alt="animal image">

HTML Input Tag


The HTML <input> tag is used to represent a form input control in HTML document.
This form input control facilitate user to input data and communicate with a website
or application.

Points to remember: 1) Use the input element within the form element to declare input
control that allow user to enter data.

2) The input element is empty. It contains attributes only. There is no need of an end tag in
HTML.
3) If you want to define labels for input element, use the label element with each input tag.

HTML Form Input Types


In HTML <input type=" "> is an important element of HTML form. The "type" attribute
of input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.


type=" " Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

22
Divya.D.Parande
UNIT-3 APPLETS

button Defines a simple push button, which can be programmed to perform a task on an

event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

Example with all the above input types:


<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
<input type="reset" value="Reset">
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
<input type="file" name="newfile">
<input type="image" alt="Submit" src="login.png" width="100px">
</form>
Output:

23
Divya.D.Parande
UNIT-3 APPLETS

Some newly added < input >types:

type=" " Description

color Defines an input field with a specific color.

date Defines an input field for selection of date.

datetime- Defines an input field for entering a date without time zone.
local

email Defines an input field for entering an email address.

month Defines a control with month and year, without time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL

week Defines a field to enter the date with week-year, without time zone.

search Defines a single line text field for entering a search string.

tel Defines an input field for entering the telephone number.

24
Divya.D.Parande

You might also like