Escribiendo el HTML. Un formulario se declara entre estos dos tags:

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Escribiendo el HTML. Un formulario se declara entre estos dos tags:"

César Plaza Río
hace 8 años
Vistas:

1 Formularios Un formulario HTML sirve como principal punto de interacción con el usuario: mediante ellas, podemos hacer posible la interacción de nuestra página Web para con el usuario que visita nuestro sitio. De esta manera, se puede entender un formulario no sólo como un ingreso de datos del usuario, también la búsqueda en Google es un formulario. Cuando intentamos ingresar a nuestro mail online, el espacio para ingresar nuestro nombre de usuario y nuestra contraseña es también un formulario. Cuando queremos participar en un foro y queremos mandar nuestro mensaje, el espacio hecho para tal efecto es también un formulario. Tal como ya fue dicho, el formulario es el principal elemento para que de esta manera, nuestro sitio se pueda convertir en una Web 2.0. Una Web 2.0, definida como primera vez en el año 2004 por Tim O Reilly se relaciona con aquel sitio que se basa principalmente en la generación de contenidos por parte de los usuarios, tales como blogs, redes sociales o wikis. Ejemplos de estos sitios sobran: twitter, facebook, wordpress, fotolog, flickr o wikipedia son los ejemplos más grandes y exitosos.

Cuando intentamos ingresar a nuestro mail online, el espacio para ingresar nuestro nombre de usuario y nuestra contraseña es también un formulario.

2 Escribiendo el HTML Un formulario se declara entre estos dos tags: <form> <p>aquí irán todos nuestros elementos</p> Sin embargo, este formulario no hace nada. Para que nuestro formulario haga algo, debemos incluir algunos atributos, tales como la acción a ejecutarse cuando aceptemos el formulario. Sin embargo, antes de poder crear un formulario, veamos algunas de las distintas opciones que tenemos para crearlo. Elemento input Uno de los principales elementos de un formulario, es el elemento <input>, el cual puede ser muchas cosas, dependiendo de su atributo. Veamos cuáles son las opciones: TEXT Un cuadro de texto PASSWORD Un campo para ingresar contraseñas CHECKBOX Una selección múltiple RADIO Una selección única entre varias opciones SUBMIT Un botón para enviar el formulario RESET Un botón para limpiar el formulario FILE Un campo para subida de archivos HIDDEN Un campo oculto IMAGE Una imagen que envía el formulario BUTTON Un botón que no hace nada (Frecuentemente acompañado de Javascript) Un ejemplo de todos estos botones se puede encontrar en:

Sin embargo, antes de poder crear un formulario, veamos algunas de las distintas opciones que tenemos para crearlo.

3 Otros elementos de interés Existen algunos otros elementos de interés para la creación de un formulario. Estos son el área de texto y el select box: una selección de opciones (de las cuales sólo uno se puede elegir). Una diferencia entre el textarea y el input text es que mientras que el input text no acepta retorno de carro, el textarea sí lo permite. De esta manera, un texto cuya representación es más de una línea, se puede guardar o representar como tal. A su vez, el select box difiere del input radio debido a que necesariamente se tiene que elegir una opción, además de hacerlo en menor superficie que la primera. Un ejemplo de estos dos elementos, sumados a los anteriores, se puede encontrar en: A todos los elementos arriba nombrados se les puede aplicar estilo, pudiendo lograr resultados realmente sorprendentes en el área gráfica. Por otro lado, combinando los formularios con Javascript, se puede lograr aún mejor usabilidad a su vez que rapidez y asistencia en el llenado de las mismas. Para ver ejemplos de uso intensivo de Javascript y CSS en un formulario, visitar el siguiente link:

Una diferencia entre el textarea y el input text es que mientras que el input text no acepta retorno de carro, el textarea sí lo permite.

