Tag: html

Sustituir icono radio button bootstrap 4

Vamos a sustituir el icono standard del radio button por algo más visible. En este caso práctico vamos a cambiar el modo de visualización de un listado, por lo que vamos a hacer que los iconos sean visiblemente más acorde a lo que se sugiere que es cambiar la vista a modo «Bloque» o modo «Listado».

Para realizar la estructura HTML he usado – bootstrap 4

Para los iconos – fontawesome 5

La estructura CSS tiene que estar bien anidada para no machacar otros estilos.

Efecto Inclinado (Skew Effect) HTML + CSS

La inclinación de bordes con CSS (css skew effect) es el efecto en el que los laterales (izquierda y/o derecha) aparecen inclinados. Ejemplo:

El efecto lo logramos utilizando la propiedad transform: skew.  Con esto y un poco más de estilos obtenemos el resultado.

HTML:

<div id="user-config-1" class="square-skew square-dark-blue text-white">
<span>
<label>Config 1</label>
<i type="btn" class="edit-config fas fa-pencil-alt" title="Editar"></i>
<i type="btn" class="remove-config fa fa-times"></i>
</span></div>

CSS:

.square-skew {
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
    padding: 0.2rem 0;
    position: relative;
    left: 10px;
    float: left;
}

.square-skew label {
    margin: 0 !important;
    font-weight: bold;
}

.square-skew span {
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    display: inline-block;
    font-size: 0.625rem;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.square-dark-blue {
    background-color: #007cb6;
    margin-right: 0.625rem;
}

Nueva línea en textarea (HTML, PHP)

Para crear un salto de línea en PHP en una variable de tipo STRING que estamos concatenando, simplemente añadiremos la función nativa de PHP: PHP_EOL (END OF LINE).

Por ejemplo:

$nombresParticipantes = '';

foreach ($participantes as $participante){

$nombresParticipantes .= $participante[‘nombre’].’  ‘ $participante[‘apellidos’].PHP_EOL;

}

<textarea><?php echo $nombresParticipantes ?></textarea>

Para añadir una nueva línea vía HTML utilizaremos el código html:
<textarea>Manuel Prieto &#13;&#10; Enrique Prieto</textarea>
Esto nos mostrará en el textarea un texto tipo listado:

Validar Tamaño y Tipo de Archivo Input File con HTML + Jquery

Validar tipo de archivo con HTML

Para validar el tipo de archivo que puede aceptar un Input File necesitaremos el atributo «accept» para que una vez se abra el dialogo para elegir el archivo se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.

<input id="campoFile" accept="tipo_de_archivo|audio/*|video/*|image/*|media_type" name="archivo" type="file" value="" />

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc): accept=»audio/*»
IMAGES: accept=»image/gif,image/jpeg,image/jpg,image/png»
EXCEL 97-2003 (.xls): accept=»application/vnd.ms-excel»
EXCEL 2007+ (.xlsx): accept=»application/vnd.openxmlformats-officedocument.spreadsheetml.sheet»
PDF: accept=».pdf»
VIDEO (.avi, .mpg, .mpeg, .mp4): accept=»video/*»

Validar Tamaño y Extensión con Javascript y Jquery

Para validar el tamaño del archivo utilizaremos una función muy sencilla utilizando JQUERY antes de enviarlo por POST.

Prueba con las diferentes extensiones y cambia el código Javascript para ver los resultados: