Inputs are the go to choice when we want to collect data from the user. Input elements plays a vital role in accepting data and send data to the server.
Normal Input
These are normally labelled input fields. It has two categories simple input and error input. Use
input-grp on the container. Please enter valid input
/* Using the 'input-grp' class */
<div class="input-grp">
<label for="username">Email</label>
<input type="email" placeholder="example@example.com">
</div>
<div class="input-grp required err">
<label for="password">Password</label>
<input placeholder="Password" type="password">
<div class="err-msg">Please enter valid input</div>
</div>
Fancy Input
These inputs are better styled for improved user interface. Use
fancy on the container along with input-grp Please enter valid input
/* Using the 'fancy' class inside 'input-grp' */
<div class="input-grp fancy">
<label for="username">Email</label>
<input type="email" placeholder="example@example.com">
</div>
<div class="input-grp fancy required err">
<div class="err-msg">Please enter valid input</div>
<input placeholder="Password" type="password">
<label for="password">Password</label>
</div>
TextArea
To use text-area input, use
input-area in textarea
/* Using the 'input-area' class */
<textarea class="input-area" placeholder="" name=""></textarea>
Radio Input
Radio buttons are very handy when there's only need of only one option from a set of options.
/* Using the 'radio-grp' class on the container and 'radio-btn' class on the span */
<div class="radio-grp">
<input type="radio" checked name="radio" id="radio_1">
<label for="radio_1">
<span class="radio-btn"></span>
Checked</label>
</div>
<div class="radio-grp">
<input type="radio" name="radio" id="radio_2">
<label for="radio_2"><span class="radio-btn"></span>Unchecked</label>
</div>
<div class="radio-grp">
<input type="radio" disabled name="radio" id="radio_2">
<label for="radio_2"><span class="radio-btn"></span>Disabled</label>
</div>
Checbox
Checkboxes buttons are very useful when we require multiple choices from a set of options.
/* Using the 'checkbox-grp' class on the container */
<div class="checkbox-grp">
<input type="checkbox" checked id="checked">
<label for="checked">Checked</label>
</div>
<div class="checkbox-grp">
<input type="checkbox" id="unchecked">
<label for="unchecked">Unchecked</label>
</div>
<div class="checkbox-grp">
<input type="checkbox" disabled id="disabled">
<label for="disabled">Disabled</label>
</div>