Accepta nostres cookies i polítiques de privadesa?

La seva privadesa és important per a nosaltres. Per això, li informem que utilitzem cookies pròpies i de tercers per realitzar anàlisis d'ús i mesurament de la nostra web amb la finalitat de personalitzar continguts, així com proporcionar funcionalitats a les xarxes socials o analitzar el nostre tráfico. Per seguir acceptant o modificar la configuració de les nostres cookies.

Política de cookies

  • La seva privadesa
  • Cookies estrictament necessàries
  • Cookies de preferència o personalització
  • Cookies d'anàlisi o de mesurament
  • Política de cookies

La seva privadesa és important per a nosaltres

Les cookies són arxius de text molt petits que s'emmagatzemen en el seu ordinador quan visita un lloc web. Utilitzem cookies per a diverses finalitats i per millorar la seva experiència en línia en el nostre lloc web (per exemple, per recordar les dades d'accés al seu compte).

Vostè pot canviar les seves preferències i rebutjar que s'emmagatzemin certs tipus de cookies en el seu ordinador mentre navega pel nostre lloc web. També pot eliminar les cookies ja emmagatzemades en el seu ordinador, però tingui en compte que l'eliminació de les cookies pot impedir-li utilitzar parts del nostre lloc web.

Cookies estrictament necessàries

Aquestes cookies són essencials per proporcionar-li els serveis disponibles a través del nostre lloc web i per permetre-li utilitzar certes característiques del nostre lloc web.

Sense aquestes cookies, no podem oferir-li determinats serveis en el nostre lloc web.

Cookies de preferència o personalització

Aquestes cookies s'utilitzen per oferir-li una experiència més personalitzada en el nostre lloc web i per recordar les eleccions que fa quan utilitza el nostre lloc web.

Per exemple, podem utilitzar cookies de funcionalitat per recordar les seves preferències d'idioma o recordar les seves dades d'accés.

Cookies d'anàlisi o de mesurament

Aquestes cookies s'utilitzen per recopilar informació amb la finalitat d'analitzar el tráfico del nostre lloc web i com ho utilitzen els visitants.

Per exemple, aquestes cookies poden rastrejar coses com el temps que vostè passa en el lloc web o les pàgines que visita, la qual cosa ens ajuda a entendre com podem millorar el nostre lloc web per a vostè.

La información recopilada a través de estas cookies de análisis o medición no identifica a ningún visitante individual.

Política de cookies

Una cookie és un fitxer que es descarrega en l'ordinador, smartphone o tablet en accedir a determinades pàgines web. Les cookies permeten emmagatzemar i recuperar informació sobre els hàbits de navegació que s'efectua des d'aquest equip. El navegador de l'usuari memoritza cookies en el disc dur solament mentre roman oberta la sessió. Les cookies no contenen cap classe d'informació personal específica, i la majoria s'esborra del disc dur en finalitzar la sessió de navegador (les denominades cookies de sessió).

La majoria dels navegadors accepta com a estàndard les cookies i, amb independència de les mateixes, permet o impedeix en els ajustos de seguretat les cookies temporals o memoritzades.

Per conèixer més informació sobre les cookies en Sistema Nacional de Empleo

 

Quins tipus de cookies utilitza aquest lloc web?

De tercers

Anàlisi: permeten quantificar el nombre d'usuaris i així realitzar el mesurament i anàlisi estadística de la utilització que fan del servei ofert. Per a això s'analitza la teva navegació en el nostre lloc web amb la finalitat de millorar l'oferta de productes o serveis que t'oferim.

En particular, aquest lloc web utilitza Google Analytics, un servei analític de web prestat per Google, Inc. amb domicili en los Estados Unidos y sede central en 1600  Amphitheatre Parkway, Mountain View, Califòrnia 94043 . Per a la prestació d'aquests serveis, Google Analytics utilitza cookies que recopilen la informació, inclosa l'adreça IP de l'usuari, que serà transmesa, tractada i emmagatzemada per Google en els termes fixats a la web www.google.com, incloent la possible transmissió d'aquesta informació a tercers per raons d'exigència legal o quan dites terceres processin la informació per compte de Google.

Del SEPE

SEPE utilitza cookies per al marcat visual en els menús de la secció seleccionada per l'usuari. Això facilita la contextualització dels continguts, permetent conèixer a tot moment la ubicació de la informació carregada. Si no acceptes la política de cookies no podràs visualitzar aquests marcats correctament.

Així mateix, s'utilitzen per registrar les teves preferències de navegació i poder oferir-te continguts personalitzats.

