FORMULARIOS
Formularios
HTML
<!--Estructura genérica para todos los formularios--> <!--Estructura genérica para todos los formularios--> [Avisos y textos explicativos] <!--contenedor genenral de campos de formulario--> <!--Filas de campos de formulario--> </div> </fieldset> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <p>[Párrafo de texto explicativo]</p> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <div class="form--row"> <!--checkbox individual en línea-->
<form class="sn-form">
<fieldset>HTML
<form class="form">
<fieldset>
<legend>Legend</legend>
<div class="form--wrapper">
<div class="form--row">
<label for="id1">Label</label>
<input id="id1" type="text" />
</div>
</form>
<!--
Clases para el ancho de los campos
· Extra-grande: form--input__xl
· Grande: form--input__l
· Mediano: form--input__m
· Pequeño: form--input__s
· Extra-pequeño: form--input__xs
-->
<label for="id1">Campo extra grande</label>
<input id="id1" class="form--input__xl" type="text" />
</div>
<label for="id2">Campo grande (*)</label>
<input id="id2" class="form--input__l" type="text" />
</div>
<label class="form--lbl-req" for="id3">Campo mediano (*)
<span class="form-help">[Texto de ayuda] Máximo 5 caracteres</span>
</label>
</div>
<label for="id4">Campo pequeño</label>
<input id="id4" class="form--input__s" type="text" />
</div>
<label for="id5">Campo extra pequeño</label>
<input id="id5" class="form--input__xs" type="text" />
</div>
<label for="id7">Campo deshabilitado</label>
<input id="id7" disabled="disabled" type="text" value="Deshabilitado" />
</div>
<label for="idsel1">Selector de opciones</label>
<select id="idsel1" class="form--input__l">
<option value="0">Seleccione una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
</div>
<label for="id6">Área de texto</label>
<textarea aria-describedby="idpr6" id="id6" class="form--input__l"></textarea>
<p id="idpr6" class="form--prompt">[Texto de ayuda] Máximo 128 caracteres</p>
</div>
<label for="idfile1">Cargar archivo</label>
<input type="file" aria-describedby="idprfile1" id="idfile1" class="form--input__l"></textarea> <button class="form--button">Adjuntar</button>
<p id="idprfile1" class="form--prompt">[Texto de ayuda] Formatos admitidos: PDF, DOC</p>
</div>
<span class="label" id="radio0">Seleccione un criterio</span>
<!--radio buttons vertical class form--wrapper__group-->
<div class="form--wrapper__group">
<div class="form--row">
<input aria-describedby="radio0" name="radio0" id="idr01" type="radio">
<label for="idr01">Opción 1</label>
</div>
<div class="form--row">
<input aria-describedby="radio0" name="radio0" id="idr02" type="radio">
<label for="idr02">Opcion 2</label>
</div>
<div class="form--row">
<input aria-describedby="radio0" name="radio0" id="idr03" type="radio">
<label for="idr03">Opcion 3</label>
</div>
</div>
</div>
<span class="label" id="radio2">Seleccione un criterio</span>
<!--radio buttons horizontal class form__inline form--wrapper__group-->
<div class="form__inline form--wrapper__group">
<div class="form--row">
<input aria-describedby="radio2" name="radio1" id="idr11" type="radio">
<label for="idr11">Opción 1</label>
</div>
<div class="form--row">
<input aria-describedby="radio2" name="radio1" id="idr12" type="radio">
<label for="idr12">Opcion 2</label>
</div>
<div class="form--row">
<input aria-describedby="radio2" name="radio1" id="idr13" type="radio">
<label for="idr13">Opcion 3</label>
</div>
</div>
</div>
<span class="label" id="check0">Marque las opciones</span>
<!--checkbox vertical class form--wrapper__group-->
<div class="form--wrapper__group">
<div class="form--row">
<input aria-describedby="check0" id="idc11" type="checkbox">
<label for="idc11">Opción 1</label>
</div>
<div class="form--row">
<input aria-describedby="check0" id="idc12" type="checkbox">
<label for="idc12">Opcion 2</label>
</div>
<div class="form--row">
<input aria-describedby="check0" id="idc13" type="checkbox">
<label for="idc13">Opcion 3</label>
</div>
</div>
</div>
<span class="label" id="check1">Marque las opciones</span>
<!--checkbox horizontal class form__inline form--wrapper__group-->
<div class="form__inline form--wrapper__group">
<div class="form--row">
<input aria-describedby="check1" id="idc21" type="checkbox">
<label for="idc21">Opción 1</label>
</div>
<div class="form--row">
<input aria-describedby="check1" id="idc22" type="checkbox">
<label for="idc22">Opcion 2</label>
</div>
<div class="form--row">
<input aria-describedby="check1" id="idc23" type="checkbox">
<label for="idc23">Opcion 3</label>
</div>
</div>
</div>
<div class="form--row">
<span class="label"></span>
<input id="idcA" type="checkbox">
<label for="idcA">He leído y acepto las condiciones</label>
</div>
[Avisos y textos explicativos]
<!--contenedor genenral de campos de formulario-->
<div class="sn-form--wrapper">
<!--Filas de campos de formulario-->
<div class="sn-form--row">
<label for="id1">Label</label>
<input id="id1" type="text" />
</div>
</div>
</fieldset>
</form>
<!--
Clases para el ancho de los campos
· Extra-grande: sn-form--input__xl
· Grande: sn-form--input__l
· Mediano: sn-form--input__m
· Pequeño: sn-form--input__s
· Extra-pequeño: sn-form--input__xs
-->
<div class="sn-form--row">
<label for="id1">Campo extra grande</label>
<input id="id1" class="sn-form--input__xl" type="text" />
</div>
<div class="sn-form--row">
<label for="id2">Campo grande (*)</label>
<input id="id2" class="sn-form--input__l" type="text" />
</div>
<div class="sn-form--row">
<label class="sn-form--lbl-req" for="id3">Campo mediano (*)
<span class="sn-form-help">[Texto de ayuda] Máximo 5 caracteres</span>
</label>
</div>
<div class="sn-form--row">
<label for="id4">Campo pequeño</label>
<input id="id4" class="sn-form--input__s" type="text" />
</div>
<div class="sn-form--row">
<label for="id5">Campo extra pequeño</label>
<input id="id5" class="sn-form--input__xs" type="text" />
</div>
<div class="sn-form--row">
<label for="id7">Campo deshabilitado</label>
<input id="id7" disabled="disabled" type="text" value="Deshabilitado" />
</div>
<p>[Párrafo de texto explicativo]</p>
<div class="sn-form--row">
<label for="idsel1">Selector de opciones</label>
<select id="idsel1" class="sn-form--input__l">
<option value="0">Seleccione una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
</div>
<div class="sn-form--row">
<label for="id6">Área de texto</label>
<textarea aria-describedby="idpr6" id="id6" class="sn-form--input__l"></textarea>
<p id="idpr6" class="sn-form--prompt">[Texto de ayuda] Máximo 128 caracteres</p>
</div>
<div class="sn-form--row">
<label for="idfile1">Cargar archivo</label>
<input type="file" aria-describedby="idprfile1" id="idfile1" class="sn-form--input__l"></textarea> <button class="sn-form--button">Adjuntar</button>
<p id="idprfile1" class="sn-form--prompt">[Texto de ayuda] Formatos admitidos: PDF, DOC</p>
</div>
<div class="sn-form--row">
<span class="label" id="radio0">Seleccione un criterio</span>
<!--radio buttons vertical class sn-form--wrapper__group-->
<div class="sn-form--wrapper__group">
<div class="sn-form--row">
<input aria-describedby="radio0" name="radio0" id="idr01" type="radio">
<label for="idr01">Opción 1</label>
</div>
<div class="sn-form--row">
<input aria-describedby="radio0" name="radio0" id="idr02" type="radio">
<label for="idr02">Opcion 2</label>
</div>
<div class="sn-form--row">
<input aria-describedby="radio0" name="radio0" id="idr03" type="radio">
<label for="idr03">Opcion 3</label>
</div>
</div>
</div>
<div class="sn-form--row">
<span class="label" id="radio2">Seleccione un criterio</span>
<!--radio buttons horizontal class sn-form__inline sn-form--wrapper__group-->
<div class="sn-form__inline sn-form--wrapper__group">
<div class="sn-form--row">
<input aria-describedby="radio2" name="radio1" id="idr11" type="radio">
<label for="idr11">Opción 1</label>
</div>
<div class="sn-form--row">
<input aria-describedby="radio2" name="radio1" id="idr12" type="radio">
<label for="idr12">Opcion 2</label>
</div>
<div class="sn-form--row">
<input aria-describedby="radio2" name="radio1" id="idr13" type="radio">
<label for="idr13">Opcion 3</label>
</div>
</div>
</div>
<div class="sn-form--row">
<span class="label" id="check0">Marque las opciones</span>
<!--checkbox vertical class sn-form--wrapper__group-->
<div class="sn-form--wrapper__group">
<div class="sn-form--row">
<input aria-describedby="check0" id="idc11" type="checkbox">
<label for="idc11">Opción 1</label>
</div>
<div class="sn-form--row">
<input aria-describedby="check0" id="idc12" type="checkbox">
<label for="idc12">Opcion 2</label>
</div>
<div class="sn-form--row">
<input aria-describedby="check0" id="idc13" type="checkbox">
<label for="idc13">Opcion 3</label>
</div>
</div>
</div>
<div class="sn-form--row">
<span class="label" id="check1">Marque las opciones</span>
<!--checkbox horizontal class sn-form__inline sn-form--wrapper__group-->
<div class="sn-form__inline sn-form--wrapper__group">
<div class="sn-form--row">
<input aria-describedby="check1" id="idc21" type="checkbox">
<label for="idc21">Opción 1</label>
</div>
<div class="sn-form--row">
<input aria-describedby="check1" id="idc22" type="checkbox">
<label for="idc22">Opcion 2</label>
</div>
<div class="sn-form--row">
<input aria-describedby="check1" id="idc23" type="checkbox">
<label for="idc23">Opcion 3</label>
</div>
</div>
</div>
<!--checkbox individual en línea-->
<div class="sn-form--row">
<span class="label"></span>
<input id="idcA" type="checkbox">
<label for="idcA">He leído y acepto las condiciones</label>
</div>
HTML
<!--fecha tres campos de texto-->
<div class="form--row form--row__date">
<span class="label" id="fecha1">Fecha</span>
<input title="día" aria-describedby="fecha1" id="idfd" class="form--input__day" type="text" />
<input title="mes" aria-describedby="fecha1" id="idfm" class="form--input__month" type="text" />
<input title="año" aria-describedby="fecha1" id="idfa" class="form--input__year" type="text" />
</div>
<!--fecha un campo de texto-->
<div class="form--row form--row__date">
<label for="idf2">
Fecha
</label>
<input id="idf2" class="form--input__date" type="text" />
<span class="form-help">(dd/mm/aaaa)</span>
</div>
<!--fecha un campo tipo date-->
<div class="form--row form--row__date">
<label for="idf2">
Fecha
</label>
<input id="idf2" type="date" />
</div>
<!--fecha por intervalos tres campos de texto-->
<div class="form--row form--row__date">
<span class="label" id="fechad1">Fecha desde</span>
<input title="día" aria-describedby="fechad1" id="idfdd" class="form--input__day" type="text" />
<input title="mes" aria-describedby="fechad1" id="idfdm" class="form--input__month" type="text" />
<input title="año" aria-describedby="fechad1" id="idfda" class="form--input__year" type="text" />
<span class="label" id="fechah2">hasta</span>
<input title="día" aria-describedby="fechah1" id="idfhd" class="form--input__day" type="text" />
<input title="mes" aria-describedby="fechah1" id="idfhm" class="form--input__month" type="text" />
<input title="año" aria-describedby="fechah1" id="idfha" class="form--input__year" type="text" />
</div>
<!--fecha por intervalos un campo de texto-->
<div class="form--row form--row__date">
<span class="label" id="fechad1">
Buscador de fechas
<span class="form-help">(dd/mm/aaaa)</span>
</span>
<label for="fecha2d">desde</label>
<input aria-describedby="fechad2" id="fecha2d" class="form--input__date" type="text" />
<label for="fecha2h">hasta</label>
<input aria-describedby="fechah2" id="fecha2h" class="form--input__date" type="text" />
</div>
HTML
<!--Subgrupos class form--wrapper__group-->
<div class="form--wrapper form--wrapper__group">
[Filas form--row para input radio o checkbox]
</div>
<!--cuadro de texto informativo-->
<div class="form--info">
<p>[Texto informativo]</p>
</div>
<!--Botonera-->
<div class="form--row__submit">
<button class="button__sec" type="button">Cancelar</button>
<input type="reset" value="Borrar" />
<input type="submit" value="Enviar" />
</div>
HTML
<!--Subgrupos class form--wrapper__group-->
<div class="form--wrapper form--wrapper__group">
[Filas form--row para input radio o checkbox]
</div>
<!--cuadro de texto informativo-->
<div class="form--info">
<p>[Texto informativo]</p>
</div>
<!--Bloque con label ancho (28em) class form__longlbl-->
<div class="form--wrapper form__longlbl">
<div class="form--row">
<label for="idi21">Texto label de larga longitud</label>
<input class="form--input__m" id="idi21" type="text">
</div>
[...]
</div>
HTML
<!--Bloque formulario "centrado" class form__ctrd-->
<div class="form--wrapper form__ctrd">
[Filas de campos de formulario]
</div>
HTML
<!--Bloque formulario "en línea" class form__inline-->
<div class="form--wrapper form__inline">
[Filas de campos de formulario]
</div>
HTML
<!--Bloque formulario "en línea, label superior" class form__inline-stack-->
<div class="form--wrapper form__inline-stack">
[Filas de campos de formulario]
</div>
Formulario simulado para informe
Estos son sus datos, compruebe que son correctos antes de enviar
Nombre Manuel Alfonso
Dirección Avenida de Granada nº 25, Pamplona
Teléfono 616161616
HTML
<div class="form--fieldset">
<h3 class="legend">Formulario simulado para informe</h3>
<p>Estos son sus datos, compruebe que son correctos antes de enviar</p>
<p class="form--row">
<span class="label">Nombre</span>
<span class="form--idata">Manuel Alfonso</span>
</p>
<p class="form--row">
<span class="label">Dirección</span>
<span class="form--idata">Avenida de Granada nº 25, Pamplona</span>
</p>
<p class="form--row">
<span class="label">Teléfono</span>
<span class="form--idata">616161616</span>
</p>
</div>
CSS
Fuente: Montserrat, 1.3rem (20.8px)
Font-weight: 400
Color: #515050 (rgb(81, 80, 80))
Label
Fuente: Montserrat, 0,9rem (14px)
Font-weight: 400
Color: #515050 rgb(41, 65, 108)
Campos de texto
Borde: 2px #cce8da (rgb(204, 232, 218))
Botones
Fuente: Montserrat Semibold, 1rem (16px)
Font-weight: 400
Color: blanco
Fondo: #004d71; (rgb(0, 77, 113);)
Espaciado: vertical 0.5rem (8px); horizontal 2rem (32px)
Radio: 4px
Rollover: color #004d71, fondo blanco, outline 2px #004d71
Botón secundario
Color: #0b0b0b (rgb(11, 11, 11);)
Fondo: #cacaca (rgb(202, 202, 202);)
Rollover: fondo blanco, outline 2px #cacaca