Scribd
Upload
5 views

Lecture 2- Introduction to HTML

Uploaded by

josephinenakalembe33
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Lecture 2- Introduction to HTML

Uploaded by

josephinenakalembe33
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 119

Introduction to HTML

BSE 1208
Introduction to Web
Development
Lesson objectives
Upon completion of this chapter, the student should be able
to:

 Define HTML
 Have a clear understanding of tags
 Be a able to create a simple HTML document and save it.
 Be able to format an HTML document
What is HTML?
HTML is the standard markup language for Web
pages.

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages


HTML Tags
 HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like


<html>

 HTML tags normally come in pairs like <b> and </b>

 The first tag in a pair is the start tag, the second tag is the end tag

 Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web pages

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox)


is to read HTML documents and display them as web pages.
 The browser does not display the HTML tags, but uses the tags to
interpret the content of the page:
Example
<html>
</html>

Each one of those is called a tag.


<html> is a starting tag and </html> is a closing tag.

Think of a tag like talking to a browser ,or better yet give


it instructions.
Example Cont’d
<html> instructs the browser to open an HTML document.

</html> instructs the browser to close an HTML document.

<head>: tells the Web browser that this is the beginning of header for the
page

<title>: tells the Web browser that this is the beginning of the title of the
page

<body>: tells the Web browser that this is the beginning of the Web page
content (body)-- everything you want to say and see on your page will
follow this tag
HEAD TAGS
Every HTML document needs a pair of HEAD tags. The
<head> element is a container for metadata (data about data)
and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document.
Metadata is not displayed.
Metadata typically define the document title,
character set, styles, scripts, and other meta
information.
The following elements can go inside the <head>
element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
HEAD TAGS
<HTML>
<HEAD>
</HEAD>
</HTML>
HEAD TAGS: The <base> tag
The <base> tag (specifies a default URL and target
for all links on a page) goes inside <head>:
<html>
<head>
<base href="https://www.w3schools.com/"
target="_blank">
</head>
<body>

<img src="images/stickman.gif" width="24"


height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>

</body>
</html>
HEAD TAGS: The <style> tag
The <style> tag (adds style information to a page)
goes inside <head>:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>
HEAD TAGS: The <link> tag
The <link> tag (links to an external style sheet)
goes inside <head>:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>

<h1>I am formatted with a linked style


sheet</h1>
<p>Me too!</p>

</body>
</html>
TITLE TAGS
The <title> tag defines the title of the
document. The title must be text-only, and it
is shown in the browser's title bar or in the
page's tab.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
</HTML>
THE BODY TAG
The bulk of the page goes in the BODY tags.

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Place text in the body
<HTML>
<HEAD>
<TITLE>My first webpage!</TITLE>
</HEAD>
<BODY> Hello Everyone! Today is great </BODY>
</HTML>
Saving HTML document
o When your in Notepad, click file then save as.

o You will be presented with a dialog box. Make a new folder by


clicking on the new folder icon and name it what you want.

o Then double click on it to open it up. Where it says File name:


type in any name with a.html as a file extension (e.g.
page1.html) ,Where it says Save as type: make sure it says All
Files(*.*)
Saving changes
Whenever you make a change to your
document, just save it, then hit the Reload
button on your browser.

In some instances just hitting the reload


button doesn't quite do the trick... in that
case hit Reload while holding down the
SHIFT key.
Opening HTML document
Click file ,then open and browse your file and open it.
Or double click your file to open it.

Note:
What you made is a skeleton HTML document. This is the
minimum required information for a web document and all
web documents should contain these basic components.

 The document title is what appears at the very top of the


browser window.
Colors, images and hyperlinks
HTML Colors
 Colors are displayed combining RED, GREEN, and BLUE light.

 HTML colors are defined using a hexadecimal notation (HEX)


for the combination of Red, Green, and Blue color values (RGB).

 The lowest value that can be given to one of the light sources is 0
(in HEX: 00). The highest value is 255 (in HEX: FF).

 HEX values are specified as 3 pairs of two-digit numbers, starting


with a # sign.
Sample -colors
Example 1: background color
<html>
<head’’>
<title></title>
</head>
<body bgcolor="#CCFFCC">
Something really cool
</body>

