САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

КАК СДЕЛАТЬ

Главная

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

КНОПКИ

Кнопки оповещенияКонтур кнопокКнопка с разделениемАнимированные кнопкиИзменяющиеся кнопкиКнопка на изображенииКнопки социальных сетейКнопки читать больше/меньшеКнопки загрузокКнопка скачатьКнопка таблеткаКнопка уведомленияКнопки значкиКнопки вперед и назадДополнительная кнопкаКнопка блокКнопка текстКруглые кнопкиКнопка прокрутки вверх

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ФИЛЬТРЫ

Фильтр спискаФильтр таблицыФильтр элементовФильтр выпадающего спискаСортировка спискаСортировка таблицы

ТАБЛИЦЫ

Полосатая таблицаОтзывчивая таблицаТаблица сравнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

ВЕБ САЙТ

Сделать сайтСделать сайт (W3.CSS)Сделать сайт (BS3)Сделать сайт (BS4)Страница по центруРаздел контактаБольшой заголовокПример сайта

СЕТКА

2 Колонки макета3 Колонки макета4 Колонки макетаСетка расширяющаясяВид сетки и спискаСмешанные столбцы макетаСтолбцы карточекЗигзагообразный макетМакет блога

GOOGLE

Google графикGoogle шрифты

КОНВЕРТОРЫ

Конвертер массыКонвертер температурыКонвертер длиныКонвертер скорости

PYTHON

Удалить список дубликатовРеверс строки

Как сделать - форму входа



Узнать, как создать адаптивную форму входа с помощью CSS.


Форма входа

Нажмите на кнопку, чтобы открыть форму входа:


×Аватар
Забыли пароль?

Редактор кода »


Создать форму входа

Шаг 1) Добавить HTML:

Добавить изображение внутри контейнера и добавьте входные данные (с соответствующей меткой) для каждого поля. Оберните элемент <form> вокруг них, чтобы обработать ввод. Вы можете узнать больше о том, как обрабатывать входные данные в нашем учебникЕ PHP.

Пример

<form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Аватар" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Пользователь</b></label>
    <input type="text" placeholder="Введите имя" name="uname" required>

    <label for="psw"><b>Пароль</b></label>
    <input type="password" placeholder="Введите пароль" name="psw" required>

    <button type="submit">Вход</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Запомнить меня
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Отменить</button>
    <span class="psw">Забыли <a href="#">пароль?</a></span>
  </div>
</form>


Шаг 2) Добавить CSS:

Пример

/* Окаймленная форма */
form {
  border: 3px solid #f1f1f1;
}

/* Входы полной ширины */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Установите стиль для всех кнопок */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Добавить эффект наведения для кнопок */
button:hover {
  opacity: 0.8;
}

/* Дополнительный стиль для кнопки отмены (красный) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Центрируйте изображение Аватара внутри этого контейнера */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Аватар изображение */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

/* Добавить отступы для контейнеров */
.container {
  padding: 16px;
}

/* Текст "Забыли пароль" */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Измените стили для кнопки span и cancel на очень маленьких экранах */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}
Редактор кода »

Создать модальную форму входа

Шаг 1) Добавить HTML:

Пример

<!-- Кнопка для открытия модальной формы входа -->
<button onclick="document.getElementById('id01').style.display='block'">Ввод</button>

<!-- Модальный -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Закрыть модальный">&times;</span>

  <!-- Модальный контент -->
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Аватар" class="avatar">
    </div>

    <div class="container">
      <label for="uname"><b>Пользователь</b></label>
      <input type="text" placeholder="Введите имя" name="uname" required>

      <label for="psw"><b>Пароль</b></label>
      <input type="password" placeholder="Введите пароль" name="psw" required>

      <button type="submit">Ввод</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Запомнить меня
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Отменить</button>
      <span class="psw">Забыли <a href="#">пароль?</a></span>
    </div>
  </form>
</div>

Шаг 2) Добавить CSS:

Пример

/* Модальный (фон) */
.modal {
  display: none; /* Скрыто по умолчанию */
  position: fixed; /* Оставаться на месте */
  z-index: 1; /* Сидеть на вершине */
  left: 0;
  top: 0;
  width: 100%; /* Полная ширина */
  height: 100%; /* Полный рост */
  overflow: auto; /* Включите прокрутку, если это необходимо */
  background-color: rgb(0,0,0); /* Цвет запасной вариант */
  background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
  padding-top: 60px;
}

/* Модальное Содержание/коробка */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% сверху и по центру */
  border: 1px solid #888;
  width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
}

/* Кнопка закрытия */
.close {
  /* Расположите его в правом верхнем углу за пределами модели */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Кнопка закрытия при наведении курсора мыши */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Добавить анимация масштабирования */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

Совет: Вы также можете использовать следующий javascript для закрытия модального, щелкнув за пределами модального содержимого (а не только с помощью кнопки "x" или "отмена", чтобы закрыть его):

Пример

<script>
// Получить модальное окно
var modal = document.getElementById('id01');

// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
Редактор кода »

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSSL Форма, чтобы узнать больше о том, как стилизовать элементы формы.