The select
tag is an HTML element that allows you to create a dropdown list of options within a form. The option
tag is used to define the options within the dropdown list. Here’s an example of how to use the select
tag:
<form action="/submit-form" method="post"> <label for="country">Select a country:</label> <select id="country" name="country"> <option value="usa">United States</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> <button type="submit">Submit</button> </form>
In this example, we’re creating a dropdown list of countries. The select
tag contains three option
tags, each with a value
attribute that specifies the value that will be submitted to the server if the user selects that option. The text between the option
tags is the text that will be displayed to the user in the dropdown list.
The id
attribute of the select
tag is used to uniquely identify the dropdown list, and the name
attribute specifies the name of the dropdown list, which will be used to retrieve the selected value on the server.
You can also add the multiple
attribute to the select
tag to allow the user to select multiple options from the dropdown list, like this:
<form action="/submit-form" method="post"> <label for="fruits">Select your favorite fruits:</label> <select id="fruits" name="fruits" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> <option value="grape">Grape</option> </select> <button type="submit">Submit</button> </form>
In this example, the multiple
attribute has been added to the select
tag, allowing the user to select multiple options. The selected options will be submitted as an array of values to the server.