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 для создания ввода с границами:
Округлые границы
Используйте любой из классов 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-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>
Попробуйте сами »
Меню выбора с границами
Элементы формы в сетке
В этом примере мы используем адаптивную сеточную систему 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>
Попробуйте сами »
