--- layout: default permalink: /forms category: components form: form title: Forms description: "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." ---

{{page.title}} Component

{{page.description}}


Basic example:
{% highlight html %} {% endhighlight %}

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

Example:
{% highlight html %} {% endhighlight %}
Sizes

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

{% highlight html %} {% endhighlight %}
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.

{% highlight html %} {% endhighlight %}
Disabled
{% highlight html %} {% endhighlight %}
Readonly

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

{% highlight html %} {% endhighlight %}
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.

{% highlight html %}
{% endhighlight %}

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.

{% highlight html %}
{% endhighlight %}
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.

{% highlight html %}

This is information text or help.

{% endhighlight %}
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
{% highlight html %}
...
{% endhighlight %}
{% highlight html %}
Username
@gmail.com
{% endhighlight %}
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
{% highlight html %}
Text helper
@gmail.com
{% endhighlight %}

Add the background and text colors to personalize. Color palette

@eFrolicss
@eFrolicss
@eFrolicss
@eFrolicss
@eFrolicss
{% highlight html %}
@eFrolicss
@eFrolicss
{% endhighlight %}
Multiple inputs
First and last name
First and last name
{% highlight html %}
First and last name
{% endhighlight %}
Button addons
{% highlight html %}
{% endhighlight %}
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.

{% highlight html %}

This is information text or help.

This username is not available.

{% endhighlight %}
With icons

Use icons inside the containers, using the help elements.

{% highlight html %}
{% endhighlight %}

Remove the edges. Borders

{% highlight html %}
{% endhighlight %}

Add the background and text colors to personalize. Color palette

{% highlight html %}
{% endhighlight %}
Form grid

Build impressive and complex forms with the grid system.

Example:
{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}
Horizontal form

Build impressive and complex forms with the grid system.

Example:
{% highlight html %}
{% endhighlight %}
Form box

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

Example:

Sign up

At least 8 characters.

{% highlight html %}
...
{% endhighlight %}
{% highlight html %}

Sign up

At least 8 characters.

{% endhighlight %}
Select

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

Example:
{% highlight html %} {% endhighlight %}

Sizes




{% highlight html %} {% endhighlight %}

With icons
{% highlight html %}
{% endhighlight %}

Combinations
Options
{% highlight html %}
{% endhighlight %}
Multiple select
{% highlight html %} {% endhighlight %}
Textarea

The traditional textarea and its variations.

{% highlight html %} {% endhighlight %}

Status


{% highlight html %} {% endhighlight %}

Disabled
{% highlight html %} {% endhighlight %}

Readonly
{% highlight html %} {% endhighlight %}
Checkbox

It does not apply extravagant styles to traditional checkboxes.

{% highlight html %} {% endhighlight %}

Disabled
{% highlight html %} {% endhighlight %}
Radio

It does not apply extravagant styles to traditional Radio.

{% highlight html %} {% endhighlight %}

Disabled
{% highlight html %} {% endhighlight %}
File

{% highlight html %} {% endhighlight %}
Range Inputs

Apply styles to horizontal scroll rank entries using our classes.

{% highlight html %} {% endhighlight %}
Colors

{% highlight html %} {% endhighlight %}
Disabled
{% highlight html %} {% endhighlight %}