Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...


A seguir están cada una de las clases y estructura de un formulario generado a partir del editor.

Clase
Descripción
.form-fieldDIV que encuadra todo campo del formulario
.form-inputDIV principal apenas del campo (no encuadra la label)
.is-requiredClase del asterisco en campos obligatorios.
.label-field-propertiesLabel de los campos
.paragraph-is-requiredMensaje de obligatorio
.title-form-applicationClase del título del formulario

 

Em alguns casos é necessário utilizar do !important, pois são classes que já são utilizadas pelo fluig e podem ser sobescritas.


HTML

O HTML gerado automaticamente pelo editor de formulários com apenas um campo, fica com a seguinte estruturaEl HTML generado automáticamente por el editor de formularios con apenas un campo, queda con la siguiente estructura:

Bloco de código
languagehtml/xml
titleFormulário
linenumberstrue
<form name="formulario">
	<h1 class="title-form-application">Formulario Exemplo</h1>
	<div class="form-field">
		<label class="label-field-properties">Campo Nome</label>
		<span class="is-required">
			<b>*</b>
		</span>
		<div class="form-input">
			<input type="text" name="nome" />
		</div>
	</div>
</form>

 

...

Ejemplo

A seguir criaremos um crearemos un tema comcon:

  1. Campos do del tipo input com fundo preto e cor branca con fondo negro y color blanco.
  2. Labels em negrito e cor bordô. en negrito y color bordó.
  3. Título del formulario con un margen, color y borde Títutlo do formulário com uma margem, cor e borda inferior.
  4. Cada bloco bloque de campo terá margem tendrá margen inferior, com espaçamento interno e uma borda vermelha.con espaciamiento interno y un borde rojo.
  5. Color rojo y tamaño de la fuente para el asterisco de obligatorioCor vermelho e tamanho da fonte para o asterisco de obrigatório.

 

 

  • Para este resultado, o seguinte CSS deve ser criado e cadastrado nos el siguiente CSS se debe crear y registrar en los temas:

    Bloco de código
    languagecss
    titleexemplo.css
    linenumberstrue
    input { padding:0 15px !important; background-color:#000; color:#fff; }
    label { font-weight:bold; color:#8B0000; }
    .title-form-application { margin:20px; padding: 0 0px 10px; font-size: 1.5em; color: #006699; border-bottom: 1px dashed #ccc; }
    .form-field { margin-bottom: 15px; border:1px solid red; padding:10px; }
    .is-required { color:red; font-size:2em; }