Energía y PHP. Estructura de Formularios

indextop

menuhorizontal.php

Home

Mision

Contactar

Asistencia

Compras

Calculadores_Energeticos

Formacion_OnLine

Acceder

Salir

googleanalytic_codigoseguimiento

indexleftselect

Visitas recibidas 3204

Capítulos publicados

Introducción

Conceptos básicos

¿Qué se puede hacer con PHP?

Una explicación sencilla

Mi primera página con PHP

Algo útil. phpinfo()

Conocimientos básicos de HTML. CSS, tags

Uso de Formularios HTML

Estructuras de Formularios HTML

Uso de código antiguo con nuevas versiones de PHP

¿Y ahora qué?

php.ini. ¿que establece?

Referencia del lenguaje

Sintaxis básica y Separación de Instrucciones

Comentarios que asimila php

Tipos

Introducción y Booleanos

Enteros y de Punto Flotante

Cadenas _ Matrices

Cadenas

Matrices

Ejercicios sobre Cadenas y Arrays

Ejemplos arrays múltiples

Objetos

Recursos Null

Pseudo tipos

Manipulación de Tipos

Constantes

Constantes

Variables

Conceptos básicos y Variables predefinidas

Por editar y publicar

Ámbito de las variables

Variables variables

Variables externas y Predefinidas

Expresiones

Operadores

1a parte

2a_ parte

Estructuras

1a_parte

Ejercicios_1 if_elseif y else. Validando formularios

Ejercicios_2 While..do While.. for..foreach

2a_parte

Ejercicios_3 break continue switch

Ejercicios_4 require include

Funciones

1a_parte

2a_parte

Funciones Matemáticas

Classes

Classes y Objetos

1a_Parte.

2a_Parte.

3a_Parte.

4a_Parte.

5a_Parte.

6a_Parte.

Ejercicios_1 sobre Class

Excepciones

Explicando las Referencias

Cookies - header()

Sesiones

1a parte

2a parte

3a parte

4a parte

5a parte

6a parte

7a parte

8a parte

s8_SessionPage1.php

9a parte

Bases de Datos (43 páginas)

Introducción BD, SQL y MySQL

MySQL

Los primeros pasos en MySQL

Conectado y accediendo a una BD

Realizando y mostrando resultados de una consulta

Registrando datos en una Tabla

Recuperando datos de una Tabla

Ordenando registros de una Tabla

Cálculos con fechas

Trabajando con valores NULL

Coincidencia de patrones

Contar registros

Utilizar más de una tabla

Consultas comunes. Modo batch

php y MySQL

Gestionando Bases de Datos con php.

Tipos de campo mysql

Creando tablas-Insertando campos

Visualizar y modificar estructuras de tablas

Añadir registros a una tabla

Adicionar datos. Formularios

Selección de registros - 1a parte

Selección de registros - 2a parte

Modificación de registros

Borrando registros - 1a parte

Borrando registros - 2a parte

Imágenes en tablas

Tipos de tablas

Otras consultas

Taller BaseDatos.
BD contactos_registros
SESSION Acceder - Registrarse

Objetivos y estructura de la BD

Formulario Registrarse. Validador de datos.

Insertar y validar registros

Formulario y scripts de acceso

Proceso de borrar un registro

Autorizando y limitando el acceso

Consultas para la gestión de la BD

Base de Datos Eficiencia.

Sistemas de refrigeración

PDF

Introducción - primeros pasos

Aplicando formato a la página

Textos, columnas múltiples, Tablas

Temas en producción

Mensajería y Autorespondedores

Gestión ebooks

Entrenamiento, ejercicios

Lista de referencias_utilizadas

(cb_f_estformulario.php) Estructuras de Formularios html

Objetivos

La etiqueta FORM
Envío de datos
La etiqueta method
La etiqueta action
La etiqueta INPUT
Las cajas de texto básicas
Listas de opciones
Listas de botones: radio
Listas de cajas: checkbox.
Botón de envío y reset
Botones
Otros campos del formulario: hidden, image, file
Agrupación de elementos en los formularios

Antes de iniciar el estudio de como PHP recoge y procesa los datos que se envían desde HTML, tenemos que saber primeramente como programamos los formularios en html. Este tema es muy importante y por ello le dedicaré una hoja aparte.

Estudio de Formularios en HTML.

Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas. El lector escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para dirigirla a una dirección URL que se suele re-dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI.

La etiqueta FORM

Los formularios están delimitados con la etiqueta <FORM> ... </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que deben poseer los siguientes atributos:
--METHOD indica cómo se enviarán las respuestas
--"POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario,
--"GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación
--ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo))

Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET"
ACTION="url" ENCTYPE="x-www-form-urlencoded"> ...
</FORM>

Aquí hay algunos ejemplos de las etiquetas FORM:

<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"> </form>
<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi"> </form>
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>

Dentro de la etiqueta FORM
El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio. “get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &. Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www............?nombre1=valor1&nombre2=valor2 El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.

La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD. Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
--La etiqueta INPUT: Todos los botones y casillas de texto
--La etiqueta TEXTAREA: una casilla de texto
--La etiqueta SELECT: una lista de opciones múltiples

