Forms Component

Use traditional custom forms controls to give a good user experience. We use a pleasant style and regulated to the standards, modern, simple and adaptable.

Basic example:
<input class="e-control" type="text" placeholder="@eFrolic">

Use the class e-control for all your controls.
It can be applied to all types of input control, textarea, file among others.

Example:
<input class="e-control" type="text" placeholder="Text input">

<input class="e-control" type="email" placeholder="Email input">

<input class="e-control" type="password" placeholder="Pass input">

<input class="e-control" type="tel" placeholder="Tel input">

<input class="e-control" type="file">

<textarea class="e-control" placeholder="Textarea"></textarea>
Sizes

Add the classes small or plus to change the size of your controls.

<input class="e-control small" type="text" placeholder="Text">
<input class="e-control" type="text" placeholder="Text">
<input class="e-control plus" type="text" placeholder="Text">
Status / Colors

The controls do not include all the colors, only the colors that represent a state have been added, that is; Only colors or statuses are available:
* Success *
* Danger *
We choose only these two colors because they are those that represent the states of the system or warn the user.

<input class="e-control success" type="text" value="@Valid user">
<input class="e-control danger" type="text" value="@Invalid user">
Disabled
<input class="e-control" type="text" placeholder="@eFrolic" disabled>
Readonly

Use readonly HTML to get a static entry, your text is not editable, it is only available for reading.

<input class="e-control" type="text" value="@eFrolic" readonly>
Styles

Rounded

Add the class rounded to the parent container to transform all the controls contained in it.

You can add to each one in particular or use it directly in the parent container to save writing.

Example:

This is information text or help.

This is information text or help.

<form class="rounded"><!-- Here -->
  <div class="e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>
  <div class="e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>
</form>

Change color

You can change the color of the controls by a light gray color by adding the class default to the parent container of the controls.

Example:

This is information text or help.

<form class="rounded default"><!-- Here -->
  <div class="e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>
  <div class="e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>
</form>
<!-- or -->
<form class="default"><!-- Only -->
  <div class="e-form-group">
    <input class="e-control" type="text" placeholder="Text">
  </div>
</form>
Form groups

The class e-form-group to create a container around the controls by grouping them into small sections.

This is information text or help.

<div class="e-form-group">
  <label class="e-label">Label</label>
  <input class="e-control" type="text" placeholder="Text">
  <p class="e-form-info">This is information text or help.</p>
</div>

<div class="e-form-group">
  <button type="button" class="e-btn primary">Button</button>
</div>
Form group unified

Use the class unified to easily unify the form controls by adding buttons, text, select, among others.

Basic example:
Username
@gmail.com 
<div class="e-form-group unified"><!-- Here -->
  ...
</div>

<div class="e-form-group unified">
  <div class="e-control-helper">
    Username
  </div>
  <input class="e-control" type="text" placeholder="@eFrolic">
</div>

<div class="e-form-group unified">
  <input class="e-control" type="text" placeholder="Your email">
  <div class="e-control-helper marked">
    @gmail.com
  </div>
</div>

<label class="e-label">Find a repository</label>
<div class="e-form-group unified">
  <div class="e-control-helper">
    <i class="fas fa-search text-primary"></i>
  </div>
  <input class="e-control" type="text" placeholder="Search...">
  <button type="button" class="e-btn primary">Search</button>
</div>
Control helper

Use class e-control-helper to create a help container.

Text helper

Add marked to mark the text and add light gray color.

@gmail.com 
<div class="e-form-group unified">
  <div class="e-control-helper"><!-- Here -->
    Text helper
  </div>
  <input class="e-control" type="text" placeholder="...">
</div>

<div class="e-form-group unified">
  <div class="e-control-helper marked"><!-- Here marked -->
    @gmail.com
  </div>
  <input class="e-control" type="text" placeholder="...">
</div>

Add the background and text colors to personalize. Color palette

@eFrolicss
@eFrolicss
@eFrolicss
@eFrolicss
@eFrolicss 
<div class="e-form-group unified">
  <div class="e-control-helper primary"><!-- Here -->
    @eFrolicss
  </div>
  <input class="e-control" type="text" placeholder="...">
</div>

<div class="e-form-group unified">
  <div class="e-control-helper text-danger"><!-- Here -->
    @eFrolicss
  </div>
  <input class="e-control" type="text" placeholder="...">
