Forms

is used to create interactive controls for web-based forms in order to accept data from the user.

Examples #

here is a quick example of the form style.

<div class="n-form-field">
    <label>Username</label>
    <input class="n-form-control" type="text" placeholder="enter username..." name="username"/>
</div>
<div class="n-form-field">
    <label>Password</label>
    <input class="n-form-control" type="password" placeholder="enter password..." name="password"/>
</div>

Username

Password

Validation Design #

it use to show visibility of validation.

<div class="n-form-field n-form-valid">
    <label>Username</label>
    <input class="n-form-control" type="text" value="mytabworks" name="username"/>
    <div class="n-valid-feedback"><span role="img">✔️</span> username is valid!</div>
</div>
<div class="n-form-field n-form-invalid">
    <label>Password</label>
    <input class="n-form-control" type="password" value="123456" name="password"/>
    <div class="n-invalid-feedback">wrong credentials</div>
</div>

Username

✔️ username is valid!

Password

wrong credentials

Checkbox #

it a user select ZERO or MORE options of a limited number of choices.

<div class="n-form-field">
    <label class="n-form-check"><input class="n-form-control" type="checkbox" name="cb-ex" value="1" />checkbox 1</label>
    <label class="n-form-check"><input class="n-form-control" type="checkbox" name="cb-ex" value="2" />checkbox 2</label>
    <label class="n-form-check"><input class="n-form-control" type="checkbox" name="cb-ex" value="3"/>checkbox 3</label>
</div>

checkbox 1checkbox 2checkbox 3

Radio #

it a user select only one of a limited number of choices.

<div class="n-form-field">
    <label class="n-form-check"><input class="n-form-control" type="radio" name="r-ex" value="1" />radio 1</label>
    <label class="n-form-check"><input class="n-form-control" type="radio" name="r-ex" value="2" />radio 2</label>
    <label class="n-form-check"><input class="n-form-control" type="radio" name="r-ex" value="3" />radio 3</label>
</div>

radio 1radio 2radio 3

Inline radio and checkboxes #

instead using .n-form-check class. you must use .n-form-check-inline class otherwise.

<div class="n-form-field">
    <label class="n-form-check-inline"><input class="n-form-control" type="checkbox" name="cb-ex" value="1" />checkbox 1</label>
    <label class="n-form-check-inline"><input class="n-form-control" type="checkbox" name="cb-ex" value="2" />checkbox 2</label>
    <label class="n-form-check-inline"><input class="n-form-control" type="checkbox" name="cb-ex" value="3"/>checkbox 3</label>
</div>
<div class="n-form-field n-form-inline">
    <label class="n-form-check-inline"><input class="n-form-control" type="radio" name="r-ex" value="1" />radio 1</label>
    <label class="n-form-check-inline"><input class="n-form-control" type="radio" name="r-ex" value="2" />radio 2</label>
    <label class="n-form-check-inline"><input class="n-form-control" type="radio" name="r-ex" value="3" />radio 3</label>
</div>

checkbox 1checkbox 2checkbox 3

radio 1radio 2radio 3

Switch #

it a user select ZERO or MORE options of a limited number of choices.

<div class="n-form-field">
    <div class="n-switch">
        <input id="switch-1" type="checkbox" />
        <label class="n-switch-label" for="switch-1">switch</label>
    </div> 
    <div class="n-switch">
        <input id="switch-2" type="checkbox" disabled />
        <label class="n-switch-label" for="switch-2">(disabled)</label>
    </div>
</div>

switch

(disabled)

Range #

defines a control for entering a number whose exact value is not important (like a slider control).

<input class="n-form-control" type="range" />

Color #

a color picker can show up in the input field.

<input class="n-form-control" type="color" />

Textarea #

element defines a multi-line input field.

<textarea class="n-form-control" placeholder="enter comment..." ></textarea>

Select #

element defines a drop-down list.

<select class="n-form-control" >
    <option value="">choose wisely...</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

Active state #

.active class will forcely focus the form fields.

<input class="n-form-control active" type="text" placeholder="enter text..."/>
<label class="n-form-check"><input class="n-form-control active" type="checkbox" value="1" />checkbox</label>
<label class="n-form-check"><input class="n-form-control active" type="radio" value="1" />radio</label>
<input class="n-form-control active" type="range" />
<input class="n-form-control active" type="color" />
<textarea class="n-form-control active" placeholder="enter comment..." />
<select class="n-form-control active">
    <option value="">choose wisely...</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

checkbox

radio

Disabled state #

Specifies that an form field should be disabled.

<input class="n-form-control" type="text" placeholder="enter text..." disabled/>
<label class="n-form-check"><input class="n-form-control" type="checkbox" value="1" disabled />checkbox</label>
<label class="n-form-check"><input class="n-form-control" type="radio" value="1" disabled />radio</label>
<input class="n-form-control" type="range" disabled />
<input class="n-form-control" type="color" disabled />
<textarea class="n-form-control" placeholder="enter comment..." disabled />
<select class="n-form-control" disabled>
    <option value="">choose wisely...</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

checkbox

radio

DARK THEME

Forms

Warning!