INPUTS
Input is used to create interactive controls for web-based forms in order to accept data from the user. WALDO has varieties of input styles available.
Simple Input
This is a simple input with a textarea and a submit button and is customisable according to the user interface. You can copy html part from below code snippet.
Code Example
<div class="textarea-container">
<textarea class="textarea" placeholder="Write something here..."></textarea>
<button class="btn-submit">Submit</button>
</div>
Sign-In Form
This is a sign-in form with individual inputs and a button. You can copy the whole code or use the individual inputs according to your usecase. You can copy html and JS part from below code snippet.
Code Example
<div class="sign-in-container">
<div class="header">
<h2>Sign-In</h2>
</div>
<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username">
<i id="suc" class="fas fa-check"></i>
<i id="err" class="fas fa-exclamation-circle"></i>
<small>Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">
<i id="suc" class="fas fa-check"></i>
<i id="err" class="fas fa-exclamation-circle"></i>
<small>Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password">
<i id="suc" class="fas fa-check"></i>
<i id="err" class="fas fa-exclamation-circle"></i>
<small>Message</small>
</div>
<div class="form-control">
<label for="checkpassword">Check Password</label>
<input type="password" id="checkpassword" placeholder="Check Password">
<i id="suc" class="fas fa-check"></i>
<i id="err" class="fas fa-exclamation-circle"></i>
<small>Message</small>
</div>
<button id="sign-btn">Sign-In</button>
</form>
</div>
Here is a link to a JS file:
https://github.com/pariyar07/WALDO/
https://github.com/pariyar07/WALDO/