Input
Inputs are really important part of any website whenever user interacts if we want to get some data from user, we can use input elements.
Label Input
Label inputs have label defined on top of them which displays what type of data is to be inserted into that input field. These input fields can be used to display error messages if a user enters some wrong data or badly formatted data.
Please enter correct email.
Please enter a strong password.
Password matched.
<-- Using the 'input-grp' class as outside container -->
<-- Using the 'input' class for normal input field without validation -->
<-- Using the 'input-error' and 'error-msg' class for error validation -->
<div class="input-grp">
<label>Email address</label>
<input class="input input-error" type="email" placeholder="Email address">
<div class="error-msg">Please enter correct email.</div>
</div>
Textarea Input
Textarea input is used to get large chunks of data. Sometimes user needs to provide a large data in that case it is used.
<-- Using the 'sq-img' class name -->
<textarea class="textarea" placeholder="Please provide your feedback."></textarea>
Radio Input
Radio buttons provide user with multiple inputs and user can onlye one option from them.
<-- Using the 'label-radio' class for label and 'input-radio' for input tag -->
<-- Using the 'btn-radio' class on div for creating radio button -->
<label for="yes" class="label-radio">
<input id="yes" name="verify" type="radio" class="input-radio" checked />
<div class="btn-radio"></div>
Yes
</label>