Forms in m.css ver.1.2

Basic form elements have basic styling using m.css. It is easy to see 10px indentation - a characteristic feature of this version of CSS framework. We call it the "magic number 10".

The box of checkboxes and radio switches deserve special attention. At first glance, they are difficult to distinguish, except by behavior. Their styling with flexbox seemed to us particularly convenient, as large descriptions of the flags can now fit into 2 rows. This also applies to all label containers in forms.

Horizontal form

Vertical form

Forms elements

Назва	Код	Елемент
Error alert	<div class="error">Some error text</div>	Some error text
Notice alert	<div class="notice">Some notice text</div>	Some notice text
Success alert	<div class="success">Some success text</div>	Some success text
Text field	<input type="text">
Number field	<input type="number">
Password field	<input type="password">
Email field	<input type="email">
Textarea	<textarea name="comment" rows="3"></textarea>
Styled checkbox	<input type="checkbox" id="check-id"> <label class="checkbox" for="check-id">some text</label>	some text
Radio inputs	<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
Small checkbox	<input type="checkbox" id="check-id"> <label class="checkbox" for="check-id">some text</label>	some text
Button	<a class="btn">Text</a>	Text
White (contrast) button	<a class="btn btn-white">Text</a>	Text
Submit button	<input type="submit">
Annother submit button	<button type="submit">Send</button>
Button with FontAwesome icon	<button><i class="fa fa-save"></i> Text</button>

Forms in m.css ver.1.2

Horizontal form

Vertical form

Forms elements

Users comments