Entradas de datos (Input File)

Descubre la simplicidad y flexibilidad de Quickly para diseñar formularios con entradas de tipo archivo personalizadas. Aplica estilos y personalízalas fácilmente para que se adapten a tu diseño de manera intuitiva y atractiva. Nuestra biblioteca de estilos garantiza que los campos de archivo sean visualmente consistentes y funcionalmente precisos, facilitando la subida de documentos, imágenes, videos y mejorando la experiencia del usuario.

Entrada Tipo Archivo

Las entradas de tipo archivo están diseñadas específicamente para aceptar y manejar archivos subidos por los usuarios. Utiliza estas entradas para recolectar documentos, imágenes, videos y cualquier otro tipo de archivo necesario. La validación adecuada asegura que los archivos subidos cumplan con los requisitos establecidos, mejorando la precisión y utilidad de los datos recolectados.

Atributo / Clase Descripción
required Para activar la validación de los campos, debes especificar el atributo.
disabled / .disabled Para deshabilitar el campo, debes especificar el atributo correspondiente o la clase.

Ejemplo

Archivo (Requerido)
¡Texto ok!
¡Texto error!
Archivo (No Requerido)
¡Texto ok!
¡Texto error!
Archivo (Deshabilidato)
¡Texto ok!
¡Texto error!
HTML 
     
    <!-- Requerido -->  
    <div class="form-group">
        <fieldset>
            <legend>Archivo (Requerido)</legend>
            <label>
                <input type="file" name="archivo" id="fileInput" required>
            </label>
        </fieldset>
        <div class="valid-feedback">¡Texto ok!</div>
        <div class="invalid-feedback">¡Texto error!</div>                                               
    </div>           
    
    <!-- No Requerido --> 
    <div class="form-group">
        <fieldset>
            <legend>Archivo (No Requerido)</legend>
            <label>
                <input type="file" name="archivo" id="fileInput">
            </label>
        </fieldset>
        <div class="valid-feedback">¡Texto ok!</div>
        <div class="invalid-feedback">¡Texto error!</div>                                                
    </div>   
    
    <!-- Deshabilitado -->    
    <div class="form-group">
        <fieldset>
            <legend>Archivo (Deshabilidato)</legend>
            <label>
                <input class="disabled" type="file" name="archivo" id="fileInput" disabled>
            </label>
        </fieldset>
        <div class="valid-feedback">¡Texto ok!</div>
        <div class="invalid-feedback">¡Texto error!</div>                                               
    </div>