Taller de PHP: Procesar un formulario (Parte I)

¡Hola, bienvenidos a la octava clase del Taller de PHP! Esta clase estará dividida en dos partes, por una cuestión de prolijidad. En esta primera parte vamos a ver algunos tipos de campos que podemos tener en el formulario.

Los diferentes campos que podemos tener en un formulario son inputs, selectbox y textarea. A su vez los inputs se dividen en de tipo texto, radio, checkbox, password, hidden, button, submit, reset. Son un montón, así que veamos uno por uno.

Inputs

El más común de todos es el de tipo text. Este sirve para completar una sola linea de texto y tiene que tener las siguientes propiedades.

<label for="input_campo">Nombre Campo</label>
<input id="input_campo" type="text" name="nombreCampo" value="" />


Bueno, ustedes seguramente ven lo de arriba y se estarán diciendo: ¡Un momento, cerebrito! Por lo que intentare explicar qué es cada cosa.

Primero van a ver una etiqueta label que no la nombré antes. Esta etiqueta no es obligatoria incluirla, pero es lo correcto, con la misma le van a poder indicar un nombre al campo para que todo el mundo sepa lo que está completando. En el for tienen que incluir la id del campo y esto me da pie para explicar esta última.

La id del input es un identificador único, no puede haber ningún otro elemento con este nombre en toda la página. El nombre es a gusto de ustedes, pero por convención se utilizan nombres relacionados con el elemento que están identificando.

Consejo: a la hora de crear una id es muy útil, por experiencia propia, ponerle primero el tipo de elemento html que es y luego que representa, si se fijan yo elegí input_campo, ya que es un input y como usé un nombre genérico le puse campo, pero ahí podría ser input_direccion, input_telefono, input_email. Esto les va a resultar útil a la hora de armar un CSS o realizar acciones con Javascript. Van a poder identificar el elemento muy fácilmente.

Con type le indicamos el tipo de input que es, en este caso es un texto, name es obligatorio y lo utilizaremos para levantar la variable POST y value es el contenido del campo, si lo dejamos con las dos comillas y sin contenido por defecto no nos va a aparecer nada en el campo, sino podemos completarlo con alguna frase del estilo para que nos aparezca adentro del campo.


<label for="input_contacto">Nombre Campo</label>
<input id="input_contacto" type="text" name="nombreContacto" value="Complete con sus nombres y apellidos" />


Estos dos campos se ven de la siguiente manera:

Bueno, los inputs de tipo text los utilizamos para casos en que el usuario debe completar un solo reglón. Como completar con sus nombres y apellidos, dirección, teléfono, email, etc.

También tenemos los inputs de tipo Radio, cuya sintaxis es la siguiente:


<label for="input_si">Si</label><input id="input_si" type="radio" name="suscribirse" value="si" />
<label for="input_no">No</label><input id="input_no" type="radio" name="suscribirse" value="no" />


¿Qué tenemos acá? Fíjense que name es el mismo para ambos inputs, lo que cambia es el value (y la id obvio, no se puede repetir id en toda la pagina). Este tipo de campos es autoexcluyente, sólo se puede marcar una opción, y por php se recibirá únicamente el valor que fue marcado. El mismo se ve de la siguiente manera:

Otro caso similar es el tipo Checkbox, los clásicos cuadraditos que se utilizan para tildar y destildar, es muy común ver este tipo de inputs antes de registrarnos en algún lugar y que nos pregunten si estamos de acuerdo con los términos y condiciones.

La sintaxis es la siguiente:

<input id=input_acuerdo" type="checkbox" name="acuerdoLegal" value="1" />


En caso de que NO este marcado por el usuario al momento de hacer un submit del formulario, este campo no se envía y al procesarlo por Php, veremos que no existe la variable POST correspondiente a este campo.

Otro tipo de input es Password, esta propiedad hace que el campo en lugar de ver el texto que se escribe en él, aparezcan los clásicos redondelitos negros ocultando la información.


<input id="input_password" type="password" name="password" value="" />


Luego tenemos el tipo Hidden, que es un campo oculto, en el podemos poner información pre-definida que el usuario no tiene que completar, entonces no se muestra pero si se envía.


<input type="hidden" name="idUsuario" value="25" />


Por último vamos a ver el tipo Submit que es el campo que va a enviar nuestro formulario


<input type="submit" name="submit" value="Enviar consulta" />


que se va a ver de la siguiente forma

Bueno, eso es todo por esta clase, la semana que viene seguimos con el resto de los campos del formulario que nos faltan.