Испытание: формы — вспомнить всё [1/28] - 94%

Курсы §21. Формы, часть 2
1

Не могу понять, как вставить картинку с календарём в поле ввода и как сделать отступы между наименованием текстового поля и самим текстовым полем, прошу помочь:

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание: формы — вспомнить всё</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="/echo" method="post"> 
        <label>Имя<input type="text"></label>
              
              <div class="half-width">
                <label>Дата рождения
                <input type="text">
                  </label>
                    </div>
                   
       
            <div class="half-width">
                <label>
               Цвет <select>
                   <option value="red">Рыжий</option>
                   </select>
                 </label>
            </div>
            <label><input type="checkbox">Разрешать гладить</label>
                    
         <label>Секретное блюдо
         <input type="password">
            </label>
            <div class="buttons">
             <input value="Сохранить" type="submit">
            </div>
                </form>
    </body>
</html>
2

по поводу картинки с календарём:
присмотритесь к css, возможно найдёте там некий класс, который вам поможет вставить картинку.
а по поводу отступов:
я думаю Вам стоит освежить знания из курса Знакомство с формами.

1 лайк
3

Присоединяюсь к сказанному выше.
Для этого задания вам нужно применить еще один способ связи поля и подписи - по id.

1 лайк
4

Класс .date, разумеется, заметил сразу. Вставка его в код результата не даёт.
По ID привязывал в первую очередь, результат аналогичный. Это уже второй вариант кода.

upd: методом подбора догадался, куда .date вставить) Ранее пытался вставить div в разные места кода, кто бы мог подумать, что нужно было всего-лишь задать соответствующий класс полю ввода.

5

с отступами не разобрались?

6

Пока ещё нет.

7

не привязывайте <label> к полю ввода.
то есть привязывайте посредством идентификатора, а не посредством <label>

1 лайк
8

Благодарю за подсказку. Действительно, неправильно использовал оборачивание в <label> с привязкой по ID.

Получился вот такой код:

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание: формы — вспомнить всё</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="/echo" method="post"> 
        <label for="imya">Имя</label>
        <input type="text" id="imya" name="username">
              
              <div class="half-width">
                <label for="den">Дата рождения</label>
                <input type="text" class="date" id="den" name="data">
                  </div>
                   
       
            <div class="half-width">
                <label for="color">Цвет</label>
                <select id="color">
                   <option value="red">Рыжий</option>
                   </select>
                </div>
                    
                    <label for="gladit"><input type="checkbox" id="gladit"> Разрешать гладить </label>
                    
                           <label for="secret">Секретное блюдо</label>
         
         <input type="password" id="secret" name="parol">
            
            <div class="buttons">
             <input value="Сохранить" type="submit">
            </div>
                </form>
    </body>
</html>

Последний вопрос - обязательно ли было задавать в данном испытании имена полям ввода?

9

атрибут name используется для идентификации данных, отправляемых на сервер.

Допустим вы отправляете input c атрибутом name=“login”. На сервере отобразится следующее: login:SNPR.

2 лайка