Envío de datos
Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del formulario se mandan a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el símbolo de unión ("&"). Por lo tanto, los datos que se envían al script se verán así: campo1=valor1&field2;=valor2&field3;=valor3. Con el método GET (enviar los datos mediante una dirección URL), la URL será una cadena como la siguiente:

http://www.energianow.com/cgi-bin/script.cgi?campo1=valor1&field2;=valor2

La etiqueta method

Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Anteriormente vimos que existen dos valores posibles: get y post y que e l valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio. “get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &. Un ejemplo de un formulario enviado por el method=“get” sería el siguiente:
http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.

Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo se codifican los datos del formulario. Mediante este atributo indicaremos la forma en la que viajará la información. La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype="text/plain"). De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/x-www-form-urlencoded) es el único valor válido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar.

La etiqueta action

El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios. Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera:
<form action=mailto:direcciondelcorreo@correo.com…></form>.
Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc. Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera:
<form action="dirección completa del archivo que la gestionará" ...> </form>.
Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc.

La etiqueta INPUT

La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos “interactivos”. Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas. La sintaxis de esta etiqueta es la siguiente:

<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">

El atributo name es esencial, ya que permite al script CGI reconocer qué campo está asociado con un par nombre/valor, lo que significa que el nombre del campo estará seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningún valor, por el valor predeterminado de la etiqueta value. El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT.

Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características.

Las cajas de texto básicas: <input type= “text”>

La caja de texto básica se escribiría de la siguiente forma:
<input type="text" name="nombredelacaja">
y su apariencia en el navegador sería la siguiente:

Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas. Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cual es el tipo de dato que te piden en ese campo.
name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.Observe el siguiente código:
<input type="text" size="35" maxlength="40" value="Nombre" name="nombre">
Aquí vemos un tipo de caja “text” con un tamaño de 35 y un límite de caracteres de 40. Además, tiene un texto preescrito en él. El resultado sería el siguiente:

Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc. Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto. Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo. Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente:
<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>
Y se vería de la siguiente forma:
Escribe aqui tus comentarios

Textos con passwords.
En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestren los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece. El siguiente código es de un campo con datos codificados:
<input type="password" name="contraseña">
Y este sería el resultado obtenido:

listas de opciones

Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta <selection> y a su cierre. Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el portador energético que consume determinado equipo o herramienta, el código de la lista de selección podría ser el siguiente:

<select name="compresor">
<option>aire</option>
<option>gas natural </option>
<option>gas de conversión </option>
</select>

Y el resultado quedaría de la siguiente manera.

Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren. En la lista anterior si quisiéremos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente:

<select name="compresor" size="2">
<option>aire</option>
<option>gas natural </option>
<option>gas de conversión </option>
</select>

Y veremos la salida siguiente:

También podemos definir si queremos que se pueda elegir más de una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo múltiple. Ver primero cómo quedaría el código.

<select name="compresor" size="2" múltiple> <option>aire</option>
<option>gas natural</option>
<option>gas de conversión</option>
</select>

comprobamos el alcance del atributo:

Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al principio no sea la primera que está en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opción que queramos que aparezca como seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción del gas natural.

<select name="compresor" size="2" múltiple>
<option>aire</option>
<option selected>gas natural</option>
<option>gas de conversión</option>
</select>

Y comprobemos la salida:

Por último esta el atributo value. Este atributo es muy útil para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número o una letra a cada opción. El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo, en la primera lista que hemos presentado podríamos valorar nuestras opciones de la siguiente manera:

<select name="compresor"size="2">
<option value="1">aire</option>
<option selected value="2">gas natural </option>
<option value="3">gas de conversión</option>
</select>

Y el resultado en el navegador:

Y en el supuesto de seleccionar por ejemplo la opción del gas natural, al programa (o al correo electrónico) le llegaría el siguiente dato: compresor=2. Fijarse que compresor es el nombre de esta lista de opciones.

Listas de botones: radio

Esta lista, al igual que las listas de opción, permite que el interprete pueda elegir una opción dentro de las posibles. A continuación vamos a ver como nos quedaría el formulario anterior, pero utilizando botones tipo radio. Estos botones se escriben mediante la etiqueta type=”radio”. Notemos que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera:

<input type="radio" name="compresor" value="1"> aire <br>
<input type="radio" name="compresor" value="2">gas natural <br>
<input type="radio" name="compresor" value="3">gas de conversión
Y la salida se mostraría ahora, diferente:
aire
gas natural
gas de conversion
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción gas de conversión:
<input type="radio" name="compresor" value="1"> aire <br>
<input type="radio" name="compresor" value="2">gas natural <br>
<input type="radio" name="compresor" value="3"checked>gas de conversión
Y ahora en la salida aparece marcado gas de conversión:
aire
gas natural
gas de conversion
Ya hemos realizado una explicación de todas las instrucciones que componen la estructura de un formulario.html. Seguidamente resumiremos las Notas sobre las instrucciones que debemos conocer para enviar el formulario hacia el destino que le hemos prefijado en la etiqueta ACTION.

Botón de envío

