comparte el articulo 

Creación de formularios con XHTML y CSS: elemento form

Actualizado el 16/01/2012 < > 0 Comentarios

Resumen: Primera parte de estudio sobre los formularios. Hablamos sobre el elemento form, un elemento fundamental para el manejo de información en nuestros sitios web.

Es tiempo de iniciar con el estudio de uno de los elementos más importantes dentro de una estructura XHTML, los formularios. Su adición a un código permite aumentar a altos grados la interacción con el usuario, logra establecer una retroalimentación y nos da la oportunidad obtener información sobre las personas que visitan nuestro sitio, ya sea para objeto de estudio, de ventas o simplemente informativo.

Los formularios son una parte angular en casi todos los sitios comerciales que existen en Internet, por no decir que en todos, por lo que representan el elemento clave para establecer una transacción, también son fundamentales en sitios que buscan dar soluciones o respuestas a sus usuarios, ya que gracias a ellos se puede establecer una comunicación sin necesidad de tener que hacer alguna llamada o visita personal.

Pero su función no se ve limitada a esto, podemos explotar su potencial para incluso realizar algún tipo programación avanzada, su funcionalidad de obtener datos para después procesarlos nos da la oportunidad de realizar el número de operaciones que deseemos con la información. Dicho procesamiento se puede hacer en el backend o en el frontend de nuestro código, así las tareas pueden ir desde una sencilla calculadora realizada con JavaScript hasta un graficador hecho con PHP.

Lo que sucede más allá del formulario ya no corresponde a XHTML ni CSS, dependerá y variará según las operaciones que el diseñador o desarrollador necesiten hacer, el uso de lenguajes o aplicaciones especializadas entra en el juego, pero esto no es parte del estudio de nuestro manual, por lo que en este artículo únicamente nos enfocaremos en estructurar nuestro formulario de manera correcta dentro de nuestro documento XHTML y estilizarlo con CSS.

Elemento form

La etiqueta “form” es la utilizada para definir un nuevo formulario dentro de nuestro código XHTML, cuenta con una apertura y contraparte de clausura, en medio de esto deber ir definido todos los campos y botones que va a tener nuestro formulario.

<form action=”webera.php” method=”post”>
<!-- En esta parte tendremos los campos -->
</form>

Como se puede observar, el campo de apertura tiene dos atributos principales, estos son “action” y “method”, el atributo “action” se encarga de decirle al navegador a que lugar mandar la información obtenida en el formulario cuando se esta se envía, es decir su valor puede ser cualquier página o script que vaya a procesar la información y hacer algo con ella. Por su parte el atributo “method” se encarga de definir la manera en que vamos a enviar esa información, para esto tenemos dos opciones básicas “get” o “post”.

La diferencia entre “get” y “post” esta en el medio que utilizan para mandar la información, mientras que “get” utiliza la URL para mandar los datos, “post” lo hace utilizando los HTTP headers. El método default es “get” por lo que si deseas es utilizar “post” tienes que definir de manera obligatoria el valor en el atributo “method”.

El uso de uno u otro método variará según lo que queramos hacer, “get” representa menos seguridad para el manejo de información ya que cualquiera puede tener acceso simplemente leyendo la URL, aunque para evitar esto se puede utilizar encriptación.

Campos y botones

La manera en que usuario podrá añadir información a un formulario será a través de campos, los cuales varían según el tipo de información que se debe de insertar. Existen cajas de texto, botones radio, listas de selección, casillas de selección y áreas de texto, la información que se deposita en ellos la mayor parte del tiempo será enviada a través de botones, los cuales al recibir un evento de clic se encargan de mandar la información al destino especificado en el atributo “action” del elemento “form”.

Si bien existen muchos tipos de campos, las etiquetas para definirlos son básicamente tres “input”, “textarea” y “select”. El elemento “input” es el más importante de todos, ya que puede utilizarse para definir distintos campos, incluso botones, ya que su atributo “type” es el que se encarga de definir que uso darle al elemento.

Identificación de los campos

Si enviamos todos los datos introducidos en un formulario sin nada que los identifique, por obvias razones el procesamiento resultará defectuoso, por ello es necesario dar un registro único a cada campo para definir que es lo que contiene. Para lograr esto se utilizan atributos como “id” y “name”, que contienen un valor único y descriptivo del campo.

El atributo “name” es el que originalmente recibía esta función de identificación, pero con las nuevas formas de programación frontend, el “id” de un elemento también puede ser recurrido para realizar la labor de diferenciación y reconocimiento del contenido. Si por ejemplo quisiéramos especificar que un campo será utilizado para introducir la edad del usuario, entonces debemos realizar lo siguiente:

<input name="edad" />

Continuación…

En la siguiente parte de este artículo estudiaremos a detalle cada una de las etiquetas utilizadas para crear elementos de formulario, así mismo los distintos tipos existentes para el elemento “input” y más adelante estilizaremos nuestro formulario para darle una correcta presentación.

Publicado el 12/01/2012, última actualización 16/01/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras