Member Avatar for ncis_sg1

Hello everyone,

This is my first week in a new language and I am having trouble with html5. Here is the question and then I will post my code. I need create an autocomplet input element with an assciated datalist that contains the days of the week. I have everything the way it needs to be but for some reason I am not getting my dropdown list of all of the week days. I need to be able to start typing in a day of the week and have it pop up in a drop down list to select from. Can anyone help me with my code for this to happen? Thank you in advance.

<!DOCTYPE html>

<!--3.8 Solution -->

<html>
   <head>
      meta charset="uft-8">
      <title>Homework 1</title>
   </head>

   <body>
      <h1>Enter A Day of the Week</h1>

      <!-- turn autocmplete on -->
      <form metod = "post"  autocomplete = "on">
         <p><label for = "txtList" >Day:
           placeholder = "Day of the Week" list = "days" />
         <datalist id = "days">
            <option value = "Sunday">
            <option value = "Monday">
            <option value = "Tuesday">
            <option value = "Wednesday">
            <option value = "Thursday">
            <option value = "Friday">
            <option value = "Saturday">
        </datalist>
    </label></p>
    <p><input type = "submit"  value = "Submit" />
       <input type = "reset"   value = "Clear" /></p>
    </form>
   </body>
</html>
  • 2 Contributors
  • 4 Replies
  • 938 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by ncis_sg1

Dani AI

Generated

Short expert note: as spotted, the immediate cause was the missing input element — but a few other issues in the original markup will also stop the datalist from behaving as expected. Common gotchas to check (seen in the thread): the meta tag spelling/closure (use meta charset="utf-8"), the form attribute spelled method, and misplaced attributes (placeholder belongs on the input, not inside the label).

Important implementation details not yet called out in the replies: the label’s for must reference the input’s id (not the datalist id). The input itself should have an id, a name if the value must submit with the form, and its list attribute must match the datalist’s id. The <datalist> can be placed anywhere inside the form (or even outside) — it does not render by itself, it only supplies suggestions to the matched input.

Practical troubleshooting steps: validate the cleaned HTML with an HTML validator to catch typos and unclosed tags; open developer tools to look for parse errors; test focus and typing behavior in the target browser (some engines only show suggestions after typing or after pressing down-arrow). Remember that datalist styling and keyboard/ARIA behavior differ between browsers, and it may not be announced reliably by screen readers — if strict accessibility or guaranteed cross-browser behavior is required, prefer a native <select> or a small JavaScript-backed combobox.

In short: fix the typos, give the input an id + name, set list to the datalist id, and ensure the label’s for points at that input. Once those are corrected the suggestions for the days of the week will appear as intended.

Recommended Answers

All 4 Replies

Member Avatar for Member #671080

Hi,

You have the syntax slightly wrong. You missed out the <input> tag.

<input list="txtList"> // Must match the 'id' of your datalist tag below.
<datalist id="txtList">
  <option value="Sunday">
  <option value="Monday">
  <option value="Tuesday">
  <option value="Wednesday">
  <option value="Thursday">
  <option value="Friday">
  <option value="Saturday">
</datalist>

You have a few typo's in the code on line 7 and line 17 (incomplete tags) so you will also need to look at those.

Member Avatar for ncis_sg1

I found my typo's but I don't understand where I need to place the input tag to get the program to work. What line does it need to be on and how can I get it to do the drop down choices. I am sorry I am a pain but this is very very new to me.

Member Avatar for Member #671080

Hi again.

Firstly, sorry about my bad comment tag in the previous example, I used PHP syntax instead of HTML.

The <datalist> and <label> elements are used to give information to the form and are not displayed so can be placed anywhere. Just below the <form> tag is a good place.

The <datalist> is tied to the one of the <input> tags by using an 'id' that matches the 'list' element of the <input> tag.

The <input> elements are the actual fields on the form. The first <input> creates the textbox a user can type the day of the week into, the second is the submit button, the third is the clear button.

You can find a very simple .

<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>Homework 1</title>
</head>
<body>
<h1>Enter A Day of the Week</h1>

<form metod = "post" autocomplete = "on">
<!-- The form information -->
    <datalist id="txtList">
        <option value = "Sunday">
        <option value = "Monday">
        <option value = "Tuesday">
        <option value = "Wednesday">
        <option value = "Thursday">
        <option value = "Friday">
        <option value = "Saturday">
    </datalist>

    <label for = "txtList">Day:</label>

<!-- The form fields -->
    <input list = "txtList" placeholder = "Day of the Week" >
    <p><input type = "submit" value = "Submit" />
    <input type = "reset" value = "Clear" /></p>
</form>

</body>
</html>
Member Avatar for ncis_sg1

Thank you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.