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

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×

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

Вы уже наверняка прошли вводный курс посвященный формам. Давайте быстро вспомним, чему мы научились.

Используйте для выполнения задания теги:

  • input с разными значениями type
  • select
  • label

У одного поля ввода должен быть дополнительный класс. Не забывайте размечать подписи к полям. Большая часть подписей содержит только текст, но одна подпись оборачивает и поле, и текст подписи.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Испытание: формы — вспомнить всё</title> <meta charset="utf-8"> </head> <body> <form action="/echo" method="post"> Имя <div class="half-width"> Дата рождения </div> <div class="half-width"> Цвет </div> Разрешать гладить Секретное блюдо <div class="buttons"> Сохранить </div> </form> </body> </html>
CSS
form { width: 300px; margin: 0 auto; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #cccccc; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"], select { width: 95%; height: 24px; margin-bottom: 10px; padding: 2px 5px; border: 1px solid #cccccc; border-radius: 5px; } input[type="submit"] { display: inline-block; width: auto; margin: 0 5px; padding: 6px 15px; color: #ffffff; background: #2c3e50; border: none; border-radius: 5px; } .half-width { display: inline-block; width: 50%; margin-right: -4px; } .half-width input, .half-width select { width: 80%; } .date { width: 120px; background: url('/assets/course74/calend.png') no-repeat 97% 50%; } .buttons { text-align: center; } body { width: 460px; padding: 20px; font-size: 14px; font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif; }
<HTML Academy>
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.