WEB TECHNOLOGY
Presented By:
Dr. Santosh Kumar Sharma
Assistant Professor
Dept. of CSE, CGU, Odisha
Lecture 6
8/13/2025 2
HTML Lists
Ordered List in HTML
This list is created by using <ol> tag. Any series can be used to order the
elements, like series of digits, alphabets, roman numerals, etc. All these
series gets increased by one with every new element entered in the list.
Ex.-For a numbered order list, the numbering starts at one and is
incremented by one for each successive ordered list element tagged with
<li>.
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
Output
1. Audi
2. Mercedes
3. Lamborghini
Ordered list Type Attribute
The type attribute is used to change the series type.
type="1" The list items will be numbered with numbers (default).
type="A" The list items will be numbered with uppercase letters.
<ol type=“A">
type="a" The list items will be numbered with lowercase letters.
<ol type=“a">
type="I" The list items will be numbered with uppercase roman
numbers.
<ol type=“I">
type="i" The list items will be numbered with lowercase roman
numbers.
<ol type=“i">
The "Start" Attribute
The start attribute is used to control the counting in the list. By default, the
counting starts from '1' or from 'a', but we can change counting to start from
a specified number or alphabet. Look at the example below to see the
syntax of using this attribute.
<ol start="50">
HTML Unordered List
HTML unordered list is a collection of related items that are listed with no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. Each item
starts with <li> tag.
<body>
<h2> Unordered List </h2>
<ul>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
Output
Harley-Davidson
Ducati
BMW
Unorder List Type Attribute
The type attribute is used to change the series type.
type="disc" Sets the list item marker to a bullet (default) <ul type="disc">
type="circle" Sets the list item marker to a circle. <ul type="circle">
type="square" Sets the list item marker to a square. <ul type="square">
type="none" The list items will not be marked. <ul type="none">
Description List
The HTML support another list style which is called definition lists where entries
are listed like in a dictionary. The definition list is the ideal way to present a list of
terms, or other name/value list.
The definition list created using <dl> tag. The Description <dt> — defines the item
in the list, and <dd> describes the items in the list.
<body><h1>HTML Definition List</h1>
<dl><dt>PUBG</dt>
<dd>PlayerUnknown's Battlegrounds (PUBG) developed by PUBG
Corporation.</dd>
<dt>God Of War</dt>
<dd>God of War developed by Santa Monica Studio.</dd>
</dl></body>
• Output
• PUBG
• PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.
• God Of War
• God of War developed by Santa Monica Studio.
HTML Forms
An HTML form is a section of a document which contains different fields
like text fields, password fields, checkboxes, radio buttons, submit button,
menus etc.
HTML Forms can be used where we want to collect some data from the site
visitor. For example, in case of user registration you would like to collect
information such as name, email address, Phone number, etc.
A form will take input and then store it to a back-end application such as
CGI, ASP Script or PHP script etc. The back-end application will perform
required processing on the passed data like storing it in database.
There are various form elements available like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.
HTML Form Structure
The HTML <form> tag defines a form that is used to collect user input. All the
form elements should be written inside <form> and </form> tags.
HTML Forms Elements
Attributes Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<select> It defines a multi-line input control.
<option> It defines an option in a drop-down list
<textarea> It defines a drop-down list.
<button> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
.
<optgroup> It defines a group of related options in a drop-down list.
<label> It defines a label for a field.
HTML <input> element
The HTML <input> element is fundamental form element.
It is used to create form fields, to take input from user. We can apply different input
filed to gather different information form user. Following is the example to show
the simple text input.
Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as
single line textfield control.
The name attribute is optional, but it is required for the server side component such
as JSP, ASP, PHP etc.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a form.
The size of <textarea> can be specify either using "rows" or "cols" attribute.
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form> Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute
in label tag that must be same as id attribute of input tag.
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"> <br/>
</form>
HTML Password Field Control
The password is not visible to the user in password field control.
<form>
<label for="password"> Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
Email Field Control
The email field in new in HTML 5. It validates the text for correct
email address. You must use @ and . in this field.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Radio Button Control
The radio button is used to select one option from
multiple options. It is used for selection of gender, quiz
questions etc.
If you use one name for all the radio buttons, only one
radio button can be selected at a time.
Using radio buttons for multiple options, you can only
choose a single option at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender"
value="male"/>Male
<input type="radio" id="gender" name="gender"
value="female"/>Female <br/>
</form>
Checkbox Control
The checkbox control is used to check multiple options from given
checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket"
value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football"
value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey"
value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Note: These are similar to radio button except it can choose multiple
options at a time and radio button can select one button at a time,
and its display.
Submit button control
HTML <input type="submit"> are used to add a submit
button on web page. When user clicks on submit button,
then form get submit to the server.
Syntax:<input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on
button on web page.
The name attribute can be omit here.
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related
information of a form. This element is used with <legend> element
which provide caption for the grouped elements.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
lt;/form>
HTML Form Example
<!DOCTYPE html> <html> <head> <title>Form in HTML</title> </head>
<body> <h2>Registration form</h2>
<form> <fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br> <textarea></textarea><br><input type="submit"
value="sign-up"> </fieldset> </form> </body> </html>
HTML5 Tutorial
HTML5 is a next version of HTML. Here, you will get some brand new features which
will make HTML much easier. These new introducing features make your website layout
clearer to both website designers and users. There are some elements like <header>,
<footer>, <nav> and <article> that define the layout of a website.
Why use HTML5
It is enriched with advance features which makes it easy and interactive for
designer/developer and users.
It allows you to play a video and audio file.
It allows you to draw on a canvas.
It facilitate you to design better forms and build web applications that work offline.
It provides you advance features for that you would normally have to write JavaScript to
do.
List of HTML 5 Tags
Tag Description
<article> This element is used to define an independent piece of content in a
document, that may be a blog, a magazine or a newspaper article.
<aside> It specifies that article is slightly related to the rest of the whole page.
<audio> It is used to play audio file in HTML.
<bdi> The bdi stands for bi-directional isolation. It isolates a part of text that is
formatted in other direction from the outside text document.
<canvas> It is used to draw canvas.
<data> It provides machine readable version of its data.
<datalist> It provides auto complete feature for textfield.
<details> It specifies the additional information or controls required by user.
<dialog> It defines a window or a dialog box.
<figure> It defines a self-contained content like photos, diagrams etc.
<footer> It defines a footer for a section.
<header> It defines a header for a section.
<main> It defines the main content of a document.
<mark> It specifies the marked or highlighted content.
<menuitem> It defines a command that the user can invoke from a popup menu.
<meter> It is used to measure the scalar value within a given range.
<nav> It is used to define the navigation link in the document.
<progress> It specifies the progress of the task.
<ruby> It defines ruby annotation along with <rp> and <rt>.
<section> It defines a section in the document.
<summary> It specifies a visible heading for <detailed> element.
<svg> It is used to display shapes.
<time> It is used to define a date/time.
<video> It is used to play video file in HTML.