4 Uso de métodos En la actualidad, existen dos formas de generar un formulario que se definen a su vez en dos métodos: el método GET y el POST. Método GET La diferenciación entre ambas es que el objeto GET será siempre públicamente abierto mientras que el método POST no podrá ser visible. Veamos estos dos ejemplos: <form name="formulario1" action="/diplomado/ejemplo9.php" method="get"> <input type="text" name="el_texto" value="" /><br /> <input type="submit" value="aceptar" /> Cuando enviamos el formulario, la salida será: Tal como se puede apreciar en el ejemplo, la cadena ingresada (en este caso, hello world ) se puede ver a vista simple. Esto tiene la ventaja de ser un programa sumamente fácil de programar, pero también facilita muchísimo el incentivo para el mal uso del mismo.

Veamos estos dos ejemplos: <form name="formulario1" action="/diplomado/ejemplo9.

5 Es así como no se debería pasar información sensible a través de este método, tales como contraseñas y otros datos sensibles. Supongamos que tengamos el siguiente formulario: <form name="formu" action="ejemplo12.php" method="get"> Usuario: <input type="text" name="usuario" value="" /><br /> Pass: <input type="password" name="contrasenja" value="" /><br /> <input type="submit" value="ingresar" /> Cuya salida una vez que ingresemos nuestro nombre de usuario y contraseña es la siguiente: Tal como se puede apreciar, el traspaso de información sensible es inconveniente. Como dato adicional (que sólo enseña la práctica), una variable en un método GET no puede contener más de 255 caracteres.

php" method="get"> Usuario: <input type="text" name="usuario" value="" /><br /> Pass: <input type="password" name="contrasenja" value="" /><br /> <input type="submit"

6 Método POST Por suerte para nosotros, existe otro método: el método POST: <form name="formulario1" action="/diplomado/ejemplo10.php" method="post"> <input type="text" name="el_texto" value="" /><br /> <input type="submit" value="aceptar" /> Este método es mucho más seguro pero un poco más complicado de manejar debido a que en ninguna parte podemos ver las variables. Lo único que se puede hacer con este tipo de variables es imaginarlas, guiándonos por el nombre que le asignemos al formulario y a nuestros inputs, textareas o selects. La salida en pantalla de este tipo de formulario una vez que se haya enviado el formulario es el siguiente: Tal como se puede apreciar en la imagen, después de haber enviado el formulario no existe ningún signo que indique que hayamos enviado un formulario, sin embargo, los datos sí se enviaron, y es posible rescatar y trabajarlas con PHP. El método POST a su vez, no tiene la limitación de 255 caracteres que tiene el método GET, por lo que es posible enviar una gran cantidad de información de una sola vez.

ninguna parte podemos ver las variables.

7 Combinando varios formularios en una sola página En una página puede (o no) existir más de un formulario. Puede darse el caso por ejemplo que queramos en una sola página una búsqueda y a su vez, permitir la entrada a nuestros usuarios: Pero cómo se diferencian estos dos formularios? La respuesta a esta interrogante tiene su respuesta en la acción o al nombre del formulario a ejecutarse, que no es otra cosa que la página a la cual mandaremos nuestros datos del formulario o bien, en el nombre que le asignemos al formulario. El siguiente ejemplo permite mandar ya sea el nombre o la edad, pero no ambas a la vez:

8 <form name="formu1" action="ejemplo11.php" method="get"> Ingrese su nombre: <input type="text" name="nombre" value="" /><br /> <input type="submit" value="aceptar" /> <form name="formu2" action="ejemplo11.php" method="get"> Ingrese su edad: <input type="text" name="edad" value="" /><br /> <input type="submit" value="ingresar" /> Para ver este formulario en acción y evaluar las distintas opciones que tiene, por favor visitar:

value="aceptar" /> <form name="formu2" action="ejemplo11.

9 Recursos utilizados Formularios Web Dos formularios en una página

html Web 2.0 http://es.wikipedia.org/wiki/web_2.

Documentos relacionados

A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:

A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor: FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre