Как воткнуть календарик во "Вспомнить все"?

    <body>
        <form action="/echo" method="post">
            <label for="name">Имя</label>
            <input type="text" id="name">
            
            <div class="half-width">
                <label for="date">Дата рождения</label>
                <input type="text" name="birth" id="date">
            </div>
            
            <div class="half-width">
                <label for="color">Цвет</label>
                <select id="color">
                    <option value="red">Рыжий</option>
                </select>
                
            </div>
            <label for="petting"></label>
            <input type="checkbox" id="petting"> Разрешать гладить
            
            <label for="dish">Секретное блюдо</label>
            <input type="password" name="passport" required>
            <div class="buttons">
                
                <input type="submit" value="Сохранить">
            </div>
        </form>
    </body>

Как вставить эту маленькую картинку с календариком? Задание выполнено на 95%, потому что она не вставляется…

И почему нужно было оборачивать подпись и форму в именно через id и for? Ведь первый описанный способ в “Формах” как-то попроще? Или это фишка этого задания?)

Вот это правило в css отвечает за вставку календарика:
.date { width: 120px; background: url('/assets/course74/calend.png') no-repeat 97% 50%; }
Значит что надо сделать? Правильно, добавить полю класс date.
По поводу второго вопроса, про label - это скорее фишка испытания. Иначе отступы между полем и надписью не сходятся с образцом.