Формы и HTML5 / Кнопка-изображение [4/28]
×

Кнопка-изображение [4/28]

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

src адрес изображения
alt альтернативный текст, отображаемый в том случае, если изображение не загружено

Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Кнопка-изображение</title> <meta charset="utf-8"> <link rel="stylesheet" href="/assets/course74/keksik-style.css"> </head> <body> <header class="page-header">Форма логина</header> <main> <form action="/echo" method="post"> <label for="name">Имя</label> <input type="text" id="name" name="name" value="Кексик"> <label for="password">Пароль</label> <input type="password" id="password" name="password"> <label> <input type="checkbox" name="allow"> Разрешать гладить </label> <!-- Кнопка-изображение --> </form> </main> <footer class="page-footer"></footer> </body> </html>
CSS
form { width: 300px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 10px #cccccc; } label { display: block; margin-bottom: 5px; } input { border-radius: 5px; font-family: "Roboto", sans-serif; } input[type="text"], input[type="password"] { width: 95%; height: 24px; margin-bottom: 10px; padding: 2px 5px; border: 1px solid #cccccc; } input[type="image"] { padding: 5px; vertical-align: top; } input[type="submit"] { display: inline-block; margin: 0 5px; padding: 6px 15px; color: #ffffff; background: #2c3e50; border: none; }
HTML Academy
  1. Добавьте кнопку-изображение /assets/course74/enter.png c альтернативным текстом Войти.
  2. Задайте стиль для этой кнопки border: 1px solid #cccccc;.
  3. Нажмите на кнопку и проверьте ее работу.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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