Try it yourself and tell us the output.


Using images
The image must already been saved before we can use it,
preferably in the same folder as the HTML code.

Can specify image with the <IMG/> (image) tag.

<BODY> <IMG/> </BODY>

We must also specify the source and the size.

<BODY><IMG SRC=“ball.gif” WIDTH=“130”


HEIGHT=“101”/> </BODY>
Using images –Cont’d
The browser can figure out how big the image is all by itself.
 But we give the dimensions then because, the browser can simply
reserve a space for the image, then load the rest of page.

 Once the entire page loads it can go back and fill in the
images.
 Without dimensions, when it runs into an image, the browser has
to pause loading the page, load the image, then continue loading
the page.

So, the browser functions much better with image dimensions.


Adjust image size in a web page
<BODY>
<IMG SRC=”ball.gif" WIDTH=“300” HEIGHT=“101”/>
</BODY>

We can however adjust the dimensions until the image appears
the way we want it on the web page.

<BODY><IMG SRC="chef.gif" WIDTH=“40”


HEIGHT=“200”/>
</BODY>
Setting background images
<html>
<head><title></title>
</head>
<body background="swirlies.gif">Something really cool
</body>
Formatting Tags and attributes
 Tags
 <b> <u>
 <i><strong>
 <font><tt>

 Attributes
 Align, face, color, size.

Able to nest tags properly


Making things bold
 We use the <b> tag to bold content in html.
<html>
<head><title></title>
</head>
<body>Something really <b>cool</b>
</body>
</html>

 What we are (more or less) telling the browser is: at the <b> start
making things bold, and at the </b> stop making things bold.
Making things italic
To make thing italic ,use the<i> tag.
<html>
<head><title></title>
</head>
<body>Something <i>very</i> <b>good</b>
</body>
</html>
Underlining text
Use the <u> tag.
<html>
<head><title></title>
</head
<body><u>Something</u> <i>very</i> <b>good</b>
</body>
</html>
Using a combination of tags
<html>
<head><title></title>
</head>
<body>Something really <i><b>cool</b></i>
</body>
</html>
Nested tags
The above is an example of nested tags.

If you are going to use tag pairs in combination (which


you will probably be doing quite a bit), then to avoid
confusing the browser, they should be nested, not
overlapping.
illustration
<i><b></i></b>
Overlapping tags.... Bad

 <i><b></b></i>
Nested tags.... good
Changing font size
First add the <FONT> tags...
<body>Something really <font>good</font></body>

Then specify a SIZE attribute.

<body>Something really <font size=8>good</font></body>


attributes
a <TAG> tells the browser to do something.

An ATTRIBUTE goes inside the <TAG> and tells the


browser how to do it.
Default Font
 the default value is a value that the browser assumes if you have not
told it otherwise.

 Every browser has a default font setting - font name, size and color.
Unless you have messed with it the default is probably Times New
Roman 12pt (which translates into 3 for our purposes) and it's black.

 But we can specify font names other than the defaults. Like ARIAL
and COMIC SANS.

 a <TAG> tells the browser to do something. An ATTRIBUTE goes


inside the <TAG> and tells the browser how to do it.

 <FONT SIZE=6> …
Font
<BODY>Something really <FONT
FACE="ARIAL">good</FONT></BODY>

The font will only display if your viewer has that font installed
on their computer. Otherwise, they will only see the default
font

Arial and Comic Sans MS are pretty widely distributed with


Windows.
Example
<html>
<head><title></title></head>
<body> <font size=4 face=“arial”>
</font>
</body>
</html>
Specifying more than one font face
<html>
<head><title></title></head>
<body>
<font face=“arial, helvetica, lucida sans">This is DCS
1207</font> </body> </html>

 The browser looks for ARIAL. If it finds it, it uses it. If not, it
goes on to HELVETICA. If it can't find that, it looks for
LUCIDA SANS. And if it can't find that it uses the default
font.
Using more than one attribute in Font tag.
<html>
<head><title></title></head>
<body>Something really <font color="#ff0000"
face=“arial" size="7">good</font>
</body>
</html>
headings
Headings range from 1-6.
<h1>Something really cool<h1>
<h2>Something really cool<h2>
<h3>Something really cool<h3>
<h4>Something really cool<h4>
<h5>Something really cool<h5>
<h6>Something really cool<h6>
Align attribute
A useful heading attribute is ALIGN.

