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%). Ви дізнаєтесь більше про це в наступних розділах підручника на нашому сайті W3Schools українською.
Приклад
<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>
Спробуйте самі »
