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

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Input / Ввод


Форма ввода










Верхние ярлыки

Форма ввода

Пример

<form class="w3-container">

<label>Имя</label>
<input class="w3-input" type="text">

<label>Фамилия</label>
<input class="w3-input" type="text">

</form>
Попробуйте сами »

Нижние ярлыки

Форма ввода

Пример

<form class="w3-container">

<input class="w3-input" type="text">
<label>Имя</label>

<input class="w3-input" type="text">
<label>Фамилия</label>

</form>
Попробуйте сами »

Карточки ввода

Заголовок


Пример

<div class="w3-card-4">

<div class="w3-container w3-green">
  <h2>Заголовок</h2>
</div>

<form class="w3-container">

<label>Имя</label>
<input class="w3-input" type="text">

<label>Фамилия</label>
<input class="w3-input" type="text">

</form>

</div>
Попробуйте сами »

Цветные ярлыки

Используйте любой из классов w3-text-color чтобы раскрасить ярлыки:

Зарегистрировать

Пример

<form class="w3-container">

<label class="w3-text-blue"><b>Имя</b></label>
<input class="w3-input w3-border" type="text">
 
<label class="w3-text-blue"><b>Фамилия</b></label>
<input class="w3-input w3-border" type="text">

<button class="w3-btn w3-blue">Зарегистрировать</button>
 
</form>
Попробуйте сами »

Ввод с границами

Добавьте класс w3-border для создания ввода с границами:


Пример

<input class="w3-input w3-border" type="text">
Попробуйте сами »

Округлые границы

Используйте любой из классов w3-round для создания округленных границ:


Пример

<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">
Попробуйте сами »

Ввод без границ

Класс w3-input имеет нижнюю границу по умолчанию. Если вы хотите ввод без границ, добавьте класс w3-border-0:


Пример

<form class="w3-container w3-light-grey">
  <label>Имя</label>
  <input class="w3-input w3-border-0" type="text">

  <label>Фамилия</label>
  <input class="w3-input w3-border-0" type="text">
</form>
Попробуйте сами »

Цвета

Не стесняйтесь использовать ваши любимые стили и цвета:

Форма ввода

Зарегистрировать

Пример

<div class="w3-container w3-teal">
  <h2>Форма ввода</h2>
</div>

<form class="w3-container">
  <label class="w3-text-teal"><b>Имя</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="w3-text-teal"><b>Фамилия</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <button class="w3-btn w3-blue-grey">Зарегистрировать</button>
</form>
Попробуйте сами »

Вводы при наведении

Классы w3-hover-цвет добавляет цвет фона в поле ввода при наведении мыши:

Форма ввода

Пример

<input class="w3-input w3-hover-green" type="text">
<input class="w3-input w3-border w3-hover-red" type="text">
<input class="w3-input w3-border w3-hover-blue" type="text">
Попробуйте сами »

Анимированные вводы

Класс w3-animate-input преобразует ширину поля ввода в 100%, когда получает фокус:

Пример

<input class="w3-input w3-animate-input" type="text" style="width:30%">
Попробуйте сами »

Флажки

Пример

<input class="w3-check" type="checkbox" checked="checked">
<label>Молоко</label>

<input class="w3-check" type="checkbox">
<label>Сахар</label>

<input class="w3-check" type="checkbox" disabled>
<label>Лимон (Отключено)</label>
Попробуйте сами »

Радио-кнопки

Пример

<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Мужчина</label>

<input class="w3-radio" type="radio" name="gender" value="female">
<label>Женщина</label>

<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label>Не знаю (Отключено)</label>
Попробуйте сами »

Выберите параметры

Пример

<select class="w3-select" name="option">
  <option value="" disabled selected>Выберите свой вариант</option>
  <option value="1">Параметр 1</option>
  <option value="2">Параметр 2</option>
  <option value="3">Параметр 3</option>
</select>
Попробуйте сами »

Меню выбора с границами

Пример

<select class="w3-select w3-border" name="option">
Попробуйте сами »

Элементы формы в сетке

В этом примере мы используем адаптивную сеточную систему W3.CSS (Responsive Grid System), чтобы входные данные отображались в одной строке (на меньших экранах они будут располагаться горизонтально с шириной 100%). Вы узнаете больше об этом в следующих разделах.

Пример

<div class="w3-row-padding">
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Один">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Два">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Три">
  </div>
</div>
Попробуйте сами »

Сетка с метками

Пример

<div class="w3-row-padding">
  <div class="w3-half">
    <label>Имя</label>
    <input class="w3-input w3-border" type="text" placeholder="Один">
  </div>
  <div class="w3-half">
    <label>Фамилия</label>
    <input class="w3-input w3-border" type="text" placeholder="Два">
  </div>
</div>
Попробуйте сами »

Ярлыки иконок

Связаться с нами


Попробуйте сами »