Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

Ir a contenido

PHP: Clase para generación de formularios accesibles

Recientemente estuve creando una clase para generar formularios sencillos en PHP mediante JSON.

Le faltan bastantes detalles, pero se puede utilizar en la generación de formularios que no tengan mucha complejidad.

Tipos de campo:

  • Cumplen requisitos de accesibilidad para WCAG 1.0 AA
  • Definición de los atributos del elemento FORM.
  • Estructuración mediante elementos FIELDSET.
  • Campo de tipo texto (<input type="text" />).
  • Campo de tipo password (<input type="password" />).
  • Campo de tipo checkbox (<input type="checkbox" />).
  • Campo de tipo radio (<input type="radio" />).
  • Campo de tipo file (<input type="file" />).
  • Campo de tipo select (<select>[...]</select>),
  • Campo de tipo textarea (<textarea>[...]</textarea>),

Se puede ver un ejemplo funcional o descargarlo (ZIP, 3KB).

El código de la clase de generación de formularios es el siguiente:

<?php
class Formularios {
	
	public function formulario ($json) {
		$k = json_decode($json, true);
		$i = 0; while($i<count($k['secciones'])) {
			
			$html .= '<fieldset>';
			$html .= '<legend>'.$k['secciones'][$i]['fieldset'].'</legend>';
			$html .= $this->generarCampos($k['secciones'][$i]['camposFieldset']);
			$html .= '</fieldset>';
			$i  ;
		}
		
		$html .= $this->generarBotones($k['botones']);
		
		return '<form action="'.$k['accion'].'" name="'.$k['name'].'" id="'.$k['id'].'" method="'.$k['metodo'].'">'.$html.'</form>';
	}
	
	private function generarCampos ($k) {
		$i=0; while ($i<count($k)) {
			switch ($k[$i]['tipo']) {
				case 'texto': $html .= $this->texto($k[$i]); break;
				case 'password': $html .= $this->texto($k[$i]); break;
				case 'select': $html .= $this->select($k[$i]); break;
				case 'checkbox': $html .= $this->checkbox($k[$i]); break;
				case 'radio': $html .= $this->radio($k[$i]); break;
				case 'textarea': $html .= $this->textarea($k[$i]); break;
				case 'file': $html .= $this->file($k[$i]); break;
			}
			
			$i  ;
		}
		
		return $html;
	}
	
	private function generarBotones ($k) {
		$i=0; while ($i<count($k)) {
			$html .= '<input type="'.$k[$i]['tipo'].'" value="'.$k[$i]['texto'].'" name="'.$k[$i]['name'].'" class="'.$k[$i]['clase'].'" />';
			$i  ;
		}
		return '<p class="botonera">'.$html.'</p>';
	}
	
	// CAMPO TEXTO
	private function texto ($j) {
		$tipo = 'text'; if ($j['tipo']=='password') {$tipo='password';}
		$html = '<p class="'.$j['claseTag'].'">';
		$html .= '<label for="'.$j['id'].'">';
		$html .= '<span>'.$j['textoLabel'].'</span>';
		$html .= '<input type="'.$tipo.'" id="'.$j['id'].'" name="'.$j['name'].'" class="'.$j['claseCampo'].'" value="'.$j['valor'].'" />';
		$html .= '</label>';
		$html .= '</p>';
		
		return $html;
	}
	
	// CAMPO SELECT
	private function select ($j) {
		$html = '<p class="'.$j['claseTag'].'">';
		$html .= '<label for="'.$j['id'].'">';
		$html .= '<span>'.$j['textoLabel'].'</span>';
		$html .= '<select id="'.$j['id'].'" name="'.$j['name'].'" class="'.$j['claseCampo'].'">';
		$i=0; while ($i<count($j['opciones'])) {
			$valores = $j['opciones'][$i];
			$seleccionado = ''; if ($valores[2]=='seleccionado') {$seleccionado = ' selected="selected"';}
			$html .= '<option value="'.$valores[0].'"'.$seleccionado.'>'.$valores[1].'</option>';
			$i  ;
		}
		$html .= '</select>';
		$html .= '</label>';
		$html .= '</p>';
		
		return $html;
	}
	
