In this video, we're going to see how to create and use a select box, also known as a dropdown box. This element gives you a good amount of control, as you can pre-determine the items or choices that are available for a user.

Now, let's add some select boxes right below our text area. As always, we'll start with a label, and call it "source". Next, we'll create a select box with the tag <select>. Inside this tag, we'll use the <option> tag for each choice., like this:

<label for="source">How did you hear about us?</label>
<select name="source">
  <option value="google">Google</option>
   <option value="yahoo">Yahoo</option>
   <option value="fb">Facebook</option>
   <option value="twitter">Twitter</option>
</select>

One thing to note here is that the name you give in the value attribute is the one that gets passed from page to page. So, make sure to give it a meaningful name. The description or the content you provide between tags is only for the user and will have no bearing whatsoever on server-side code.

The output will be a dropdown box.

The default value for this dropdown box is the one at the top, which in this case, is "Google." If you have something else, say "Facebook" as the first option, then that'll be the default.
So, that's how you create a dropdown box in HTML.

Now, what happens when you want users to select multiple items from a list?

To do that, simply add an attribute called multiple in your select tag, and set its value to "true"

<select name ="source" multiple = "true">

With this code, users can hold the command key and select multiple values like this:

If you're thinking this is rare, you're mistaken, because there are many situations where you'll use it. For example, I built a site called "www.crudelist.com", and here I allow users to select multiple items for the category.

In many ways, this is nothing but a styled version of our dropdown box.

So, that's your introduction to select boxes.