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
  • 851 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by ncis_sg1
Member Avatar for Zagga

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 Zagga

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 example here.

<!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.