	// CAMPO TEXTAREA
	private function textarea ($j) {
		$html = '<p class="'.$j['claseTag'].'">';
		$html .= '<label for="'.$j['id'].'">';
		$html .= '<span>'.$j['textoLabel'].'</span>';
		$html .= '<textarea id="'.$j['id'].'" name="'.$j['name'].'" class="'.$j['claseCampo'].'" cols="'.$j['cols'].'" rows="'.$j['rows'].'">'.$j['valor'].'</textarea>';
		$html .= '</label>';
		$html .= '</p>';
		
		return $html;
	}
	
	// CAMPO CHECKBOX
	private function checkbox ($j) {
		$i=0; while ($i<count($j['campos'])) {
			$campos = $j['campos'][$i];
			$seleccionado = ''; if ($campos['seleccionado']=='si') {$seleccionado = ' checked="checked"';}
			$html .= '<'.$j['tag'].' class="'.$j['claseTag'].'">';
			$html .= '<label for="'.$campos['id'].'">';
			$html .= '<input type="checkbox" id="'.$campos['id'].'" name="'.$campos['name'].'" class="'.$j['claseCampo'].'" value="'.$campos['valor'].'"'.$seleccionado.' />';
			$html .= '<span>'.$campos['textoLabel'].'</span>';
			$html .= '</label>';
			$html .= '</'.$j['tag'].'>';
			$i  ;
		}
		
		if (count($j['campos'])>1 and $j['tag']=='li') {
			$html = '<div class="lista"><p class="label">'.$j['valorLista'].'</p><ul>'.$html.'</ul></div>';
		}
		
		return $html;
	}
	
	// CAMPO RADIO
	private function radio ($j) {
		$i=0; while ($i<count($j['campos'])) {
			$campos = $j['campos'][$i];
			$seleccionado = ''; if ($campos['seleccionado']=='si') {$seleccionado = ' checked="checked"';}
			$html .= '<li class="'.$j['claseTag'].'">';
			$html .= '<label for="'.$campos['id'].'">';
			$html .= '<input type="radio" id="'.$campos['id'].'" name="'.$j['name'].'" class="'.$j['claseCampo'].'" value="'.$campos['valor'].'"'.$seleccionado.' />';
			$html .= '<span>'.$campos['textoLabel'].'</span>';
			$html .= '</label>';
			$html .= '</li>';
			$i  ;
		}
		
		$html = '<div class="lista"><p class="label">'.$j['valorLista'].'</p><ul>'.$html.'</ul></div>';
		
		return $html;
	}
	
	// CAMPO FILE
	private function file ($j) {
		$html = '<p class="'.$j['claseTag'].'">';
		$html .= '<label for="'.$j['id'].'">';
		$html .= '<span>'.$j['textoLabel'].'</span>';
		$html .= '<input type="file" id="'.$j['id'].'" name="'.$j['name'].'" class="'.$j['claseCampo'].'" />';
		$html .= '</label>';
		$html .= '</p>';
		
		return $html;
	}
	
}

?>

La clase se invoca así:

include('formulario.php');
$f1 = new Formularios();
echo $f1->Formulario($json);

Y aquí el código JSON de la variable $json que aparecía en la invocación de la clase:

