Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a PHP que contiene a PHP: Clase para generación de formularios accesibles

Datos de búsqueda

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"
				}
			]
		}
	]
}';

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio