Getting Started
Layout
Components
Design
Input
An input is a part of form and it is a user interface element that allows a user to submit data.
Using our class ".null-form-input" , you will get a simple and clean design.
- Basic:
<form method="get" action="/">
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="firstName" placeholder="First Name"/>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="lastName" placeholder="Last Name"/>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="email" name="email" placeholder="Email"/>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="number" name="number" placeholder="Number"/>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="password" name="password" placeholder="Password"/>
</div><!--End null-margin-bottom-20-->
</form>Add disabled attrubite if you want to disable an input:
<form method="get" action="/">
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="disabled" placeholder="Disabled" disabled/>
</div><!--End null-margin-bottom-20-->
</form>You can add the below HTML code to show form error under each input:
<span class="null-form-error">Message</span> <form method="get" action="/">
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="firstName" placeholder="First Name" required/>
<span class="null-form-error">First name is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="lastName" placeholder="Last Name" required/>
<span class="null-form-error">Last name is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="email" name="email" placeholder="Email" required/>
<span class="null-form-error">Email is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="number" name="number" placeholder="Number" required/>
<span class="null-form-error">Number is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="password" name="password" placeholder="Password" required/>
<span class="null-form-error">Password is required</span>
</div><!--End null-margin-bottom-20-->
</form>You can add the below HTML code to show form success under each input:
<span class="null-form-success">Message</span>
<form method="get" action="/">
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="firstName" placeholder="First Name" value="First Name"/>
<span class="null-form-success">First name is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="text" name="lastName" placeholder="Last Name" value="Last Name"/>
<span class="null-form-success">Last name is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="email" name="email" placeholder="Email" value="Email"/>
<span class="null-form-success">Email is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="number" name="number" placeholder="Number" value="1"/>
<span class="null-form-success">Number is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<input class="null-form-input" type="password" name="password" placeholder="Password" value="true"/>
<span class="null-form-success">Password is vaild</span>
</div><!--End null-margin-bottom-20-->
</form>- With Label:
<form method="get" action="/">
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="firstName">
First Name :
</label>
<input class="null-form-input" id="firstName" type="text" name="firstName" />
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="lastName">
Last Name :
</label>
<input class="null-form-input" id="lastName" type="text" name="lastName" />
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="email">
Email :
</label>
<input class="null-form-input" id="email" type="text" name="email" />
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="number">
Number :
</label>
<input class="null-form-input" id="number" type="number" name="number" />
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="password">
Password :
</label>
<input class="null-form-input" id="password" type="text" name="password" />
</div><!--End null-margin-bottom-20-->
</form>Add disabled attrubite if you want to disable an input:
<form method="get" action="/">
<div class="null-margin-bottom-20">
<label null-disabled="disabled" class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="disabled">
Disabled :
</label>
<input class="null-form-input" id="disabled" type="text" name="disabled" disabled/>
</div><!--End null-margin-bottom-20-->
</form>You can add the below HTML code to show form error under each input:
<span class="null-form-error">Message</span> <form method="get" action="/">
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="firstName">
First Name :
</label>
<input class="null-form-input" id="firstName" type="text" name="firstName" required/>
<span class="null-form-error">First name is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="lastName">
Last Name :
</label>
<input class="null-form-input" id="lastName" type="text" name="lastName" required/>
<span class="null-form-error">Last name is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="email">
Email :
</label>
<input class="null-form-input" id="email" type="text" name="email" required/>
<span class="null-form-error">Email name is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="number">
Number :
</label>
<input class="null-form-input" id="number" type="number" name="number" required/>
<span class="null-form-error">Number name is required</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="password">
Password :
</label>
<input class="null-form-input" id="password" type="password" name="password" required/>
<span class="null-form-error">Password name is required</span>
</div><!--End null-margin-bottom-20-->
</form>You can add the below HTML code to show form success under each input:
<span class="null-form-success">Message</span> <form method="get" action="/">
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="firstName">
First Name :
</label>
<input class="null-form-input" id="firstName" type="text" name="firstName" value="First Name"/>
<span class="null-form-success">First name is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="lastName">
Last Name :
</label>
<input class="null-form-input" id="lastName" type="text" name="lastName" value="Last Name"/>
<span class="null-form-success">Last name is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="email">
Email :
</label>
<input class="null-form-input" id="email" type="text" name="email" value="Password"/>
<span class="null-form-success">Email name is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="number">
Number :
</label>
<input class="null-form-input" id="number" type="number" name="number" value="1"/>
<span class="null-form-success">Number name is vaild</span>
</div><!--End null-margin-bottom-20-->
<div class="null-margin-bottom-20">
<label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="password">
Password :
</label>
<input class="null-form-input" id="password" type="passowrd" name="password" value="true"/>
<span class="null-form-success">Password is vaild</span>
</div><!--End null-margin-bottom-20-->
</form>