Interacción

Formularios de interacción

Los elementos de interacción son aquellos encargados de establecer un vínculo de comunicación entre el usuario y la plataforma o el servicio web. En el caso de las fichas o formularios, existen variadas funciones, lo que requiere diferentes casillas o inputs de relleno. Adaptados al sistema o servicio de la e[ad] como una organización, los formularios se clasifican según su plataforma web; a saber: Sitio oficial, Wiki Casipea o 'Personas'. De modo que cada formulario a continuación refiere a una plataforma en particular. Por otro lado, independiente de la categoría, cada input o casilla puede ser usada de manera individual, interpretando el código html y css.

Formulario genérico

Formulario


ver código HTML
<form role="form"> <div class="grupo-formulario"> <label for="ejemplo-formulario">Dirección de e-mail *</label> <input type="email" class="control" id="ejemplo-formulario" placeholder="Introduce email" required /> </div> <div class="grupo-formulario"> <label for="ejemplo-contraseña">Contraseña *</label> <input type="password" class="control" id="ejemplo-contraseña" placeholder="Contraseña" required /> </div> <div class="grupo-formulario"> <label for="ejemplo-archivo">Carga un archivo</label> <input type="file" id="ejemplo-archivo"> </div> <div class="checkbox"> <label> <input type="checkbox"> Anótame </label> </div> <button type="submit" class="btn btn-default">Enviar</button> </form>
ver código LESS
form{ padding: 10px; border-radius: 5px; border: 1px solid @gris; margin-bottom: 0 !important; .clearfix; .margen-inf; label{ font-family: @cond; text-transform: uppercase; font-size: 90%; letter-spacing: .02ex; color: @gris-oscuro; display: block; padding-bottom: 5px; padding-top: 10px; &.checkbox{ display: inline-block; vertical-align: middle; font-weight: 400; input[type=checkbox]{ display: inline-block; margin-right: 1ex; padding: @padding-md; } } } } input[type='text'], input[type='password'], input[type='email'], textarea, select{ height: auto; width: 100%; padding: 5px 10px; color: @gris-oscuro; .border-radius(@radio); &:valid{ color: @gris-oscuro; } }
Formulario genérico - variantes
ver código HTML
<form role="form"> <div class="grupo-formulario"> <label>Seleccione color</label> <input type="color" /> </div> <div class="grupo-formulario"> <label>Tiempo</label> <input type="time" /> </div> <div class="grupo-formulario"> <label>Mes</label> <input type="month" /> </div> <div class="grupo-formulario"> <label>Semana</label> <input type="week" /> </div> </form>
ver código LESS
// Reset .input, textarea, select, input[type='text'], input[type='password'], input[type='datetime'], input[type='datetime-local'], input[type='date'], input[type='month'], input[type='time'], input[type='week'], input[type='number'], input[type='email'], input[type='url'], input[type='search'], input[type='tel'], input[type='color'], input[type='file'], .uneditable-input, { font-family: @sans; width: 100%; display: inline-block; padding: @padding-md 3 * @padding-md; margin: 0 0 @margen-sm 0; font-size: 16px; font-weight: 300; line-height: @interlinea; color: @gris; border: 1px solid @gris-claro; &:focus{ box-shadow: inset 0 @boton-resalte 0 fade(@negro, 13); background-color: fade(@negro, 3); } &.sin-margen{ margin: 0; } &.buscar{ width: auto; padding: 6.5px 1.5px 3.5px 10px !important; background-color: @gris-blanco-transparente; font-size: 15px !important; } }
Formulario horizontal

Ingrese con sus datos


@
ver código HTML
<form class="formulario-horizontal" role="form"> <div class="grupo-formulario"> <input type="email" class="form-º" id="ejemplo-nombre2" placeholder="Ingresa nombre" required /> </div> <div class="grupo-formulario"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="control" type="email" placeholder="Ingresa email" required /> </div> </div> <div class="grupo-formulario"> <input type="password" class="control" id="ejemplo-contraseña2" placeholder="Contraseña" required /> </div> <div class="grupo-formulario"> <div class="checkbox"> <label> <input type="checkbox"> Recuerdame </label> </div> </div> <button type="submit" class="btn btn-default">Accede</button> </form>
ver código LESS
.formulario-horizontal .input-group { display: inline-table; vertical-align: super !important; } .grupo-formulario, .form-group { span { margin: 0; } }
Formulario de contacto
ver código HTML
<form role="form"> <div class="grupo-formulario"> <label for="nombre">Nombre *</label> <input type="text" class="control" id="nombre" placeholder="Introduce su nombre" required /> </div> <div class="grupo-formulario"> <label for="correo-electronico">Correo electrónico</label> <input type="email" class="control" id="correo-electronico" placeholder="correo electrónico"> </div> <div class="grupo-formulario"> <label for="asunto">Asunto</label> <input type="text" class="control" id="asunto" placeholder="asunto"> </div> <div class='grupo-formulario'> <label>Mensaje</label> <textarea placeholder='Su mensaje' required></textarea> </div> <button type="submit" class="btn btn-default">Enviar</button> </form>
ver código LESS
form{ padding: 10px; border-radius: 5px; border: 1px solid @gris; margin-bottom: 0 !important; .clearfix; .margen-inf; label{ font-family: @cond; text-transform: uppercase; font-size: 90%; letter-spacing: .02ex; color: @gris-oscuro; display: block; padding-bottom: 5px; padding-top: 10px; &.checkbox{ display: inline-block; vertical-align: middle; font-weight: 400; input[type=checkbox]{ display: inline-block; margin-right: 1ex; padding: @padding-md; } } } } input[type='text'], input[type='password'], input[type='email'], textarea, select{ height: auto; width: 100%; padding: 5px 10px; color: @gris-oscuro; .border-radius(@radio); &:valid{ color: @gris-oscuro; } }
Agregar página (Wiki Casiopea)