<h2 align="left">Something really cool<h2>


<h2 align="center">Something really cool<h2>
<h2 align="right">Something really cool<h2>
Linking on the Web
Source

Anchor
Document 1 Link
(reference) Destinatio
n
Here is a link to
document 2
Document 2

This is document 2.
Hypertext Links
Hypertext is the essence of the Web!

A link is specified with the href (hypertext reference) attribute


of <a> (the anchor tag)

The content of <a> is the visual link in the document


<a href=“target.html”>This is a link</a>

Relative addressing of targets is easier to maintain and more


portable than absolute addressing
Image Hyperlinks
Links can include images in their content

<a href = “cit.html“>


<img src = “computer.jpg"
alt = “Picture of a sample Computer in Lab 4" />
Info on Lab 4 </a>
working with lists
Un ordered list
<ul></ul>

Example
This is an unordered list
• something red
• something blue
• something old
• something new
Add a list item
<body>
Today’s shopping list
<ul>
<li> Matooke</li>
<li> Sugar</li>
<li>Salt</li>
<li>Meat</li>
<li>Charcoal</li>
</ul>
</body>
Ordered list
<body>
What I want on my birthday
<ol>
<li>a big red truck </li>
<li>a real fast speedboat </li>
<li>a drum set </li>
<li>a BB gun </li>
<li>a Melanie Griffith </li>
</ol></body>
Horizontal rule
The <hr> tag in HTML stands for horizontal rule and is used
to insert a horizontal rule or a thematic break in an
HTML page to divide or separate document sections.
The <hr> tag is an empty tag, and it does not require an end
tag

<body>
<hr width=20%>
<hr width=50%>
<hr width=100%>
<hr width=20>
<hr width=50>
<hr width=100>
</body>
The <br> Tag

Insert single line breaks in a text:


The <br> tag is an empty tag which means
that it has no end tag.
Working with Tables
The three major tags
<TABLE>
 The main tag. Used to tell the browser "this is a table",
along with some attributes like size, border width and a
few other things.
<TR>
 TableRow defines a horizontal row of <TD> (TableData)
cells.
<TD>
 Specifies an indiviual block or cell in a table row.
table
A table is made up of rows which in turn are made up of
cells...

A cell is an intersection of a row and column.

 tables help will help you make quality html documents


and so you need to learn all the tags.
Example 1
<html><head><title></title></head>
<body>
<table>
<tr>
<td>Bricks</td>
</tr>
</table>
</body>
</html>

...which gives us this:


Bricks
Example 2
<html><head><title></title></head>
<body>
<table border=1>
<tr><td>Bricks</td>
</tr>
</table> </body>
</html>
border
Example
<html><head><title></title></head>
<body>
<table border=“25”>
<tr>
<td>Bricks</td>
</tr>
</table></body>
</html>
Table size
 When no sizes are specified the table is only as big as it needs to
be.

<html><head><title></title></head>
<body>
<table border=3>
<tr>
<td>Bricks, sand and water</td>
</tr></table>
</body>
</html>
Table width
<html><head><title></title></head>
<body>
<table border=“3” width=“50”>
<tr>
<td>Bricks</td>
</tr>
</table></body>
</html>
Working with table height
<html><head><title></title></head>
<body>
<table border=“3” width=“100” height=“75”>
<tr>
<td>Bricks</td>
</tr>
</table>
</body>
</html>
Aligning cell data
Use is be made of the align attribute.
<table border=“3” width=“100” height=“75”>
<tr>
<td align="center">Bricks</td>
<td align="right"> Sand </td>
<td align="left"> Water </td>
</tr>
</table>
Default value
The default value is (usually) align="left".

The default value is the value that the browser assumes if


you have not told it otherwise.

valign="middle“ is the default value as far as vertical