Amb la utilització d'aquest lloc web, acceptes expressament el tractament de la informació recaptada en la forma i amb les finalitats anteriorment esmentades. I així mateix reconeixes la possibilitat de rebutjar el tractament de dades i informació bloquejant l'ús de cookies mitjançant la configuració apropiada en el navegador. Tingues en compte que aquesta opció de bloqueig de cookies pot dificultar l'ús ple de totes les funcionalitats del lloc web.

Pots permetre, bloquejar o eliminar les cookies instal·lades en el teu equip mitjançant la configuració de les opcions del navegador instal·lat en el teu equip:

  • Google Chrome
  • Internet Explorer
  • Mozilla Firefox
  • Safari

El Servei Públic d'Ocupació Estatal no es fa responsable del contingut de les polítiques de privadesa dels tercers inclosos en aquesta política de cookies.

Si tens dubtes sobre aquesta política de cookies pots contactar amb el SEPE

 

Sistema Nacional de Empleo

  • Treballadors

  • Empresaris

  • Agències de Col locació

  • Espai EURES

  • Serveis Públics d'Ocupació

  1. Sistema Nacional d'Ocupació
  2. Catálogo de estilos
  3. Formularios

Títulos

Texto enriquecido

Enlaces

Enlaces con imagen

Tablas

Banners

Acordeón

Modal

Menú

Formularios

Bloque Destacado

Pestañas

Títulos

Texto enriquecido

Enlaces

Enlaces con imagen

Tablas

Banners

Acordeón

Modal

Menú

Formularios

Bloque Destacado

Pestañas

FORMULARIOS

Formularios

Formulario básico

Párrafo de texto explicativo Sed quis lorem libero. Nulla euismod, justo vitae mollis elementum, erat massa convallis tortor, a maximus nisi tellus quis ligula. Praesent a suscipit ipsum, id malesuada ipsum. Morbi nulla nisi, hendrerit sit amet bibendum sed, pellentesque at ipsum. Morbi pretium in ex eu tincidunt.

Máximo 128 caracteres

Formatos admitidos: PDF, DOC

Seleccione un criterio
Seleccione un criterio
Marque las opciones
Marque las opciones

HTML

 <!--Estructura genérica para todos los formularios-->
<form class="sn-form">
    <fieldset>

HTML

 <!--Estructura genérica para todos los formularios-->
<form class="form">
    <fieldset>
        <legend>Legend</legend>

        [Avisos y textos explicativos]

        <!--contenedor genenral de campos de formulario-->
        <div class="form--wrapper">

            <!--Filas de campos de formulario-->
            <div class="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: form--input__xl
    · Grande: form--input__l
    · Mediano: form--input__m
    · Pequeño: form--input__s
    · Extra-pequeño: form--input__xs
-->

<div class="form--row">
    <label for="id1">Campo extra grande</label>
    <input id="id1" class="form--input__xl" type="text" />
</div>

<div class="form--row">
    <label  for="id2">Campo grande (*)</label>
    <input id="id2" class="form--input__l" type="text" />
</div>

<div class="form--row">
    <label class="form--lbl-req" for="id3">Campo mediano (*)
        <span class="form-help">[Texto de ayuda] Máximo 5 caracteres</span>
    </label>
</div>

<div class="form--row">
    <label for="id4">Campo pequeño</label>
    <input id="id4" class="form--input__s" type="text" />
</div>

<div class="form--row">
    <label for="id5">Campo extra pequeño</label>
    <input id="id5" class="form--input__xs" type="text" />
</div>

<div class="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="form--row">
    <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>

<div class="form--row">
    <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>

<div class="form--row">
    <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>

<div class="form--row">
    <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>

<div class="form--row">
    <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>

<div class="form--row">
    <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>

<div class="form--row">
    <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>

<!--checkbox individual en línea-->
<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>

        <legend>Legend</legend>

        [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>

Fechas
Fecha
(dd/mm/aaaa)
Fecha desde hasta
Buscador de fechas (dd/mm/aaaa)

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>

Subgrupo opciones
Subgrupo casillas verificación

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>

Label ancho

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>

Formulario centrado
Marque las opciones

HTML

<!--Bloque formulario "centrado" class form__ctrd-->
<div class="form--wrapper form__ctrd">
    [Filas de campos de formulario]
</div>

Formulario en línea

HTML

<!--Bloque formulario "en línea" class form__inline-->
<div class="form--wrapper form__inline">
    [Filas de campos de formulario]
</div>

Formulario en línea label superior

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>

Campos de formulario

Muestra de campos de formulario

CSS

Legend
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

 

  • Informació General
  • Mapa Web
  • Enllaços d'interès
  • Avís legal
  • Accessibilitat
aaa

SEPE - Tots els drets reservats