How to specify a shorter label for an option in HTML5 ?

How to specify a list of pre-defined options for input controls in HTML?

Last Updated : 24 Jun, 2024

Specify a list of pre-defined options for input controls by using the HTML list Attribute. A pre-defined option for input controls using HTML5's <datalist> element, allowing users to select from a predefined list while typing in an input field.

Syntax:

<input list="datalist_id"/>

Example 1: The example below shows, the HTML form with an input field connected to a datalist providing predefined options for selecting car names.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
        How to specify a list of pre-defined
          options for input controls?
    </title>
</head>

<body>
    <h1 style="color:green">
        How to specify a list of pre-defined
          options for input controls?

    </h1>

    <form action="">
        <label>Your Cars Name: </label>
        <input list="cars">
        <datalist id="cars">
            <option value="BMW" />
            <option value="Bentley" />
            <option value="Mercedes" />
            <option value="Audi" />
            <option value="Volkswagen" />
        </datalist>
    </form>
</body>

</html>

Output:

pre-defined — Output

Example 2: The example below shows, the HTML form with an input field linked to a datalist of predefined options for language selection.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
        List of pre-defined options for input controls
    </title>
</head>

<body>
    <h2>
        List of pre-defined options for input controls

    </h2>
    <input list="Languages" />
    <datalist id="Languages">
        <option value="PHP">
        <option value="ASP">
        <option value="Python">
        <option value="Ruby">
        <option value="Java">
    </datalist>
</body>

</html>

Output:

inputpre-defined-options — Output

How to specify a shorter label for an option in HTML5 ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to define an option in a drop-down list in HTML5 ?

In this article, we will learn how to define an option in a drop-down list in HTML5. The <select> element is used to create a drop-down lists in HTML. This is generally used to present a list of options to the user in a form so that the user could choose one option as the needed one. The <o

How to specify a shorter label for an option in HTML5 ?

The HTML option label attribute specifies the text value that defines the option's shorted label. In the drop-down list, the shorter version will be shown. An object stored in a <select>, <optgroup>, or <datalist> element is defined by the HTML <option> element. As a result,

How to define a list or menu of commands in HTML5 ?

The <menu> tag is used to define a list or menu of commands in HTML5. It can contain more than one <li> or <menuitem> elements. The <menu> tag is only supported by the latest Mozilla firefox web browsers. This tag also supports the event attributes in HTML5. Syntax: <menu

How to specify the name for drop-down list in HTML5 ?

Drop-down lists are also another way to allow people to choose only one choice from a number of alternatives. Since the default option is usually the first item on the list, using the drop-down list can be a safe choice if you know that one option is always preferred over the others. The drop-down l

How to Select Multiple Options at once in Dropdown list in HTML?

Dropdown lists are one of the most flexible elements in HTML. It is similar to that of the radio input, that is, only one item can be selected from a group of items by default. However, when the multiple attribute is used with the <select> element, we can enable the selection of multiple optio

How to create a multiline input control text area in HTML5 ?

The HTML <textarea> tag is used to specify a multiline input control text area in HTML5. Â The <cols> and <rows> attributes specify size of a textarea. Syntax <textarea rows="" cols=""> Contents... </textarea> The <textarea> tag contains 5 attributes that are liste

How to specify an input field must be filled out before submitting the form in HTML ?

In this article, we will specify an input field that must be filled out before submitting the form. The HTML required attribute is a Boolean attribute which is used to specify that the input element must be filled out before submitting the form. This attribute works with other types of input like ra

How to Set Character Limits in HTML Input Fields?

It's often necessary to restrict the number of characters a user can input. This ensures data consistency and prevents users from entering values that are too long or too short. In this article, we will learn how to set the minimum and maximum number of characters allowed in an HTML input field.To s

How to Display Suggestions for Input Field in HTML ?

In most cases, there is a field on forms that allows for auto-completion of user input. This can be achieved using the HTML <datalist>. The <datalist> tag works with the input tag to enable users to quickly fill in data on forms by presenting them with a dropdown list of pre-defined opti

How to specify a label for an optgroup tag in HTML5 ?

The HTML <optgroup> element creates a grouping of options within a <select> element. The HTML <optgroup> label Attribute text is used to specify a label for an option-group. The disabled attribute is used to specify that an option-group should be disabled. Syntax: <optgroup labe