How to Create a Progress Bar using HTML?

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 Create a Progress Bar using HTML?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to specify an input field is read-only in HTML ?

In this article, we will specify an input field is read-only in HTML. The readonly attribute of <input> element is used to specify that the input field is read-only. If an input is readonly, then itâ€™s content cannot be changed but can be copied and highlighted. It is a boolean attribute. Synta

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 listed

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 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 create a group of related options in a drop-down list using HTML ?

We can define a group of related options in a drop-down list by using the <optgroup> Tag tag is used to create a group of same category options in a drop-down list. The tag is required when there is a long list of items. Example: <!DOCTYPE html> <html> <head> <title> Ho