Introduction to input

The.inputclass

With class input you can change the style of the classic form input elements and adding cross-platform validation support (client side)

Example textarea

Example select

Example multiple select

Note

Adding the class.round is possible to round the corners of the element 5 px

Changing the size of the input

Using the class .dm-you can change the length of the element

Example:

Using the class.size-you can change the size of the element

Example:

The validation of input

Adding the class .input-error the color of the element's border will turn red, indicating a possible error, instead using the class .input-success the border will turn green indicating the correct data entry.

Example:

Input disabled or read-only

Adding to the input attribute disabled="disabled" you can disable

Example:

Adding input readonly attribute you can disable

Example:

Input with icons or text

If you want to use the icons associated with the input, you can use the class .group-inputand.group-item

Example:

,00
,00
,00
,0000

Input of type checkbox or radio

Example login:

Login
@
Invio
Login

Validate the input

Addrequired="true" to validate input, known types aretest, number, url, emailbut you can pass a pattern data-pattern="reg_expr"you can also set the text of the error messagedata-error-message="your_text"

Example:

Javascript

using avalidate() plug-in zjs

zjs('.validate').validate();//return true o false and show the error message

Example custom error message and pattern:

@
Send