Forms

Forms are useful for getting input from user.

Normal Types of Inputs

Underline Input

Username

<div class="sw-form-input-wrapper">

<label class="sw-form-input-label" for="name">Username</label>

<input id="name" type="text" class="sw-form-input" />

</div>

Bordered Input

Username

<div class="sw-form-input-wrapper">

<label class="sw-form-input-label" for="name">Username</label>

<input id="name" type="text" class="sw-form-input-bordered" />

</div>

Bordered Textarea

Username

<div class="sw-form-input-wrapper">

<label class="sw-form-input-label" for="name">Username</label>

<textarea id="name" type="text" class="sw-form-input-bordered" cols="30" rows="4"></textarea>

</div>

Invalid Types of Inputs

Undeline Invalid Input

Username This is not a valid input

<div class="sw-form-input-wrapper">

<label class="sw-form-input-label" for="name">Username</label>

<input id="name" type="text" class="sw-form-input is-invalid" />

<span class="invalid-text"> This is not a valid input </span>

</div>

Invalid Bordered Input

Username This is not a valid input

<div class="sw-form-input-wrapper">

<label class="sw-form-input-label" for="name">Username</label>

<input id="name" type="text" class="sw-form-input-bordered is-invalid" />

<span class="invalid-text"> This is not a valid input </span>

</div>

Invalid Textarea

Username This is not a valid input

<div class="sw-form-input-wrapper">

<label class="sw-form-input-label" for="name">Username</label>

<textarea id="name" type="text" class="sw-form-input-bordered is-invalid" cols="30" rows="4"></textarea>

<span class="invalid-text"> This is not a valid input </span>

</div>

Checkbox Input

<div class="sw-checkbox m-5">

<input type="checkbox" name="check1" id="check1" />

<label for="check1" class="sw-check"></label>

</div>