Creating a form with a select element

Select elements or "drop-down lists" are used in a form when radio buttons won't cut it, either because there are too many choices or because they always take the same space no matter how many options.

Getting ready

I suggest you complete a recipe on data binding or forms before delving into the world of select elements. The Creating a form with radio buttons recipe will make you familiar with radio buttons, which have a function similar to select elements.

How to do it...

In this recipe, we will create a simple country selector. I will start by writing the selector without the help of Vue, just to brush up on HTML. First, create a form in which to put the select element:

<form> 
  <fieldset> 
    <legend>Choose your country</legend> 
      <!-- here goes the select element --> 
  </fieldset> 
</form>

Inside the fieldset, write the code for the select element:

<select> 
  <option>Japan</option> 
 ...