HTML Form: Menu list

This entry is part 10 of 10 in the series HTML Form

For situations where you have a long list of options, consider using menu or list.

A list can contain as many options as needed, yet it takes up very little space on the form.

To create a list, start with a two-sided <select> tag.  Within it, place each option in its own <option> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Where would you like to go next?</p>

<form method='post'>
    <select name='country'>
        <option value='england'>England</option>
        <option value='brazil'>Brazil</option>
        <option value='malaysia'>Malaysia</option>
    </select>

</form>

</body>
</html>

 

HTML: Changing numbering for one item in the list

This entry is part 13 of 34 in the series HTML

You can use the value=’n’ attribute for an individual list item <li> if you want to change the numbering for one item only.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
</head>
<body>

<h4>British Pop</h4>
<ol start='11'>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
    <li value='21'>New Order</li>
</ol>

</body>
</html>
Numbering For One Item

HTML: Specifying the start of a numbered list

This entry is part 12 of 34 in the series HTML

To start a numbered list at a number other than 1, use the start=’n’ attribute with the <ol> tag, where n is the starting number.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
</head>
<body>

<h4>British Pop</h4>
<ol start='11'>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
    <li>New Order</li>
</ol>

</body>
</html>



Numbered List

HTML: List style type attribute values

This entry is part 11 of 34 in the series HTML

In the earlier example, we have used a square to style the bulletted list using the list-style-type parameter.

<ul style='list-style-type: square'>

Here are the additional styles that we can use for bulletted list or numbered list.

List StyleValueResult
BulletedDiscFilled circle (the default)
CircleUnfilled circle
SquareFilled square
NumberedDecimal1,2,3,4 (the default)
decimal-leading-zero01,02,03,04
lower-romani, ii, iii, iv
upper-romanI, II, III, IV
lower-alphaa,b,c,d
upper-alphaA,B,C,D
None(nothing)