Stylet forms

Stylet also offers form designs and features. You can create not just beautiful but responsive and moderate forms using Stylet. To use, we need to add the class nameform inside our form tag:

<form class="form">
.....
</form>
Let's create an awesome form using Stylet:
<form class="form">
<label> Username </label>
<input type="text" name="" class="input" placeholder="your username...">
<label> Password </label>
<input type="password" name="" class="input" placeholder="******">
<button type="submit" class="button pad-3 purple-to-lavenderblush-bg mar-top-4 full-button">
Login to continue </button>
</form>

We can also easily disable an input using the class name disabled

<form class="form">
<input type="text" name="" class="input disabled mar-btm-3" disabled placeholder="i am disabled">
<input type="password" class="input" disabled placeholder="i am also disabled">
</form>

Creating a row form

<form class="form">
<div class="column-auto mar-right-3">
<label for="email">Email</label>
<input type="text" class="input" placeholder ="you@example.com"/>
</div>
<div class="column-auto mar-left-3">
<label for="password">Password</label>
<input type="password" class="input" placeholder="Password"/>
</div>
<div class="column-auto mar-left-7">
<button class="button mar-top-10 pad-4 pad-left-4 pad-right-4 button blue-to-light-blue-bg text-white">
Login to continue
</button>
</div>
</form>

File input

A file input allows you to upload images, videos, audio, apps and documents.

Let's create an input that accepts more than one media to be uploaded at a time. Try to upload more than one media:

<input type="file" name="" class="input" />
<input class="input" type="file" multiple />

Datalist example

Datalists allow you to create options that can be accessed and autocompleted from within an <input>.

<label>Datalist example</label>
<input class="input" list="fordataList" placeholder="Type to search...">
<datalist id="fordataList">
<option value="html">
<option value="css">
<option value="js">
<option value="php">
<option value="django">
</datalist>

Select input

The select input allows you to select an option.

<select class="input select">
<option disabled class="disabled">Select Department</option>
<option>Science</option>
<option>Art</option>
<option>Commercial</option>
</select>
Stylet's Form Validation
Stylet already has class names which acts as the Front-end UI validation.

To add a success or verified looking feature to an input, all you need to do is add the class name success-input

To add an error, warning or unverified looking feature to an input, all you need to do is add the class name error-input We can even create success and error messages using Stylet.

i am an error message

i am a success message


<input type="" name="" class="input success-input" placeholder="hello">
<input type="" name="" class="input error-input" placeholder="hello">
<p class="error-msg">i am an error message</p> <br>
<p class="success-msg">i am a success message</p>