una nueva página (recordar que en este curso no se ve como programar en el servidor) Todo los formularios que implemento y los que usted implementará

Tamaño: px

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

Download "una nueva página (recordar que en este curso no se ve como programar en el servidor) Todo los formularios que implemento y los que usted implementará"

María Teresa Godoy Saavedra
hace 6 años
Vistas:

1 Formularios En Html 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 el sitio, solicitar productos, sacar turnos etc. Si recién comienza en el mundo del desarrollo de páginas web es recomendable primero aprender y conocer todos los elementos para la creación de formularios en HTML y en un paso posterior estudiar la registración en el servidor Veamos la sintaxis básica para crear un formulario donde ingresemos nuestro nombre. Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form veremos otros elementos para crear botones, editores de línea, cuadros de chequeo, radios de selección etc. Confeccionaremos un formulario para el ingreso de nuestro nombre y un botón para el envío del dato ingresado al servidor: <!DOCTYPE html> <title>prueba de formulario</title> <form action="registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <input type="submit" value="enviar"> Veamos detenidamente la estructura de un formulario elemental, lo primero la apertura de la marca form donde debemos definir dos propiedades (action y method): <form action="registrardatos.php" method="post"> La propiedad action se inicializa con el nombre de la página que contiene el programa que procesará los datos en el servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacené en este sitio una página codificada en PHP que recibe los datos del formulario y los imprime en

2 una nueva página (recordar que en este curso no se ve como programar en el servidor) Todo los formularios que implemento y los que usted implementará como ejercicios deben llamar a esta página: "/registrardatos.php" más adelante cuando conozca un lenguaje de servidor podrá almacenarlos en una base de datos, consultar otros datos, modificar datos existentes etc. La segunda propiedad que debemos inicializar es method. Esta propiedad puede almacenar únicamente dos valores (post o get) Normalmente un formulario se envía mediante post (los datos se envían con el cuerpo del formulario) En caso de utilizar get los datos se envían en la cabecera de la petición de la página, utilizando el método get estamos limitados en la cantidad de datos a enviar, no asi con el método post. Ahora veamos el cuadro de texto donde se ingresa el nombre: Ingrese su nombre: <input type="text" name="nombre" size="20"> El mensaje "Ingrese su nombre:" es un texto fijo. El elemento input permite definir un cuadro de texto (editor de línea) si asignamos a la propiedad type el valor "text". Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo mediante PHP) Por último inicializamos la propiedad size con el valor 20, esto significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar) Seguidamente: <input type="submit" value="enviar"> También mediante el elemento input definimos un botón para el envío de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botón para el envío de datos. La propiedad value almacena la etiqueta que debe mostrar el botón. Finalmente cerramos el formulario:

3 EN PHP Una actividad fundamental en PHP es la recolección de datos de un formulario HTML. El proceso para el manejo de FORMULARIOS requiere generalmente dos páginas, una que implementa el formulario y otra que procesa los datos cargados en el formulario. La estructura mínima de un formulario es la siguiente: para la entrada de un nombre de persona, un objeto text y un botón para el envío del dato al servidor: <title>formulario de entrada del dato</title> <form method="post" action="pagina2.php"> Ingrese su nombre: <input type="text" name="nombre"> <input type="submit" value="confirmar"> Esta página está completamente codificada en HTML, es decir un formulario contiene elementos HTML puros. El elemento <form> y nos permite definir un formulario en la página. Este elemento tiene dos propiedades que debemos inicializar obligatoriamente: action y method. La propiedad action indica el nombre del archivo que recibirá los datos ingresados por el operador en el formulario y que serán enviados al servidor cuando se presione el botón (submit). La propiedad method indica como se organizan esos datos para enviarlos al servidor,

4 pudiendo ser mediante los métodos post o get (normalmente los datos de un formulario se envían mediante el método post). Para crear un cuadro de texto para el ingreso del nombre debemos definir un objeto de tipo "text" y darle un nombre: <input type="text" name="nombre"> La propiedad type nos permite definir el tipo de control y con la propiedad name indicamos el nombre del control. Por último todo formulario tiene un botón de tipo submit: <input type="submit" value="confirmar"> También utilizamos el elemento input pero en la propiedad type indicamos que se trata de un botón de envío de datos. En la propiedad value indicamos el texto que queremos que aparezca en el botón. Ahora necesitamos una página con un pequeño programa en PHP que procese los datos ingresados en el formulario: <title>captura de datos del form</title> <?php echo "El nombre ingresado es:"; echo $_REQUEST['nombre'];?> Para acceder al dato en PHP se cuenta con un vector llamado $_REQUEST indicando como subíndice el nombre del cuadro de texto que definimos en el formulario (dicho nombre es sensible a mayúsculas y minúsculas) Es común indicar entre comillas simples el subíndice en lugar de comillas dobles (con comillas dobles también funciona)en nuestro problema sólo mostramos por pantalla el valor ingresado en el formulario HTML: echo $_REQUEST['nombre'];

5 En javascript El uso de Javascript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos ingresados. Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que recibirá los datos ingresados por el usuario. Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador, evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web). <script type="text/javascript"> function mostrarseleccionado() if (document.getelementbyid('radio1').checked) alert('no tienes estudios'); if (document.getelementbyid('radio2').checked) alert('tienes estudios primarios'); if (document.getelementbyid('radio3').checked) alert('tienes estudios secundarios'); if (document.getelementbyid('radio4').checked) alert('tienes estudios universitarios'); </script> <form> <input type="radio" id="radio1" name="estudios">sin estudios

6 <input type="radio" id="radio2" name="estudios">primarios <input type="radio" id="radio3" name="estudios">secundarios <input type="radio" id="radio4" name="estudios">universitarios <input type="button" value="mostrar" onclick="mostrarseleccionado()"> Es importante notar que todos los objetos de tipo RADIO tienen definida la propiedad name con el mismo valor (esto permite especificar que queremos que los radios estén relacionados entre si) Luego podemos acceder a cada elemento mediante el método getelementbyid para consultar la propiedad checked: if (document.getelementbyid('radio1').checked) alert('no tienes estudios'); Igual que el checkbox, la propiedad checked retorna true o false, según esté o no seleccionado el control radio. if (document.getelementbyid('radio1').checked) alert('no tienes estudios'); Igual que el checkbox, la propiedad checked retorna true o false, según esté o no seleccionado el control radio. Ejercicios a desarrollar En javascript Confeccionar una página que muestre dos objetos de la clase RADIO solicitando que seleccione si es mayor de 18 años o no. Al presionar un botón mostrar un alert indicando si puede ingresar al sitio o no.

7 En PHP Confeccionar un formulario que solicite la carga de un nombre de persona y su edad, luego mostrar en otra página si es mayor de edad (si la edad es mayor o igual a 18).

Documentos relacionados

Manejo de eventos en JavaScript WEB-TECHNOLOGIES

Manejo de eventos en JavaScript JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Entender el uso de Formularios y Eventos con JavaScript. Visualizar la importancia de delegar el manejo de eventos al