Input
Input fields are used to having interaction with users on a website. It is a core feature to collect
the data.
Label Input (Login Page)
Label input comes with a label. It can be customised by showing errors or some message at top of the
input box.
<div class="login-container">
<h1>Login</h1>
<div class="login-credential">
<div class="login-email">
<label for="">Email address *</label>
<input type="email" name="" id="">
</div>
<div class="login-password">
<label for="">Password *>/label>
<input type="password" name="" id="">Wrong password. Try again.
</div>
</div>
<div class="con">
<div class="remember-me">
<input type="checkbox" id="remember-box">
<label id="remember-box" for="">Remember me
</label>
</div>
<a href="">Forgot your password?</a>
</div>
<div class="login-btns">
<a href="" class="login">Login</a>
<a href="" class="new-account">Create New Account <strong>></strong></a>
</div>
</div>
Radio
Radio button allows users to select options from the set. It can be created by using class =
"radio.
<div class="radio">
<label for="radio-1">Checked
<input id="radio-1" name=radio" type="radio" checked>
</label>
</div>
<div class="radio">
<label for="radio-2">Unchecked
<input id="radio-2" name=radio" type="radio" unchecked>
</label>
</div>
<div class="radio">
<label for="radio-3">Disabled
<input id="radio-3" name=radio" type="radio" disabled>
</label>
</div>
Checkbox
Checkbox allows users to choose more than one item from the set. It can be created by using
class = "checkbox.
<div class="checkbox">
<label for="checkbox-1">Checked
<input id="checkbox-1" name=checkbox" type="checkbox" checked>
</label>
</div>
<div class="checkbox">
<label for="checkbox-2">Unchecked
<input id="checkbox-2" name=checkbox" type="checkbox" unchecked>
</label>
</div>
<div class="checkbox">
<label for="checkbox-3">Disabled
<input id="checkbox-3" name=checkbox" type="checkbox" disabled>
</label>
</div>