Scribd
Upload
23 views20 pages

WD Unit 2 (C)

HTML lists allow grouping related items using tags like <ul>, <ol>, and <dl>. Unordered lists use bullet points while ordered lists number items. Description lists define terms and descriptions. Forms collect user input using elements like <input>, <label>, and <button>. Common input types include text, radio buttons, checkboxes, and submit buttons. Form data is sent to a server-side file specified in the action attribute.

Uploaded by

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

WD Unit 2 (C)

HTML lists allow grouping related items using tags like <ul>, <ol>, and <dl>. Unordered lists use bullet points while ordered lists number items. Description lists define terms and descriptions. Forms collect user input using elements like <input>, <label>, and <button>. Common input types include text, radio buttons, checkboxes, and submit buttons. Form data is sent to a server-side file specified in the action attribute.

Uploaded by

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

HTML Lists

HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list: An ordered HTML list:
 Item 1. First item
 Item 2. Second item
 Item 3. Third item
 Item 4. Fourth item

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html> <body>
<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body></html>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<!DOCTYPE html>
<html> <body>

<h2>An Ordered HTML List</h2>


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body> </html>

HTML Description Lists


HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML List Tags


Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Unordered HTML List - Choose List Item Marker


The CSS list-style-type property is used to define the style of the list item marker. It can have one of the
following values:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Nested HTML Lists


Lists can be nested (list inside list):
<html> <body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body> </html>
Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
<!-- padding: 0; 
}

li {
float: left;
}

li a {

color: black;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: purple;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>

<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Control List Counting
By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:
<!DOCTYPE html>
<html>
<body>

<h2>The start attribute</h2>


<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a
specified number:</p>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="I" start="50">


<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
Nested Ordered HTML Lists
Lists can be nested (list inside list):
<!DOCTYPE html>
<html> <body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body> </html>

HTML Description Lists


A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

<!DOCTYPE html>

<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

Chapter Summary
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description list
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


The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

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.

Here are some examples:

Type Description
<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Text Fields
The <input type="text"> defines a single-line input field for text input.
<!DOCTYPE html>

<html>

<body>

<h2>Text input fields</h2>

<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" <br><br>

<label for="lname">Last name:</label><br>

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

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>

</html>

The <label> Element


Notice the use of the <label> element in the example above.

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 <label> element also helps users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<html>

<body>

<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScrip
t">
<label for="javascript">JavaScript</label>
</form>
</body>

</html>

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

<form>
<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>
</form>
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a
form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

The Name Attribute for <input>


Notice that 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.

Example
This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>

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 below, the form data is sent to a file called "action.jsp". This file
contains a server-side script that handles the form data:

<form action="/action_page.php">
<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">
</form>

The Target Attribute

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:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

Framename The response is displayed in a named iframe

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").

The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:

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

Notes on GET:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form data is visible
in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of
data.
 Form submissions with POST cannot be bookmarked

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.

Example
A form with autocomplete on:

<form action="/action_page.php" autocomplete="on">

The Novalidate Attribute


The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated
when submitted.

Example
A form with a novalidate attribute:

<form action="/action_page.php" novalidate>


List of All <form> Attributes
Attribute Description

accept-charset Specifies the character encodings used for form submission

action Specifies where to send the form-data when a form is


submitted

autocomplete Specifies whether a form should have autocomplete on or


off

enctype Specifies how the form-data should be encoded when


submitting it to the server (only for method="post")

method Specifies the HTTP method to use when sending form-data

name Specifies the name of the form

novalidate Specifies that the form should not be validated when


submitted

rel Specifies the relationship between a linked resource and


the current document

target Specifies where to display the response that is received


after submitting the form
The HTML <form> Elements
The HTML <form> element can contain one or more of the
following form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element


One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending


on the type attribute.

The <label> Element


The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because


the screen-reader will read out loud the label when the user focus
on the input element.
The <label> element also help users who have difficulty clicking
on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to


the id attribute of the <input> element to bind them together.

The <select> Element


The <select> element defines a drop-down list:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

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:

Example

<option value="fiat" selected>Fiat</option>


Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than
one value:

Example

<label for="cars">Choose a car:</label>


<select id="cars" name="cars" size="4" multiple>

The <textarea> Element


The <textarea> element defines a multi-line input field (a text
area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The <button> Element


The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click


Me!</button>

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 >
<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>
</fieldset>
</form>

The <datalist> Element


The <datalist> element specifies a list of pre-defined options for
an <input> element.

Users will see a drop-down list of the pre-defined options as they


input data.

The list attribute of the <input> element, must refer to


the id attribute of the <datalist> element.

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

The main difference between both is that in the


<datalist> tag the user can enter its own input and add
that as an option with the help of the <input> element
whereas the <select> tag doesn't provide this feature.

The <output> Element


The <output> element represents the result of a calculation (like
one performed by a script).

HTML Input Types


Here are the different input types you can use in HTML:

 <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">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
Example
Group related options with <optgroup> tags:
<!DOCTYPE html>
<html>
<body>

<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down


list:</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

HTML <input> required Attribute


<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>

Definition and Usage


The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before
submitting the form.

Note: The required attribute works with the following input types: text,
search, url, tel, email, password, date pickers, number, checkbox, radio,
and file.

HTML <input type="hidden">


Definition and Usage

The <input type="hidden"> defines a hidden input field.

A hidden field lets web developers include data that cannot be seen or
modified by users when a form is submitted.

A hidden field often stores what database record that needs to be


updated when the form is submitted.

Note: While the value is not displayed to the user in the page's content,
it is visible (and can be edited) using any browser's developer tools or
"View Source" functionality. Do not use hidden inputs as a form of
security!

<!DOCTYPE html>
<html>
<body>

<h1>A Hidden Field (look in source code)</h1>

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> The hidden field is not shown to the user, but


the data is sent when the form is submitted.</p>

</body>
</html>

You might also like