Taller de Adobe Dreamweaver: Dentro del formulario

¿Qué tal, gente? ¿Cómo les va? ¿Revisaron lo que les dejé la clase pasada, de formularios? ¿Sí? Bárbaro ¿No? ¡¡¡No importa!!! los quiero igual.

Hoy vamos a ver la primera parte de los elementos que contiene un formulario y la semana que viene, como está en el temario, la segunda. Pero el martes 8 de julio, agregaremos una clase más que será SÓLO DE RESPUESTAS, para las dudas que vayan juntando de aquí en más o las que tengan guardadas. Además, responderemos las preguntas que fueron quedando en comentarios a lo largo del curso.

Entonces, a prestar atención y anotar todo bien, así dentro de dos clases nos queda todo bien claro y somos la ¡envidia de los nerds del barrio! jeje.

Además de esta manera nos quedarán las preguntas frecuentes ordenadas en una sola clase.

Bueno, empecemos.

La clase anterior vimos la etiqueta <form> en sí, con sus propiedades, y en un momento hablamos de usuario y contraseña, pero no explicamos como enviarlos.

Bueno, hoy nos toca ver los elementos del formulario que hacen posible el envio de datos a través del mismo.

Antes que nada dividamos el formulario en partes para que puedan identificar su funcionamiento más fácilmente.

Tenemos la parte donde se setea el destino y la manera en que se van a enviar los datos, que son las propiedades de la etiqueta <form> en sí.

Tenemos la parte de la información, que va a estar contenida en etiquetas que van a ir dentro del formulario y tenemos, por ultimo, la etiqueta que va a enviar los datos que por lo general es un botón o actúa como tal.

La etiqueta <form> ya la vimos la clase pasada y también vimos las propiedades que indican el destino a donde va a llegar la información y de qué manera la vamos a enviar, así que, continuemos con las etiquetas que van adentro del formulario.

Etiquetas contenedoras de información

Estas etiquetas van a actuar de contenedores, desde los cuales el formulario va a captar los datos para enviarlos según las propiedades se lo indiquen (method y action de la clase anterior).

¿Cómo es que contienen información?

Bueno, veamos mejor una etiqueta de estas a modo de ejemplo, para que se entienda de la forma más clara posible y después vemos el resto de las etiquetas del formulario.

La más común de las etiquetas de un formulario es la etiqueta <input>. Esta etiqueta va a indicar un ingreso de datos en el formulario.

Cuando el formulario sea enviado mediante el clic en un botón, va a buscar en esta etiqueta, los datos que contenga y los va a enviar (además de buscar en las otras etiquetas que contenga).

Veamos una etiqueta <input>:

<input type="text" name="user" value="" />

Ahora analicémosla, para ver que nos encontramos.

Como primer medida tenemos que es una etiqueta que cierra en sí misma (no se si recordarán que por allá al principio dijimos que TODAS las etiquetas deben tener un cierre), ya que tiene la barra al final.

También vemos que además del nombre de la etiqueta (input) en sí, tenemos varias propiedades.

-type: Esta propiedad nos va a decir qué tipo de información va a contener el input, en este caso texto.

-name: Name es el nombre con que le va a llegar al archivo que va a procesar la información (.php, .asp, etc.), el texto que enviemos.

-value: Es el valor que va a enviar dentro del nombre, que por lo general es ingresado por el usuario.

Como podemos ver acá, cuando presionemos el botón “Enviar”, la información de la caja, que sería una representación gráfica de la propiedad value, sera enviada al servidor bajo el nombre de “user”, de este modo cuando nuestro script de programación lea lo que le llega desde el formulario, buscando dentro de “user” encontrara lo que ingreso el usuario dentro del input (contenido del value).

Existen otro tipo de inputs, que en realidad los que cambia es solo la propiedad “type” pero realmente son de utilidad.

Veamos algunos:

<input type="password" name="pass" value="" />

Este input, es igual al anterior, solo que al indicarle el “type” en modo password, lo que hace es ocultar el texto en forma de asteriscos, para que no pueda ser visto.

Habrán visto este tipo de inputs en cualquier casilla de email o en cualquier lado que tengan que loguear usuario y contraseña.

Ahí tienen un típico formulario compuesto por la etiqueta <form> con 2 inputs dentro, uno type text (el de username) y otro type password (el de la contraseña) y para terminar el botón de envío de datos.

Este formulario seria algo así:

<form method="post" action="login.php" >
   <input type="text" name="usuario" value="" />
   <input type="password" name="pass" value="" />
   <input type="submit" value="Enviar" />
</form>

Y acá vemos otro tipo de input, el input de tipo submit, este nos crea un botón, que va a contener el texto que pongamos en la propiedad value, que cuando le demos clic va a activar el formulario, para que recoja la información del resto de los inputs y la envíe, en este caso, a login.php por post.

(Recomiendo leer el taller de php, en esta misma página, para entender bien como funcionan los formularios desde la parte de programación).

Conclusión

Bueno, aquí vimos la primer parte de los elementos que se encuentran dentro de un formulario y cómo funcionan.

La clase que viene, veremos el resto de estos elementos e iremos anotando preguntas para la siguiente (martes 8 de julio) en la cual trataré de responder todo lo que me vayan preguntando.

Espero que esta clase les haya servido o les sirva en un futuro y, por sobre todo, que la hayan pasado lindo leyéndola.

Nos vemos el martes que viene, para seguir con más taller.

Cuidense.

¡Hasta luego!