Para enviar la información, el formulario necesita de un botón que le indique que el formulario ha concluido y que pueden enviar la información. Los botones de envío se crean con la etiqueta “input” de tipo “submit”. Además, hay que definir el texto que queremos que esté escrito en el botón. Esto lo conseguimos con el atributo “value”. Así, el código de un botón sencillo de formulario sería el siguiente:

<input type="submit" value="Enviar información">
Y la salida en nuestro navegador será igual a:

Botón de resetear la información:reset

Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la información. Para ello es muy útil el botón para borrar la información. El botón se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es “reset” y cambiando el mensaje interno del botón, o sea, el “value”. El ejemplo sencillo de este botón tendría el siguiente código:

<input type="reset" value="Borrar información">
Y la salida en nuestro navegador será igual a:

Botones. La etiqueta BUTTON TYPE
HTML 4.0 ha introducido mejoras en los formularios. Una de las cosas que más han mejorado son los botones. Ahora disponen de una etiqueta propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML, como gráficos o, incluso, tablas enteras.

<BUTTON TYPE="button">
<table width="200" border="2" bordercolor="#D9004B" bgcolor="#F7F7F7" class="manual">
<tr><th>Celda A </th> <th>Celda B </th> </tr>
<tr>td align="center">Celda C </td> td align="center">Celda D </td> </tr>
<tr>td align="right">Celda E </td> td align="left">CeldaF </td> </tr>
</table>
</BUTTON>
Llevemos a la vista código el script anterior y se mostrará a continuación:

Haz clic sobre el y veras su reacción. Este botón puede formar parte de un formulario desde donde se envien datos.
Los parámetros de dicha etiqueta son los normales, TYPE, que podrá tomar los valores SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.

Otros campos del formulario: hidden, image, file

hidden.
El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando al programa de gestión de datos, aparte de los datos enviados por el propio usuario, datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden ser útiles para ayudar al programa en su gestión de los datos del formulario. Lo que hacen es comunicar cierta información al servidor sobre cómo tratar los datos manteniéndose ocultos a la vista de los usuarios. Este tipo de datos ocultos no se muestran en la página, aunque sí pueden ser detectados solicitando el código fuente. El atributo hidden no se llega a usar en páginas escritas en html, sólo en las que empleen también otro tipo de lenguajes. Aquí podemos ver el código de un ejemplo:

<form action="mailto: nombredelcorreo@correo.com " method="post" enctype="text/plain" name="mihidden">
<input type="hidden" name="opcion" value="si">
</form>
Veamos que en el navegador no se muestra este tipo de scripts, pero si aparece en el código fuente: image
El atributo “image” sirve para personalizar un botón. Es decir, este atributo introduce un botón en una imagen, sustituyendo al formato estándar de botones que ya hemos visto en otros artículos del tutorial. La función de los botones creados de esta forma es igual que la de submit, pero nos permite personalizar este elemento. Se utiliza para facilitar el servicio de imagenes, en este caso envio desde el PC del usuario hacia el servidor. Un ejemplo de este tipo de botones sería este:

<form action="mailto:nombredelcorreo@correo.com" method="post" enctype="text/plain" name="image">
<input type="image" name="boton" src="http://www.energianow.com/html/imagenes/ieg.gif" align="middle">
</form>
También un gráfico podría forma parte de un elemento más de envio de información.
<INPUT TYPE="image" SRC="graficos/nav.gif" alt="Elije navegador">
Este elemento se comportará de mismo modo que un botón de tipo SUBMIT, pero añadirá como información en el formulario las coordenadas x e y donde el usuario lo pulsó.
</form>

file
El atributo file permite al usuario subir archivos (upload). Por supuesto necesitaremos un programa que gestione estos archivos mediante un lenguaje diferente al html. Aquí hemos escrito un formulario con este tipo de type (type=“file”) para destacar las diferencias con los otros atributos que habíamos visto hasta ahora.

<form method="post" enctype="multipart/form-data"><br>
<input type=file size=60 name="file1"><br>
<input type=file size=60 name="file2"><br>
<input type=submit value="subir"><br>
</form>
Y la salida en el navegador:

Agrupación de elementos en los formularios. La etiqueta FIELDSET
HTML 4.0 introduce la etiqueta Fieldset, la que nos facilita encerrar diferentes controles en un bloque, sin necesidad de incrustarlos en Tablas o divisiones. Ssi encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor de los mismos. Podemos entonces insertarle un título por medio de la etiqueta LEGEND. Veamos primero el script propuesto y seguido lo llevamos a la vista código y mostramos el resultado en el navegador:

<FIELDSET>
<LEGEND>Prueba de formulario</LEGEND>
<LABEL> El mensaje a enviar <INPUT TYPE="text"> </LABEL>
</FIELDSET>

Prueba de formulario El mensaje a enviar

LEGEND admite como parámetro ALIGN, que indicará en qué lugar se coloca el título. Por defecto es TOP (arriba), pudiendo estar también abajo (BOTTOM), a la izquierda (LEFT) o a la derecha (RIGHT).

googleanalytic_codigoseguimiento