Input

Input Text

Es uno de los elementos de un formulario más utilizado, esto se debe que en el se definen nombres, apellidos, direcciones, etc.

i-error

La biblioteca dispone de una clase para alertar al usuario sobre la información erronea dentro del campo de texto que es .i-error.

Es una forma de validación, cuando el usuario ingresa valores correctos dentro del input se remueve la clase i-error del input y se habilita la posibilidad de enviar el formulario.

Grupo Input

Existe dentro de la biblioteca un agrupador de elementos de formulario, a través de el podemos agrupar un conjunto para obtener un nuevo elemento con ciertas características que mejoran la experiencia del usuario.

        

            

                

                    @
                    
                    Enviar
                
            
        
    

Grilla

Para personalizar más el formulario podemos utilizar una Grilla.

        

            

                

                    

                        Nombre
                        
                    
                
                

                    

                        Apellido
                        
                    
                
                

                    

                        @
                        
                        Consultar
                    
                
                

                    

                        Password
                        
                    
                
                

                    

                        Repetir
                        
                    
                
            
        
    

Tamaños

Estos grupos pueden ser definidos en tres tamaños (S, M, L) por defecto si no se especifica la medida el elemento es de tamaño medio como en los ejemplos anteriores.
Ahora vamos a ver las dos medidas restantes.

        

            

                

                    @
                    
                    
                
            
        


        

            

                

                    @
                    
                    
                
            
        
    
    

Temas y Colores

Hasta el momento vimos los colores por defecto de los grupos de input, pero que pasa si queremos que estos elementos no sean claros sino oscuros. Para esta tarea utilizaremos los colores de Fondo y de Texto de la biblioteca. Por simplicidad voy a dar solo unos ejemplos, pero tengan en cuenta que puede utilizarse cualquier color provisto por Bodystyle.

    

        

            

                
                    @
                
                
            
        
        

            

                
                    @
                
                
            
        
        

            

                
                    @
                
                
            
        
        

            

                
                    @
                
                
            
        
        

            

                
                    @
                
                
            
        
        

            

                
                    @
                
                
            
        
    
    

Input Icon

Ahora vamos a ver ejemplos de otro modelo de input en el cual se incorporan íconos. Para realizar esto vamos a encerrar al ícono y al input dentro de un div con la clase .input-icon.

Required

Así como los demás modelos de input que se vieron en los apartados anteriores en este caso si se tiene el archivo con la lógica de Bodystyle incorporada con el archivo bodystyle.min.js esto ejecutará un módulo que se carga por defecto que es el InputHandler que no necesita inicialización.