ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

КАК Сделать

Главная

Меню

Панель значков Значок меню Аккордеон Вкладки Вертикальные вкладки Заголовки вкладок Вкладки полной страницы Вверх Навигация Отзывчивый Topnav Панель поиска Исправлена ​​боковая панель Боковая навигация Полноэкранная навигация Меню Off-Canvas Наведение с помощью кнопок Меню горизонтальной прокрутки Вертикальное меню Нижняя навигация Отзывчивый снимок Nav Ссылки на нижнюю границу Ссылки справа Центрированные ссылки меню Исправлено меню Слайд-шоу в прокрутке Скрыть Navbar в прокрутке Прикрепленное Navbar Выпадающие окна Hover Нажмите «Раскрывающиеся окна» Раскрытие в Топнаве Распространение в Сидене Откроется панель Navbar Dropup Mega Menu пагинация Панировочные сухари Группа кнопок Группа вертикальных кнопок Важная социальная панель Отзывчивый заголовок

Изображения

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

Кнопки

Кнопки оповещения Кнопки структуры Кнопки разделения Анимированные кнопки Кнопки затухания Кнопка на картинке Кнопки социальных сетей Кнопки загрузки Кнопки загрузки Значки Кнопки «Далее»/«предыдущий» Кнопки блокировки Текстовые кнопки Круглые пуговицы Прокрутка к верхней кнопке

Формы

Форма входа Форма регистрации Бланк заказа Контактная форма Форма для входа в социальную систему Форма регистрации Форма с иконками Бюллетень Адаптивная форма Очистить поле ввода Копировать текст в буфер обмена Анимированный Поиск Кнопка поиска Полноэкранный Поиск Настраиваемый флажок/Радио Выборочный выбор Тумблер Установите флажок Проверка пароля Переключение видимости паролей Форма с несколькими шагами Автозаполнения

Фильтры

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

Таблицы

Зебра полосатые таблицы Адаптивные таблицы Сравнительная таблица

Больше

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

Сайт

Создать веб-сайт Создать веб-сайт (BS3) Создать веб-сайт (BS4) Веб-сайт центра Контактная Секция

Сетка

2 расположение колонок 3 Расположение колонок 4 расположение колонок Разворачивание сетки Представление сетки списка Компоновка смешанных столбцов Макет блога

Google

Карты Google Карты Google BW Google перевести Google чарты Google шрифты

Конвертеры

Преобразовать вес Преобразовать температуру Преобразовать длину Конвертировать скорость

Как сделать - адаптивную форму


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


Адаптивная форма

Измените размер окна браузера, чтобы увидеть эффект (метки и входы будут складываться поверх друг друга, а не рядом друг с другом на меньших экранах):


Создание адаптивной формы

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

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.

Добавьте входные данные (с соответствующей меткой) для каждого поля и заключите элемент <div> вокруг каждой метки и ввода, чтобы задать заданную ширину с помощью CSS:

Пример

<div class="container">
  <form action="action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>


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

Пример

/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Совет: Пойдите к нашему учебнику формы HTML для того чтобы выучить больше о формах HTML.

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