</div>
Multiple inputs
First and last name
First and last name 
<div class="e-form-group unified">
  <div class="e-control-helper marked">
    First and last name
  </div>
  <input class="e-control" type="text" placeholder="First name">
  <input class="e-control" type="text" placeholder="Last name">
</div>
Button addons
<div class="e-form-group unified">
  <button type="button" class="e-btn primary">Button</button>
  <input class="e-control" type="text" placeholder="...">
</div>
Help text

Use help text or information to indicate states or warnings to the user.

Example:

This is information text or help.

This username is not available.

<div class="e-form-group">
  <label class="e-label">Username</label>
  <input class="e-control" type="text" placeholder="Text">
  <p class="e-form-info">This is information text or help.</p>
</div>

<div class="e-form-group">
  <label class="e-label">Username</label>
  <input class="e-control danger" type="text" value="@eFrolicss">
  <p class="e-form-info text-danger">This username is not available.</p>
</div>
With icons

Use icons inside the containers, using the help elements.

<div class="e-form-group unified">
  <div class="e-control-helper">
    <i class="far fa-envelope"></i><!-- Icon -->
  </div>

  <input class="e-control" type="email" placeholder="Email">

  <div class="e-control-helper">
    <i class="fas fa-check"></i><!-- Icon -->
  </div>
</div>

Remove the edges. Borders 

<div class="e-form-group unified">
  <div class="e-control-helper no-border-right">
    <i class="far fa-envelope text-primary"></i>
  </div>
  <input class="e-control no-border-x" type="email" placeholder="Email">
  <div class="e-control-helper no-border-left">
    <i class="fas fa-check text-success"></i>
  </div>
</div>

Add the background and text colors to personalize. Color palette 

<div class="e-form-group unified">
  <div class="e-control-helper">
    <i class="fas fa-lock text-danger"></i>
  </div>
  <input class="e-control" type="password" placeholder="Pass">
</div>
<div class="e-form-group unified">
  <div class="e-control-helper danger">
    <i class="fas fa-lock"></i>
  </div>
  <input class="e-control" type="password" placeholder="Pass">
</div>
Form grid

Build impressive and complex forms with the grid system.

Example:
<form class="...">
  <div class="e-cols">
    <div class="e-col">
      <input class="e-control" type="text" placeholder="Text">
    </div>
    <div class="e-col">
      <input class="e-control" type="text" placeholder="Text">
    </div>
  </div>
</form>
<form class="e-cols">
  <div class="e-col-6 e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>

  <div class="e-col-6 e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>

  <div class="e-col-8 e-form-group">
    <input class="e-control" type="search" placeholder="Search...">
  </div>

  <div class="e-col-4 e-form-group">
    <button type="button" class="e-btn fullwidth primary">Search</button>
  </div>

  <div class="e-col-12 e-form-group">
    <label class="e-label">Label</label>
    <input class="e-control" type="text" placeholder="Text">
  </div>

  <div class="e-col-12 e-form-group between">
    <label><input type="checkbox">
      I agree to the <a href="#">terms and conditions</a>
    </label>
    <button type="button" class="e-btn success">Get started</button>
  </div>
</form>
Horizontal form

Build impressive and complex forms with the grid system.

Example:
<form class="e-cols no-gap">
  <div class="e-col-2 e-form-group">
    <label class="e-label">Email</label>
  </div>
  <div class="e-col e-form-group">
    <input class="e-control" type="email" placeholder="Email">
  </div>
  <i class="w-100"></i>
  <div class="e-col-2 e-form-group">
    <label class="e-label">Password</label>
  </div>
  <div class="e-col e-form-group">
    <input class="e-control" type="password" placeholder="Pass">
  </div>
  <i class="w-100"></i>
  <div class="e-col-2 e-form-group">
    <label class="e-label">Message</label>
  </div>
  <div class="e-col e-form-group">
    <textarea class="e-control" placeholder="Message"></textarea>
  </div>
</form>
Form box

It is a container element of forms to give elegant and personal appearances.

Example:

Sign up

At least 8 characters.

<form class="e-form-box">
  ...
</form>