Ingresa el nombre de lo que vas a crear. Se creará una página con ese nombre. Si el nombre que eliges ya está ocupado, esta página te llevará al formulario que elijas con el contenido de la página existente donde podrás editar el nuevo objeto con atributos semánticos.

Define el tipo de formulario que necesitas para tu objeto.

ver código HTML
<form role="form"> <div class="grupo-formulario"> <label for="nombre">Nombre del objeto *</label> <p class='especificacion'><strong>Ingresa el nombre de lo que vas a crear</strong>. Se creará una página con ese nombre. Si el nombre que eliges ya está ocupado, esta página te llevará al formulario que elijas con el contenido de la página existente donde podrás editar el nuevo objeto con atributos semánticos.</p> <input type="text" class="control" id="nombre" placeholder="Introduce nombre de objeto a crear" required /> </div> <div class="grupo-formulario"> <label class='pregunta'>Tipo de formulario</label> <p class='especificacion'>Define el tipo de formulario que necesitas para tu objeto.</p> <select> <option>Nueva asignatura</option> <option>Nueva bibliografía</option> <option>Nueva obra</option> <option>Nueva persona</option> <option>Nueva publicación</option> <option>Nueva revista académica</option> <option>Nueva tarea</option> <option>Nueva travesía</option> <option>Nuevo acto</option> <option>Nuevo caso de estudio</option> <option>Nuevo curso</option> <option>Nuevo evento</option> <option>Nuevo proyecto</option> <option>Nuevo proyecto de investigación</option> <option>Nuevo trabajo en madlab</option> </select> </div> <button type="submit" class="btn btn-default">Crear o editar</button> </form>
ver código LESS
// Reset .input, textarea, select, input[type='text'], input[type='password'], input[type='datetime'], input[type='datetime-local'], input[type='date'], input[type='month'], input[type='time'], input[type='week'], input[type='number'], input[type='email'], input[type='url'], input[type='search'], input[type='tel'], input[type='color'], input[type='file'], .uneditable-input, { font-family: @sans; width: 100%; display: inline-block; padding: @padding-md 3 * @padding-md; margin: 0 0 @margen-sm 0; font-size: 16px; font-weight: 300; line-height: @interlinea; color: @gris; border: 1px solid @gris-claro; &:focus{ box-shadow: inset 0 @boton-resalte 0 fade(@negro, 13); background-color: fade(@negro, 3); } &.sin-margen{ margin: 0; } &.buscar{ width: auto; padding: 6.5px 1.5px 3.5px 10px !important; background-color: @gris-blanco-transparente; font-size: 15px !important; } }
Crear un proyecto (Wiki Casiopea)
Arquitectura Diseño gráfico Diseño industrial Náutico y marítimo Ciudad y territorio Formación y oficio Interacción Doctorado en A & D
Esta es una edición menor Vigilar esta página
ver código HTML
<form role="form"> <div class="grupo-formulario"> <label for="nombre">Título *</label> <input type="text" class="control" id="nombre" placeholder="Nombre del nuevo objeto" required /> </div> <div class="grupo-formulario"> <label for="nombre">Tipo *</label> <select> <option>Alumno/a</option> <option>Profesor/a</option> <option>Ex-alumno/a</option> <option>Amigo/a</option> <option>Staff</option> <option>Otro/a</option> </select> </div> <div class="grupo-formulario"> <label class='pregunta'>Palabras claves</label> <input type='text' placeholder='todo en bajas, separadas por coma 'required/> </div> <div class="grupo-formulario"> <label class='pregunta'>Año de inicio</label> <input type='text' required/> </div> <div class="grupo-formulario"> <label class='pregunta'>Año de término</label> <input type='date' required/> </div> <div class="grupo-formulario"> <label class='pregunta'>Carreras relacionadas</label> <div class='opciones'> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Arquitectura</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Diseño gráfico</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Diseño industrial</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Náutico y marítimo</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Ciudad y territorio</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Formación y oficio</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Interacción</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Doctorado en A & D</span></span> </div> </div> <div class="grupo-formulario"> <label class='pregunta'>Asignaturas relacionadas</label> <input type='text' required /> </div> <div class="grupo-formulario"> <label class='pregunta'>Cursos relacionados</label> <input type='text' required /> </div> <div class="grupo-formulario"> <label class='pregunta'>Profesor</label> <input type='text' required /> </div> <div class="grupo-formulario"> <label class='pregunta'>Alumnos</label> <input type='text' required /> </div> <div class="grupo-formulario"> <label for="ejemplo-archivo">Imagen (carga un archivo)</label> <input type="file" id="ejemplo-archivo"> </div> <div class="grupo-formulario"> <label class='pregunta'>PDF</label> <input type='text' required /> </div> <div class="grupo-formulario"> <label class='pregunta'>URL (enlace)</label> <input type='url' required /> </div> <div class='grupo-formulario'> <label>Descripción</label> <textarea placeholder='Texto libre' required></textarea> </div> <div class="grupo-formulario"> <label class='pregunta'>Configuración</label> <div class='opciones'> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Esta es una edición menor</span></span> <span class='checkbox-span'><input type='checkbox' name='tipo-proyecto' /> <span class='xs'>Vigilar esta página</span></span> </div> </div> <button type="submit" class="btn btn-success">Grabar página</button> <button type="submit" class="btn btn-default">Previsualizar</button> <button type="submit" class="btn btn-cancel">Cancelar</button> </form>
ver código LESS
// grupo inputs .grupo-inputs{ position: relative; display: inline-block; input, .input{ position: relative; width: auto !important; display: inline-block; border-radius: 0 !important; } :first-child{ .border-radius(@radio 0 0@radio) !important; } :last-child{ .border-radius(0 @radio @radio 0) !important; margin-left: -3px; } .input{ background-color: @gris-claro; line-height: 1.49; top: -3px; right: -2px; } &.metabarra{ input, .input{ } :first-child{ border-radius: 0px !important; } :last-child{ border-radius: 0px !important; } .input{ background-color: @gris-claro; padding: 4.5px 10.5px 3.5px 12.5px!important; right: -4px; top: 0px !important; } &.buscar{ padding: 5.5px 1.5px 3.5px 10px !important; font-size: 15px !important; margin-left: -4px; } } }
Nuevo usuario (Personas)

