[SPIP] PUBLIE : Estrutura HTML dos formulários do SPIP

Monde Trad
1

SPIP

Article validé

L’article « Estrutura HTML dos formulários do SPIP » vient d’être publié par Ricardo Porto.

Estrutura HTML dos formulários do SPIP

Formulários de edição usados na área restrita

segunda-feira 10 de Março de 2025, por Ricardo Porto

Documento de referência que especifica como os formulários no SPIP devem ser estruturados.

Sommaire- Estrutura HTML

  • As classes especiais
  • Moldura envolvente
  • Gestão das mensagens de sucesso/erro
  • Particularidades para os estilos CSS

P.S.

Princípios derais destes formulários para obter os labels alinhados à esquerda

Encontramo-nos num caso em que temos:

<div class="editer-groupe">
	<div class="editer">
		<label />
		<input />
	</div>
	<div class="editer">
		<label />
		<em />
		<span />
		<input />
	</div>	
</div>
  1. Aplica-se um padding-left ao .editer superior à largura do label (por exemplo, 120px).
.formulaire_spip .editer {
	margin: 0;
	padding: 10px 10px 10px 130px;
	clear:both;
	border-top: 1px solid #eee;
}
  1. Define-se o label como flutuante e deslocado para a esquerda (através de uma margem negativa)
.formulaire_spip .editer label {
	width: 120px;
	float:left;
	margin-left:-125px; 
	text-align: left;
	vertical-align: top;
}
  1. Quando um fieldset segue um .editer, também é deslocado para a esquerda (exceto no Internet Explorer, que ignora essa regra) para que o fieldset também ocupe toda a largura.
.formulaire_spip .editer fieldset {
	border:1px solid #888;
	background:white;
	margin-left:-125px; /* deslocação para a esquerda... IE < 8 desconsidera a regra */
}

— Enviado por SPIP