How to use datalist input in html?

[Kitsada]

I want to use datalist in html, I tried it and it doesn't work.

image >> aatQKl.png (716×484) (img.in.th)

<label for="reigster">Log in</label>

<input type="text" class="input" placeholder="Username" id="user" list="username-list">

<datalist id="username-list">

    <option value="John">

    <option value="Doe">

    <option value="Jane">

</datalist>

<input type="text" class="input" placeholder="Password" id="pass">

<div class="btn-go btn-login">Log in</div>

1 minute ago, Kitsada said:

I want to use datalist in html, I tried it and it doesn't work.

image >> aatQKl.png (716×484) (img.in.th)

<label for="reigster">Log in</label>
<input type="text" class="input" placeholder="Username" id="user" list="username-list">
<datalist id="username-list">
    <option value="John">
    <option value="Doe">
    <option value="Jane">
</datalist>
<input type="text" class="input" placeholder="Password" id="pass">
<div class="btn-go btn-login">Log in</div>

 

 

[FLUSHBICEPS]

u should close ur "<options>" tags afaik

[IIYAMA]

On 15/04/2023 at 16:17, Kitsada said:

I want to use datalist in html, I tried it and it doesn't work.

I tested your code and it works fine.

But keep in mind that in your current setup it is used as an auto complete feature. Typing `Jo` makes auto complete John available. Also when you press your arrow-down key, it should act more as the options tag as @FLUSHBICEPS referring to.