Форми в m.css ver.1.2

Основні елементи форм мають базову стилізацію за допомогою m.css. Легко помітити відступи по 10px - це характерна особливість даної версії CSS-фреймворку. Так би мовити, "магічне число 10".

Окремої уваги заслуговують поля прапорців checkbox та перемикачів radio. На перший погляд їх важко відрізнити, хіба що за поведінкою. Їх стилізація з використанням flexbox видалась нам особливо зручною, оскільки великі описання прапорців тепер можуть вміститись в 2 ряди. Це також стосується всіх контейнерів label в формах.

Горизонтальна форма

Вертикальна форма

Елементи форми

Назва	Код	Елемент
Сповіщення помилки	<div class="error">Some error text</div>	Some error text
Сповіщення зауваження	<div class="notice">Some notice text</div>	Some notice text
Сповіщення успіху	<div class="success">Some success text</div>	Some success text
Текстове поле	<input type="text">
Числове поле	<input type="number">
Поле паролю	<input type="password">
Поле Email	<input type="email">
Багаторядкове текстове поле	<textarea name="comment" rows="3"></textarea>
Стилізований чекбокс	<input type="checkbox" id="check-id"> <label class="checkbox" for="check-id">some text</label>	some text
Перемикачі	<input type="radio" name="radio" id="radio1"> <label class="checkbox" for="radio1">some option 1</label> <input type="radio" name="radio" id="radio2"> <label class="checkbox" for="radio2">some option 2</label>	some option 1 some option 2
Маленький чекбокс	<input type="checkbox" id="check-id"> <label class="checkbox" for="check-id">some text</label>	some text
Кнопка	<a class="btn">Text</a>	Text
Контрастна (біла) кнопка	<a class="btn btn-white">Text</a>	Text
Кнопка надсилання	<input type="submit">
Кнопка надсилання 2	<button type="submit">Send</button>
Кнопка з іконкою FontAwesome	<button><i class="fa fa-save"></i> Text</button>

Форми в m.css ver.1.2

Горизонтальна форма

Вертикальна форма

Елементи форми

Коментарі користувачів