$json = '{
	"id":"formulario_1",
	"name":"formulario_1",
	"metodo":"post",
	"accion":"index.php",
	"botones":[
		{"tipo":"button","clase":"boton1","name":"boton1","texto":"Tipo Button"},
		{"tipo":"submit","clase":"boton2","name":"boton2","texto":"Tipo Submit"},
		{"tipo":"reset","clase":"boton3","name":"boton3","texto":"Tipo Reset"}
	],
	"secciones":[
		{
			"fieldset":"Fieldset 1",
			"camposFieldset":[
				{
					"tipo":"texto",
					"id":"campo_tipo_texto",
					"name":"campo_tipo_texto",
					"textoLabel":"Campo de tipo Texto:",
					"claseCampo":"texto",
					"claseTag":"clearfix",
					"valor":"El valor no es obligatorio"
				},
				
				{
					"tipo":"password",
					"id":"campo_tipo_password",
					"name":"campo_tipo_password",
					"textoLabel":"Campo de tipo Password:",
					"claseCampo":"texto",
					"claseTag":"clearfix",
					"valor":"El valor no es obligatorio"
				}
			]
		},
		{
			"fieldset":"Fieldset 2",
			"camposFieldset":[
				{
					"tipo":"select",
					"id":"campo_tipo_select",
					"name":"campo_tipo_select",
					"textoLabel":"Campo de tipo Select (Seleccionar como máximo una sola opción):",
					"claseCampo":"combo",
					"claseTag":"clearfix",
					"opciones":[
						["valor1","Texto 1"],
						["valor2","Texto 2","seleccionado"],
						["valor3","Texto 3"],
						["valor4","Texto 4"]
					]
				},
				
				{
					"tipo":"checkbox",
					"tag":"p",
					"claseTag":"clearfix",
					"claseCampo":"checkbox",
					"campos":[
						{
							"id":"campo_tipo_check_1",
							"name":"campo_tipo_check_1",
							"textoLabel":"Campo tipo Checkbox en Párrafo",
							"valor":"si"
						}
					]
				}
			]
		},
		
		{
			"fieldset":"Fieldset 3",
			"camposFieldset":[
				{
					"tipo":"checkbox",
					"tag":"li",
					"claseTag":"clear",
					"claseCampo":"checkbox",
					"valorLista":"Campos de tipo Checkbox en Listado (se pueden seleccionar cero, una o varias opciones):",
					"campos":[
						{
							"id":"c_campo_tipo_check_2",
							"name":"c_campo_tipo_check_2",
							"textoLabel":"Checkbox 1:",
							"valor":"si"
						},
						{
							"id":"c_campo_tipo_check_3",
							"name":"c_campo_tipo_check_3",
							"textoLabel":"Checkbox 2:",
							"valor":"c5_2_si",
							"seleccionado":"si"
						},
						{
							"id":"c_campo_tipo_check_4",
							"name":"c_campo_tipo_check_4",
							"textoLabel":"Checkbox 3:",
							"valor":"si"
						}
					]
				},
				
				{
					"tipo":"radio",
					"claseTag":"clearfix",
					"claseCampo":"radio",
					"name":"campo_tipo_radio",
					"valorLista":"Campos de tipo Radio (seleccionar solo uno):",
					"campos":[
						{
							"id":"campo_tipo_radio_1",
							"textoLabel":"Radio 1:",
							"valor":"valor_1"
						},
						{
							"id":"campo_tipo_radio_2",
							"textoLabel":"Radio 2:",
							"valor":"valor_2"
						},
						{
							"id":"campo_tipo_radio_3",
							"textoLabel":"Radio 3:",
							"valor":"valor_3",
							"seleccionado":"si"
						}
					]
				}
			]
		},
		
		{
			"fieldset":"Fieldset 4",
			"camposFieldset":[
				{
					"tipo":"textarea",
					"id":"campo_tipo_textarea",
					"name":"campo_tipo_textarea",
					"textoLabel":"Campo tipo Textarea:",
					"claseCampo":"ancho",
					"claseTag":"clearfix",
					"valor":"Contenido del campo de tipo Textarea (Opcional)",
					"cols":"20",
					"rows":"6"
				},
				
				{
					"tipo":"file",
					"id":"campo_tipo_file",
					"name":"campo_tipo_file",
					"textoLabel":"Campo de tipo File:",
					"claseCampo":"file",
					"claseTag":"clearfix"
				}
			]
		}
	]
}';

Publicado

Categorías:

Entrada siguiente CSS: Utilización de tipografías incrustadas mediante @font-face

Entrada anterior CSS hacks: filter by selectors