Registro de nuevo usuario

Tus datos personales

Elije un nombre que puedas recordar con facilidad. Se recomienda no utilizar espacios ni mayúsculas ya que el sistema los distingue y después son fáciles de olvidar.
ver código HTML
<form role="form"> <div class="col-md-12"> <h3 class="fino sans rojo"><i class="icn icn-perfil nav-icn"></i> Registro de nuevo usuario</h3> </div> <div class="col-md-12"> <h5 class="fino sans pizarra">Tus datos personales</h5> <hr> <div class="margen-inf-sm"> <label for="username">Nombre de usuario</label> <div class="grupo-inputs"> <div class="input"><i class="icn icn-md icn-usuario"></i></div> <input type="text" class="control" id="username" placeholder="juanperez"/> </div> <span class="xs margen-sup-xs">Elije un nombre que puedas recordar con facilidad. Se recomienda no utilizar espacios ni mayúsculas ya que el sistema los distingue y después son fáciles de olvidar.</span> </div> <div class="margen-inf-sm"> <label for="names">Nombres</label> <div class="grupo-inputs"> <div class="input"><i class="icn icn-md icn-perfil"></i></div> <input type="text" class="control" id="names" placeholder="Juan José"/> </div> </div> <div class="margen-inf-sm"> <label for="lastnames">Apellidos</label> <div class="grupo-inputs"> <div class="input"><i class="icn icn-md icn-perfil"></i></div> <input type="text" class="control" id="lastnames" placeholder="Pérez López"/> </div> </div> <div class="margen-inf-sm"> <label for="rut">Rut</label> <div class="grupo-inputs"> <div class="input"><i class="icn icn-md icn-acto"></i></div> <input type="text" class="control" id="rut" placeholder="12.345.678-9"/> </div> </div> <div class="margen-inf-sm"> <label for="usertype">Relación con la e[ad]</label> <div class="grupo-inputs"> <div class="input"><i class="icn icn-md icn-caronabajo"></i></div> <select name="usertype" placeholder="selecciona tu carrera"> <option></option> <option>Alumno(a)</option> <option>Profesor(a)</option> <option>Ex-alumno(a)</option> <option>Ex-profesor(a)</option> <option>Amigo(a)</option> <option>Otro(a)</option> </select> </div> </div> <div class="margen-inf-sm"> <label for="course">Carrera</label> <div class="grupo-inputs"> <div class="input"><i class="icn icn-md icn-caronabajo"></i></div> <select name="course"> <option selected></option> <option>Arquitectura</option> <option>Diseño</option> <option>Diseño Gráfico</option> <option>Diseño Industrial</option> <option>Magister en Arquitectura y Diseño</option> </select> </div> </div> <div class="margen-inf-sm"> <a class="btn btn-accion btn-lg btn-bloque btn-registro1" href="#registro-2">Siguiente</a> </div> </div> </form>
ver código LESS
form{ padding: 10px; border-radius: 5px; border: 1px solid @gris; margin-bottom: 0 !important; .clearfix; .margen-inf; label{ font-family: @cond; text-transform: uppercase; font-size: 90%; letter-spacing: .02ex; color: @gris-oscuro; display: block; padding-bottom: 5px; padding-top: 10px; &.checkbox{ display: inline-block; vertical-align: middle; font-weight: 400; input[type=checkbox]{ display: inline-block; margin-right: 1ex; padding: @padding-md; } } } .grupo{ &.obligatorio{ position: relative; label:after{ font-family: Stampa; line-height: 1; color: @rojo; //content: @icn-var-asterisco; } select, input{ border: 1px solid fade(@gris-oscuro, 70); width: 100%; } } } legend{ font-size: @cuerpo * 1.5; margin: @cuerpo 0; font-weight: 100; color: fade(@pizarra, 30); } input[type='text'], input[type='password'], input[type='email'], textarea, select{ height: auto; width: 100%; padding: 5px 10px; color: @gris-oscuro; .border-radius(@radio); &:valid{ color: @gris-oscuro; } } input, textarea{ color: fade(@azul, 70%); .border-radius(@radio); .borde; &:focus{ .foco; } &.sin-radio{ border-radius: 0px; } } textarea { height: @cuadratin * 6; } select{ .border-radius(4px); .borde; margin: 0; color:@pizarra; padding: @padding-md; height: auto; } &.buscador{ text-align: right; input.texto{ .pegado-antes; } input[type=submit]{ .pegado-despues; margin: -4px 0 0 -4px; } } }

Botones

Los botones se definen genéricamente mediante la clase 'btn' y se aplican a las etiquetas <a>, <input [type='submit']> y a los elementos <button> genéricos de los formularios. Los estilos están pensados para ser aplicados de forma semántica como se describe en la tabla, pudiendo usarse en combinación con atributos de tamaño ('xs', 'sm', 'md' y 'lg') y de otras dos clases ('accion', 'alerta').

Elemento
HTML
<a class='btn btn-sm'>Neutral</a>
CSS
&.btn-sm{ font-size: @cuerpo * .8; font-weight: normal; padding: 5px 7px; }
<a class='btn btn-md'>Neutral</a>
&.btn-md{ font-weight: 300; text-transform: uppercase; font-size: @cuerpo * 1; padding: @padding-md 2*@padding-md; }
<a class='btn btn-lg'>Neutral</a>
&.btn-lg{ font-size: @cuerpo * 1.5; letter-spacing: .05ex; font-weight: 200; padding: @padding-lg 1.8*@padding-lg; }
<a class='btn btn-lg btn-accion'>Acción</a> <a class='btn btn-md btn-accion'>Acción</a> <a class='btn btn-sm btn-accion'>Acción</a>
&.btn-accion{ color: @blanco; text-shadow: 1px 1px 0 fade(@negro, 40%); background-color: @verde; &:hover{ background-color: darken(@verde, 10%); } }
<a class='btn btn-lg btn-alerta'>Alerta</a> <a class='btn btn-md btn-alerta'>Alerta</a> <a class='btn btn-sm btn-alerta'>Alerta</a>
&.btn-alerta{ color: @blanco; text-shadow: 1px 1px 0 fade(@negro, 40%); background-color: @rojo-alerta !important; &:hover{ background-color: darken(@rojo, 7%) !important; color: @blanco; } }
Grupos de Botones
HTML
<div class="grupo-botones"> <a class='btn' type='submit'>Opción 1</a> <a class='btn' type='submit'>Opción 2</a> <a class='btn' type='submit'>Opción 3</a> <a class='btn' type='submit'>Opción 4</a> </div>
CSS
.grupo-botones{ .btn{ float: left; border-radius: 0; margin-left: -1px; &:first-child{.border-radius(@radio 0 0 @radio) !important;} &:last-child{.border-radius(0 @radio @radio 0) !important;} } }