[SPIP] PUBLISHED : Estructura HTML de formularios en SPIP

Monde Trad
#1

SPIP

Article validated

The article « Estructura HTML de formularios en SPIP
(Estructura HTML de formularios en SPIP - SPIP) » was validated by jack.

Estructura HTML de formularios en SPIP

Edición de formularios utilizados en el área privada.

Saturday 29 July 2023 , by henry

Documento de referencia que especifica cómo deben estructurarse los
formularios en SPIP

Table of contents

  • Estructura HTML
  • Las clases especiales
  • Marco incluyente
  • Gestión de mensajes de éxito / error
  • Particularidades para los estilos css

Estructura HTML|Back to the table of contents

Un formulario básico se estructura de la siguiente manera:

<div class="formulaire_spip formulaire_editer

formulaire_editer_nomformulaire formulaire_editer_nomformulaire-id">



Una Leyenda

Explicación del formulario



Correo
#AIDER{arttitre}

Explicación de la etiqueta
Mensaje de error





La etiqueta <div> en el recuadro de arriba tiene la clase
formulaire_spip genérica . Los formularios de edición en el área
privada también tienen la clase formulaire_editer que indica que
estamos tratando con un formulario de edición de base de datos.

Cada campo de entrada está encapsulado en un elemento de clase .editer,
que debe agruparse en un elemento de clase .editer-groupe. Hasta SPIP
3.0, estas clases se llevaban a cabo mediante las etiquetas html li y
ul. A partir de SPIP 3.1, tomamos como convención el uso de div para
reducir la síntesis de voz y mejorar la accesibilidad de los formularios.

El primer conjunto de campos es opcional, también podemos escribir, sin el
conjunto de campos y sin los párrafos opcionales:

<div class="formulaire_spip formulaire_editer

formulaire_editer_nomformulaire formulaire_editer_nomformulaire-id">




Correo




Las clases especiales[|Back to the table of

contents](#s-Las-clases-especiales)

  • « explication »: para indicar un mensaje de explicación (que se
    relaciona con todos los campos o con un paso). Ejemplo: <p class="explication">.
  • « attention »: para mostrar un mensaje sobre un campo de edición
    crítico. Ejemplo: <em class="attention"><:texte_login_precaution:></em>.
  • « obligatoire »: para indicar un campo obligatorio, que se
    aplicará al elemento de la lista principal. Ejemplo: <div class="obligatoire">.
  • « erreur »: para informar de un error, que se aplicará al
    elemento de la lista principal. Ejemplo: <div class="erreur">. Cada error
    tiene un mensaje explicativo, con la clase « erreur_message »: <span class="erreur_message">.

Marco incluyente|Back to the table of contents

Este formulario puede incluir opcionalmente un marco de edición de
formulario y luego puede contener un encabezado de formulario:

<div class="cadre-formulaire-editer">
  <div class="entete-formulaire"></div>
  <div class="formulaire_editer formulaire_editer_site

formulaire_editer_site-#ENV{id_site,nouveau}">

Gestión de mensajes de éxito / error[|Back to the table of

contents](#s-Gestion-de-mensajes-de-exito-error)

Mensajes globales
Un formulario debe contener obligatoriamente dos párrafos que permitan
mostrar los aciertos y errores generales que puedan presentarse durante el
envío. Las variables de entornomessage_ok y message_erreur son respuestas
enviadas por SPIP (formularios CVT).

<div class="formulaire_editer formulaire_editer_site

formulaire_editer_site-#ENV{id_site,nouveau}">
[

(#ENV*{message_ok})]
[

(#ENV*{message_erreur})]

Mensajes específicos
Cada campo de formulario, encapsulado en un li, puede recibir un mensaje
de error específico. Está contenido en la tabla de entorno de
’errores’ y se puede obtener de la siguiente manera:

[(#ENV**{erreurs}|table_valeur{nombre_de_campo})]

Podemos asignar la clase ’error’ al li y mostrar un error
específico, si existe, así:

<div class="editer editer_descriptif[

(#ENV**{erreurs}|table_valeur{descriptif}|oui)erreur]">
<:texte_descriptif_rapide:>
[(#ENV**{erreurs}|table_valeur{desctiptif})]
[(#ENV**{descriptif})]

Particularidades para los estilos css[|Back to the table of

contents](#s-Particularidades-para-los-estilos-css)

Campos de entrada

Cada <input /> diferente de hidden debe tener una clase idéntica a su
tipo (para superar una deficiencia del navegador Internet Explorer):

<input type="text" class="text" name="titre" id="titre"

value="[(#ENV**{titre})]" />

Botones de envío
Los botones de envío se incluyen en un cuadro .boutons (que puede acomodar
varios botones):

<p class="boutons"><input type="submit" class="submit"

value="<:bouton_enregistrer:>" />

casillas radio/checkbox
En el caso de un botón de radio o casilla de verificación(checkbox), no
podemos usar la misma estructura, por ejemplo, para tener el botón antes
de la etiqueta, o para tener la lista de radio en horizontal.

Cada entrada (radio + etiqueta) se puede enmarcar con un bloque .choix

<div class="editer editer_syndication">
  <div class="choix">
    <input type='radio' class="radio" name='syndication' value='non'

id=‹ syndication_non ›[ (#ENV{syndication}|=={non}|?{‹ checked=« checked » ›})]
/>
<:bouton_radio_non_syndication:>


<input type=‹ radio › class=« radio » name=‹ syndication › value=‹ si ›
id=‹ syndication_oui ›[ (#ENV{syndication}|=={si}|?{‹ checked=« checked » ›})]
/>
<:bouton_radio_syndication:>#AIDER{rubsyn}

De forma predeterminada la lista es vertical. Para hacer la lista
horizontal, todo lo que tiene que hacer es especificar que el campo en
cuestión es de tipo en línea (inline):

.formulaire_editer .editer_syndication .choix {display:inline;}

P.S.

Principios generales de estos formularios para tener las etiquetas

alineadas a la izquierda

¨

Nos encontramos en un caso en el que tenemos:

<div class="editer-groupe">
	<div class="editer">
		<label />
		<input />
	</div>
	<div class="editer">
		<label />
		<em />
		<span />
		<input />
	</div>	
</div>

  1. aplicamos un relleno a la izquierda .editer mayor que el tamaño de la
    etiqueta (ej: 120px)

    .formulaire_spip .editer {
    margin: 0;
    padding: 10px 10px 10px 130px;
    clear:both;
    border-top: 1px solid #eee;
    }

  2. le pedimos a la etiqueta que flote y se mueva hacia la izquierda (a
    través de un margen negativo)

    .formulaire_spip .editer label {
    width: 120px;
    float:left;
    margin-left:-125px;
    text-align: left;
    vertical-align: top;
    }

  3. cuando un conjunto de campos sigue a un .editer, también se desplaza
    hacia la izquierda (solo IE no lo tiene en cuenta) para que el conjunto de
    campos también tome todo el ancho

    .formulaire_spip .editer fieldset {
    border:1px solid #888;
    background:white;
    margin-left:-125px; /* desplazamiento a la izquierda … IE <8 no lo
    tiene en cuenta */
    }

— Sent by SPIP (https://www.spip.net/)

rubon39-3e6be.jpg