Skip to main content

Advanced Form Elements (Live Playground)

In this tutorial, we will discuss advanced form elements in HTML, such as datalist and progress. These elements help you create more complex and interactive forms for your web pages.

Datalist​

The <datalist> element is used to provide a predefined list of options for an <input> element. It allows users to select an option from a dropdown list or type in their input. Here's an example of using the datalist element:

HTML
<label for="city">City:</label>
<input list="cities" id="city" name="city" />
<datalist id="cities">
  <option value="New York"></option>
  <option value="Los Angeles"></option>
  <option value="Chicago"></option>
  <option value="Houston"></option>
  <option value="Miami"></option>
</datalist>

The list attribute of the input element should match the id of the datalist element.

Live Playground, Try it Yourself

Progress​

The <progress> element is used to represent the completion progress of a task, such as a file upload or a survey. It is a visual indicator of progress and can be updated using JavaScript. Here's an example of using the progress element:

HTML
<label for="upload">File Upload:</label>
<input type="file" id="upload" name="upload" />
<progress id="progress" max="100" value="0"></progress>

In this example, the max attribute represents the total work to be done, and the value attribute represents the work completed so far. You can use JavaScript to update the value attribute as the task progresses.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, we have discussed advanced form elements in HTML, such as datalist, and progress. These elements can help you create more complex and interactive forms for your web pages, improving the user experience and accessibility.