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>