appearance of data in a cell is concerned.
Vertical appearance of data in a cell
example.
<table border=“3” width=“100” height=“75”>
<tr>
<td align="left" valign="top"> Bricks </td>
<td align="left" valign="bottom">Sand</td>
<td align="left" valign="middle">Water</td>
</tr>
</table>
Working with images in a table
 example
<table border=“3” width=“100” height=“75”>
<tr>
<td align="left" valign="middle">
<img src=”ball.gif" width=“32” height=“32” alt=”ball”/>
</td>
</tr>
</table>
Specifying cell size
When no instructions are given to the browser, each cell
may (but not always) be different in size.

It's often a fine idea to specify how big each cell is.

Make sure your arithmetic is correct or what people see


may be drastically different than what you want them to
see!
Example
<table border=“3” width=“300” height=“75”>
<tr><td width=“150”>Bricks</td><td
width=“150”>Sand</td>
</tr></table>

 These WIDTH attributes can also be expressed as a


percentage.
<table border=“3” width=“300” height=“75”>
<tr><td width=“50%”>Bricks</td><td
width=“50%”>Sand</td>
</tr></table>
Creating a table with an empty cell
<table border=“3” width=“300” height=“75” >
<tr>
<td width=“60%”>Bricks</td>
<td width=“20%”>Sand</td>
<td width=“20%”>Water</td>
</tr>
<tr>
<td>Cement</td>
<td>Timber</td>
<td>&nbsp;</td>
</tr>
</table>
CELLPADDING and CELLSPACING
CELLPADDING and CELLSPACING attributes are used
up front in the <TABLE> tag.

CELLPADDING is the amount of space between the


border of the cell and the contents of the cell.
CELLPADDING and CELLSPACING
By default, table cells tend to be squeezed close to each
other. To give your table cells a little more breathing room,
use CELLPADDING and CELLSPACING.

CELLSPACING controls the space between table cells.


Although there is no official default, browsers usually use a
default of 2.

CELLPADDING sets the amount of space between the


contents of the cell and the cell wall. The default is 1.
 CELLPADDING is usually more effective than
CELLSPACING for spreading out the contents of the table.
CELLPADDING
CELLSPACING
example
<table border=“3” cellpadding=“12”>
<tr>
<td>Bricks</td>
<td>Sand</td>
<td>Water</td>
</tr>
<tr>
<td>Cement</td>
<td>Timber</td>
<td>Hoes</td>
</tr>
</table>
Example
<table border=“3” cellspacing=“12”>
<tr>
<td>Bricks</td>
<td>Sand</td>
<td>Water</td>
</tr>
<tr>
<td>Cement</td>
<td>Timber</td>
<td>Hoe</td>
</tr>
</table>
question
1. I've laid out my table with my dimensions but the table
doesn't show up right. Or it's fine in Browser A but looks
different in Browser B.
combining table attributes
<table border=“3” cellspacing=“12” cellpadding=“12”>
<tr>
<td>Bricks</td><td>Sand</td><td>Water</td>
</tr>
<tr>
<td>Cement</td><td>Timber</td><td>Hoe</td>
</tr>
</table>
Specifying colors
A cool feature of the newer browsers is the ability to
specify background colors for a table cell, row or the
whole table.

Use is be made of the bgcolor attribute as used in the


