Los formularios son, probablemente, la parte más importante de cualquier sitio web, ya que es la vía principal que tienen tus visitantes de ponerse en contacto contigo. Por desgracia, los formularios son a menudo complejos y requieren de mucho tiempo para poder crearlos. En este artículo os he compilado mis herramientas favoritas para acelerar la creación y desarrollo de un formulario web.
jQuery UI
Cuando se trata de formularios, la manera más sencilla de mejorarlos es el uso del conocido plugin jQuery UI. Este plugin añade un montón de funcionalidades de HTML5 para formularios básicos tales como date pickers, campos con autocompletadores, pestañas y más. Un plugin de obligado uso que tus visitantes, de seguro, adorarán.
PureCSS.io
Dar estilo a los formularios, a menudo, es una tarea larga y complicada. Pure CSS es un framework CSS muy ligero que te permite crear formularios realmente preciosos en cuestión de minutos, con soporte a las últimas especificaciones de HTML5.
Bootstrap
Bootstrap es ampliamente conocido entre los desarrolladores front-end. Desarrollado por los ingenieros de Twitter, esta herramienta pone a disposición del usuario miles de estilos responsive, y además, es gratuita. Bootstrap es un front-end framework completo que te permitirá ahorrar mucho tiempo al desarrollar formularios, así como cualquier otra sección de un sitio web. Toneladas de sitios web hoy en día han sido realizados con la ayuda de Bootstrsap. Si no lo has probado todavía, créeme, debes hacerlo cuanto antes.
JQuery Bootstrap Validator
Hablando sobre Bootstrap… ¿qué tal si mejoramos sus posibilidades mediante la inserción de un poco de jQuery? Tal y como reza su nombre, este práctico plugin ofrece una gran cantidad de opciones de validación para el front-end y está especialmente diseñado para trabajar en proyectos realizados con Bootstrap.
jQuery Form Plugin
jQuery Form Plugin te permite mejorar fácilmente y de forma discreta formularios HTML para que puedan utilizar AJAX. Los principales métodos, ajaxForm y ajaxSubmit, recopilan información desde un elemento del formulario para determinar cómo manejar el proceso de envío. Ambos métodos contienen muchas opciones, que te permitirán tener un control total sobre cómo se envían los datos. Enviar un formulario con AJAX no es muy difícil, y menos con jQuery Form Plugin.
Pork Form Validation
Pork Form Validation es una clase de PHP que gestiona, como habrás adivinado, la validación de los datos enviados por los formularios. Si estás utilizando un framework de PHP como CodeIgniter o Cake PHP no necesitarás de esto, ya que dichas herramientas ya contienen un montón de herramientas para validar los datos, pero en el caso de un desarrollo más pequeño ,personalmente adoro como Pork Form Validation me permite ahorrar tiempo.
Aquí tienes un breve ejemplo de como funciona:
$validations = array( 'name' => 'anything', 'email' => 'email', 'alias' => 'anything', 'pwd'=>'anything', 'gsm' => 'phone', 'birthdate' => 'date'); $required = array('name', 'email', 'alias', 'pwd'); $sanatize = array('alias'); $validator = new FormValidator($validations, $required, $sanatize); if($validator->validate($_POST)) { $_POST = $validator->sanatize($_POST); // now do your saving, $_POST has been sanatized. die($validator->getScript().""); } else { die($validator->getScript()); }
Para validar solo un elemento
$validated = new FormValidator()->validate('blah@bla.', 'email');
Para curar solo un elemento.
$sanatized = new FormValidator()->sanatize('blah', 'string');
Y este ha sido el artículo en el que trataba enseñaros Herramientas super útiles para simplificar el desarrollo de formularios, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!