<form class="e-form-box text-center">
  <h3 class="text-gray">Sign up</h3>
  <div class="e-section">
    <div class="e-form-group unified">
       <input class="e-control" type="text" placeholder="First name">
       <input class="e-control" type="text" placeholder="Last name">
    </div>
    <div class="e-form-group unified">
    <div class="e-control-helper">
    <i class="fas fa-lock text-danger"></i>
    </div>
    <input class="e-control" type="password" placeholder="Password">
    </div>
    <p class="e-form-info">At least 8 characters.</p>
    <div class="e-form-group">
       <input class="e-control" type="text" placeholder="@Username">
    </div>
    <div class="e-form-group">
       <label>
         <input type="checkbox"/>
         Subscribe to our newsletter
       </label>
    </div>
    <div class="e-form-group">
    <button type="button" class="e-btn fullwidth primary"> Sign in</button>
    </div>
  </div>
</form>
Select

Stylize the HTML drop-down selectors, create beautiful combinations with buttons, inputs, text and more.

Example:
<select class="e-select">
  <option>Select dropdown</option>
  <option>Options one</option>
  <option>Options two</option>
</select>

Sizes




<select class="e-select small">
  <option>Select dropdown</option>
  <option>Options</option>
</select>
<select class="e-select plus">
  <option>Select dropdown</option>
  <option>Options</option>
</select>

With icons
<div class="e-form-group unified">
  <div class="e-control-helper">
    <i class="far fa-clipboard text-danger"></i>
  </div>
  <select class="e-select">
    <option>Select dropdown</option>
    <option>Options one</option>
  </select>
</div>

<div class="e-form-group unified">
  <div class="e-control-helper no-border-right">
    <i class="fas fa-lock text-danger"></i>
  </div>
  <select class="e-select no-border-left">
    <option>Select dropdown</option>
    <option>Options one</option>
  </select>
</div>

<div class="e-form-group unified">
  <div class="e-control-helper no-border-right">
    <i class="fas fa-lock text-danger"></i>
  </div>
  <select class="e-select plus no-border-left">
    <option>Select dropdown</option>
  </select>
</div>

Combinations
Options 
<div class="e-form-group unified">
  <select class="e-select">
    <option>Select dropdown</option>
    <option>Options one</option>
  </select>
  <input class="e-control" type="text" placeholder="..">
</div>
<div class="e-form-group unified">
  <button type="button" class="e-btn sky">Button</button>
  <input class="e-control" type="text" placeholder="..">
  <select class="e-select">
    <option>Select dropdown</option>
    <option>Options one</option>
  </select>
</div>
</div>
Multiple select
<select class="e-select" multiple size="5">
  <option value="Options">Options</option>
  <option value="Options">Options</option>
  <option value="Options">Options</option>
</select>
Textarea

The traditional textarea and its variations.

<textarea class="e-control" placeholder="Textarea"></textarea>

Status


<textarea class="e-control success" placeholder=".."></textarea>

<textarea class="e-control danger" placeholder=".."></textarea>

Disabled
<textarea class="e-control" placeholder=".." disabled></textarea>

Readonly
<textarea class="e-control" readonly>@eFrolicss</textarea>
Checkbox

It does not apply extravagant styles to traditional checkboxes.

<label>
  <input type="checkbox">
  I agree to the <a href="#">terms and conditions</a>
</label>

Disabled
<label disabled>
  <input type="checkbox">
  I agree to the <a href="#">terms and conditions</a>
</label>
Radio

It does not apply extravagant styles to traditional Radio.

<label>
  <input type="radio" name="eFrolic">
  Yes
</label>
<label>
  <input type="radio" name="eFrolic">
  No
</label>

Disabled
<label disabled>
  <input type="radio" name="eFrolic">
  Yes
</label>
<label disabled>
  <input type="radio" name="eFrolic">
  No
</label>
File

<input class="e-control" type="file" name="eFrolic">
Range Inputs

Apply styles to horizontal scroll rank entries using our classes.

<input type="range" class="e-range">
Colors

<input type="range" class="e-range primary">
<input type="range" class="e-range success">
<input type="range" class="e-range danger">
<input type="range" class="e-range warning">
<input type="range" class="e-range sky">
<input type="range" class="e-range purple">
<input type="range" class="e-range gray">
<input type="range" class="e-range dark">
<input type="range" class="e-range black">
<input type="range" class="e-range green-gradient">
<input type="range" class="e-range purple-gradient">
<input type="range" class="e-range blue-gradient">
<input type="range" class="e-range inst-gradient">
Disabled
<input type="range" class="e-range" disabled>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2020
eFrolic | framework css 2020

One-time donation

Donate
eFrolic | framework css 2020
eFrolic | framework css 2020

Serious sponsor

Become a Patron

From LATAM, built with a lot and for everyone by