Атрибут list тега <input> — підказки зі списку datalist

<form> 
  	<p><b>З використанням атрибуту list </b></p>
  	 <label for="color">Ваш улюблений колір?</label><br>
   <p><input list="color"></p>
   <datalist id="color">
    <option>Червоний</option>
    <option>Чорний</option>
    <option>Жовтий</option>
    <option>Зелений</option>
    <option>Синій</option>
    <option>Сірий</option>
    <option>Смарагдовий</option>
    <option>Сливовий</option>

   </datalist> 
  </form> 
<br>
  <form > 
  		<p><b>Без використання атрибуту list</b></p>
  	 <label for="color" >Ваш улюблений колір?</label><br>
   <p><input ></p>
   <datalist id="color">
       <option>Червоний</option>
    <option>Чорний</option>
    <option>Жовтий</option>
    <option>Зелений</option>
    <option>Синій</option>
    <option>Сірий</option>
   </datalist> 
  </form>

HTML

<p><label for="a">Робоче поле — клацніть і побачите підказки</label></p>
<input id="a" list="cities" placeholder="почніть вводити місто">
<datalist id="cities">
    <option value="Київ"></option>
    <option value="Львів"></option>
    <option value="Одеса"></option>
    <option value="Харків"></option>
</datalist>

<p><label for="b">Помилка в id: list="citys" при id="cities" — підказок немає, і жодного попередження теж</label></p>
<input id="b" list="citys" placeholder="тут не буде нічого">

<p><label for="c">Пастка value: у підказці «Київ», а в поле потрапить kyiv</label></p>
<input id="c" list="codes" placeholder="оберіть і подивіться на поле">
<datalist id="codes">
    <option value="kyiv">Київ</option>
    <option value="lviv">Львів</option>
</datalist>

<p class="note">Той самий datalist, якому примусово задано display: block — звичайно
    браузер тримає його схованим, і на сторінці його не видно:</p>
<datalist id="shown" class="visible">
    <option value="Київ"></option>
    <option value="Львів"></option>
</datalist>

CSS

p {
    margin: 18px 0 4px;
    max-width: 520px;
}

label {
    font-weight: 600;
}

input {
    padding: 6px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    min-width: 260px;
}

.note {
    color: #5a6472;
    font-size: .9em;
}

.visible {
    display: block;
    padding: 6px 10px;
    border: 2px dashed #d64545;
    background: #fff8f8;
}

.visible option {
    display: block;
    padding: 2px 0;
}