<body> tag.
Example 1
<table border=“3” bgcolor="#ffcc66">
<tr>
<td>Bricks</td><td>Sand</td><td>Water</td>
</tr>
<tr><td>Cement</td><td>Timber</td><td>Hoe</td>
</tr>
</table>
Example 2
<table border=“3”>
<tr bgcolor="#ff9999">
<td>Bricks</td>
<td>Sand</td>
<td>Water</td>
</tr>
<tr bgcolor="#99cccc">
<td>Cement</td>
<td>Timber</td>
<td>Hoe</td>
</tr>
</table>
Example 3
<table border=“3”>
<tr bgcolor="#ffccff">
<td>Bricks</td>
<td>Sand</td><td>Water</td>
</tr>
<tr>
<td bgcolor="#ff0000">Cement</td>
<td>Timber</td>
<td bgcolor="#3366ff">Hoe</td>
</tr>
</table>
colspan and rowspan
COLSPAN (Column Span) and ROWSPAN
(Row Span
example
<tr><td colspan=2>ed</td>
<td>rick</td></tr>
<tr>
<td>larry</td><td>curly</td><td>moe</
td>
</tr>
Combining attributes
<table border=3>
<tr><td colspan=3 align="center">
<b>ed</b></td>
</tr>
<tr><td>larry</td><td>curly</td>
<td>moe</td>
</tr>
</table>
We can make
<table border=3>
cell data a link
<tr>
<td colspan=3 align="center">
<a href="http://junior.apk.net/~jbarta/">ed</a>
</td>
</tr>
<tr>
<td>larry</td><td>curly</td><td>moe</td>
</tr>
</table>
Rowspan attribute
<table border=3>
<tr>
<td rowspan=2>ed</td>
<td>tom</td><td>rick</td>
</tr>
<tr><td>curly</td><td>moe</td>
</tr>
</table>
We can use these attributes in
combination.
<table border=3>
<tr>
<td rowspan=2>ed</td>
<td colspan=2>tom</td>
</tr>
<tr><td>curly</td><td>moe</td>
</tr>
</table>
Tables and lists
<table border=3>
<tr>
<td>ingredients for apple pie
<ul>
<li>apples
<li>flour
<li>sugar
<li>cinnamon</ul>
</td>
</tr>
</table>
Nested tables
<table border=3 width=200 height=100>
<tr>
<td>
<table border=3>
<td<tr>
>ed</td>
</tr>
</table>
</td>
</tr>
</table>
Centering a table
<center>
<table border=3 width=200 height=100>
<tr>
<td>
<table border=3>
<tr><td>ed</td>
</tr>
</table> </td>
</tr>
</table>
</center>
Working with Forms
Adding interactivity to web
documents
Html forms ..
An HTML form is used to collect user input.
The user input is most often sent to a server
for processing.
The <form> element is a container for
different types of input elements, such as:
text fields, checkboxes, radio buttons, submit
buttons, etc.
FORM TAG
The basic construction of a html form is this...

 <FORM> begin a form


<INPUT> ask for information in one of several different
ways...
<INPUT> ...there can be as many input areas as you wish
</FORM> end a form
Type in your form tags in the body.

<html><head>
<title> Introduction to forms</title>
</head><body>
<form></form>
</body>
<html>
The <input> Element
The HTML <input> element is the most
used form element.
An <input> element can be displayed in
many ways, depending on the type
attribute.
The <input> Element
Text Fields
<form>
<label for="fname">First
name:</label><br>
<input type="text" id="fname"
name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname"
name="lname">
</form>
The <label> Element
The <label> tag defines a label for many
form elements.
The <label> element is useful for screen-
reader users, because the screen-reader will
read out loud the label when the user focuses
on the input element.
The for attribute of the <label> tag should be
equal to the id attribute of the <input>
element to bind them together.
The Name Attribute for <input>
Each input field must have a name attribute
to be submitted.
If the name attribute is omitted, the value of
the input field will not be sent at all.
The Action Attribute
The action attribute defines the action to be
performed when the form is submitted.
Usually, the form data is sent to a file on the
server when the user clicks on the submit
button.
In the example on next slide, the form data is
sent to a file called “bse.php". This file
contains a server-side script that handles the
form data:
 If the action attribute is omitted, the action
is set to the current page.
The Action Attribute ..
<form action="/bse.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname"
name="fname" value=“Lilian"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname"
name="lname" value=“vanessa"><br><br>
<input type="submit" value="Submit">
</form>
The Target Attribute: <form
action="/action_page.php" target="_blank">

The target attribute specifies where to


display the response that is received after
submitting the form.
The target attribute can have one of the
following values:
The Method Attribute
The method attribute specifies the HTTP
method to be used when submitting the form
data.
The form-data can be sent as URL variables
(with method="get") or as HTTP post
transaction (with method="post").
 <form action="/action_page.php"
method="get">
Get method appends the form data to the
URL, in name/value pairs.
NEVER use GET to send sensitive data! (the
The Autocomplete Attribute
The autocomplete attribute specifies whether
a form should have autocomplete on or off.
When autocomplete is on, the browser
automatically complete values based on
values that the user has entered before.
 <form action="/action_page.php"
autocomplete="on">
The HTML <form> Elements
The autocomplete attribute specifies whether
a form should have autocomplete on or off.
When autocomplete is on, the browser
automatically complete values based on
values that the user has entered before.
 <form action="/action_page.php"
autocomplete="on">
The HTML <form> Elements
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
The <select> Element:
 The <option> element defines an option that can be
selected
 By default, the first item in the drop-down list is selected.
 To define a pre-selected option, add the selected attribute
to the option:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <select> Element.. Allow Multiple
Selections:

 Use the multiple attribute to allow the user to select more


than one value:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars“ size=“4”
multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
 The <textarea> element defines a multi-line input field (a
text area)

 <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a
text area.
The cols attribute specifies the visible width of a text area.
The <fieldset> and <legend> Elements
 The <fieldset> element is used to group related data in a
form.

 The <legend> element defines a caption for the <fieldset>


element.
 <form action="/bse.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
HTML <input type="checkbox">
<input type="checkbox" id="vehicle1"
name="vehicle1" value="Bike">
<label for="vehicle1"> I have a
bike</label><br>
<input type="checkbox" id="vehicle2"
name="vehicle2" value="Car">
<label for="vehicle2"> I have a
car</label><br>
<input type="checkbox" id="vehicle3"
name="vehicle3" value="Boat">
<label for="vehicle3"> I have a
boat</label><br>
 Always add the <label> tag for best accessibility
Basic input type is TEXT
<FORM>
<INPUT TYPE="text">
</FORM>
Every input needs a NAME.
<FORM>
We can if we want, type in a NAME AND VALUE.

<FORM>
<INPUT TYPE="text"
NAME="ADDRESS" VALUE=”Makerere">
</FORM>
Adding SIZE
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="
Makerere " SIZE=10>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="
Makerere " SIZE=20>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="
Makerere " SIZE=30>
</FORM>
Password fields
Very similar to the TYPE=TEXT is the
TYPE=PASSWORD.

It is exactly the same, except it displays *** instead of the


actual input. The browser will send you the input, it just
won't display it.

<FORM><INPUT TYPE="password"></FORM>
Remember that each <INPUT> must have a NAME.
<FORM><INPUT TYPE="password"
NAME="USERPASS"></FORM>
Radio buttons
<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND">
<INPUT TYPE="radio" NAME="BEST FRIEND">
<INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>

Radio buttons allow the user to choose one of


several options.
Various input types..
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
Including Values
Each of the Radio Buttons must be assigned a VALUE.
<form>
<input type="radio" name="best friend" value=“Hamidah">
<br>
<input type="radio" name="best friend" value=” Hanifah">
<br>
<input type="radio" name="best friend" value=“Hibah">
</form>
Now label each button.
<form>
<input type="radio" name="best friend"
value=“Hamidah">Hamidah Babirye
<br>
<input type="radio" name="best friend"
value=”Hanifah">Hanifah Nakato
<br>
<input type="radio" name="best friend"
value=“Hibah">Hibah Kizza
</form>
Working with Checkboxes
<form>
 <input type="checkbox" name=“Hamidah">
<br><input type="checkbox" name=”Hanifah">
<br><input type="checkbox" name=“Hibah">
<br><input type="checkbox" name=“Drake">
</form>

give each check box a different NAME


Each Check Box gets the same VALUE.
<form>
<input type="checkbox" name=“Hamidah"
value="yes">
<br>
<input type="checkbox" name=”Hanifah" value="yes">
<br>
<input type="checkbox" name=“Hibah" value="yes">
<br>
<input type="checkbox" name=“Drake" value="yes">
</form>
OK, let's label each box.
<form>
<input type="checkbox" name=“Hamidah Babirye
<br>
<input type="checkbox" name=”Hanifah"
value="yes">Hanifah Nakato
<br>
<input type="checkbox" name=“Hibah" value="yes">
Hibah Kizza
<br>
<input type="checkbox" name=“Drake"
value="yes">Drake Kiyingi
</form>
Summary
For Check Boxes the NAME changes
and the VALUE stays the same and

with Radio Buttons, the VALUE changes


but the NAME stays the same

You might also like