Tag Archives: lists

Select lists and PHP

Select lists, which are created in HTML code, can be useful when a user needs to select one or more items from a list of different items. This tutorial explains how to add a select list to a form in a web page using some simple HTML code and then how to use PHP code to use the submitted data from the form.

You can watch the video below or scroll down to see the sample code.

Sample PHP code

There are two files used in this tutorial: form.php which creates a select list and collects the user input, and action_handler.php which uses and processes the submitted data.

Here is the code for the form.php file:

<html>
<head>
  <title>My form</title>
</head>

<body>
  <form action="action_handler.php" method="POST">
    <p>Which countries would you like to visit?</p>
    <select multiple name="countries[]" style="width:100px;">
      <option value="France">France</option>
      <option value="Brazil">Brazil</option>
      <option value="India">India</option>
      <option value="Japan">Japan</option>
    </select>
    <p><input type="submit" value="Submit"></p>
  </form>
</body>
</html>

Here is the code for the action_handler.php file:

<?php
  if(isset($_POST['countries'])){
    $countries = $_POST['countries'];
    echo "You selected the following countries:<br/>";
    foreach($countries as $key => $value){
      echo "$value<br/>";
    }
  }
  else{
    echo "You must select at least one country.";
  }
?>

Horizontal lists

This tutorial explains how to create horizontal lists and use list items as links in order to create a horizontal navigation bar. The result will look like the image below. You could then go and add some CSS styling to turn this into a nicely themed navigation bar.

Horizontal list with links.
Horizontal list with links.

Watch the video below (or click here to watch it on YouTube) and then scroll down to see the code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Horizontal lists</title>
 <link rel="stylesheet" href="resources/stylesheet19.css"/>
</head>
 
<body>
 <div id"nav">
 <ul id="navlist">
 <li><a href="#">Link one</a></li>
 <li><a href="#">Link two</a></li>
 <li><a href="#">Link three</a></li>
 <li><a href="#">Link four</a></li>
 <li><a href="#">Link five</a></li>
 </ul>
 </div>
</body>
</html>

And here is the sample CSS code:

#navlist li{
 display: inline;
 list-style-type: none;
 padding-right: 20px;
}

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.css" type="text/css"/>
</head>
<body>
 <h2>Cities</h2>
 <ol class="cities">
 <li>Sydney</li>
 <li>Melbourne</li>
 <li>Brisbane</li>
 <li>Perth</li>
 </ol>

 <h2>Countries</h2>
 <ul class="countries">
 <li>Australia</li>
 <li>France</li>
 <li>Canada</li>
 <li>New Zealand</li>
 </ul>
</body>
</html>

And here is the sample CSS code:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}

Creating lists in HTML

There are two different types of lists we will look at in this tutorial. The first type is an unordered list (bullet list) which is used to list items in no particular order. A bullet list is a dot-point list but you can customise the style of the list to use squares or arrows instead of dots, for example. The second type of list is an ordered list (numbered list) which uses numbers to order items in a list.

An unordered list looks like this:

Ordered list
Unordered list

An ordered list looks like this:

Ordered list
Ordered list

Unordered list items go between the <ul> and </ul> tags in the body section of your webpage. Ordered list items go between the <ol> and </ol> tags on your webpage. Each list item is surrounded by the <li> and </li> tags (you can use <li> in both unordered and ordered lists). Watch the video below and then scroll down to see the code. If you’d like to find out how to style lists with CSS code, you should check out the list styling tutorial.

The sample code below shows how to create ordered lists and unordered lists:

<!DOCTYPE html>
<html>
<head>
 <title>Lists</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h3>My bullet list:</h3>
 <ul>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
 </ul>
 <h3>My numbered list:</h3>
 <ol>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
 </ol>

</body>

</html>

Arrays in JavaScript

This tutorial explains how to set up and access the elements in an array in JavaScript. An array is a data structure which, unlike variables, can store more than one value. For example, an array could store several string values or several numbers. Each element in an array is separated by a comma and all of the elements are stored inside square brackets eg. numbers = [1,2,3,4,5];

You can watch the video below to see how to create and use arrays and scroll down to see the sample code.

Arrays are very useful in any programming language. When you use a simple variable, you can only store one value. For example age = 17 or name = “Harry”. But what if you want to store a list of related values such as all the names of members in a family? That is where arrays come in handy. Take a look at the syntax in the sample code below.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Arrays</title>
 <script type="text/javascript">
 
 // how to declare and initialise an array when you know the values
 var words = new Array("hello","hi","howdy","gday");
 
 // how to print an element from an array
 document.write(words[2]);
 
 // you can also declare an array by specifying the number of elements in the array without adding them eg.
 var pets = new Array(4);
 // and then add values later eg.
 pets[0]= "dog";
 pets[1]= "cat";
 pets[2]= "fish";
 pets[3]= "bird";
 
 // you can also start off with an empty array eg.
 
 var cars = new Array();
 
 // and then add values later
 cars[0]="Mitsubishi";
 cars[1]="Honda";
 cars[2]="Audi";
 
 // Some array hints:
 // each value is an element in an array
 // array elements are accessed using an index which starts from 0
 
// A shorter way of creating an array of integers:
var myNumbers = [1,2,3,4,5];
 
// A shorter way of creating an array of strings:
var myStrings = ["a","b","c"];
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Finding the length of arrays and strings