Hola a tod@s,

Hoy continuamos nuestro curso, que dejamos la semana pasada con su segunda entrega Desarrollo Web con PHP y MySQL (II), donde empezamos a ver la sintaxis de PHP así también como los conceptos de lenguaje de programación, sintaxis, variable, constante y función.

Hoy continuaremos con los formularios HTML.

Antes de adentrarnos a explicar con detalle los formularios HTML, vamos a repasar muy rápidamente que es el lenguaje HTML.

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares “< y >”.

Historia del HTML

Primeras especificaciones

La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos que incluyen el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.

Marcado HTML

HTML consta de varios componentes vitales, entre ellos los elementos o TAGS  y sus atributos, tipos de data y la declaración de tipo de documento.

Elementos

Los elementos o tags son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre,
(por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas,
(por ejemplo <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre.

Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual «=» y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML. De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img).

Ejemplo básico de HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Al acabar de escribir el fichero con el código HTML, debemos ponerle la extensión  “.HTML” en su nombre.

Este es un ejemplo básico de código de página HTML 4:

Para más información sobre etiquetas, visitad esta página Etiquetas HTML/XHTML.

Ahora continuando la numeración de nuestro curso, pasamos al punto 5.

5. Formularios HTML

5.1 Declaración

La declaración de los formularios con HTML se realiza de la siguiente manera:

Se usan las etiquetas de apertura y cierre <FORM…> y </FORM> (Los puntos suspensivos de la etiqueta de entrada, significan que esta parte puede llevar atributos).

A la etiqueta de apertura le pueden acompañar los siguientes atributos:

  • ACTION=” “ (Entre comillas dobles, se indica la dirección que tratará los datos que se envían. En nuestro caso la página .PHP)
  • METHOD=” “ (Indica el método de transferencia de los datos, que pueden ser del tipo GET o POST)

5.2 Campos de entrada

Etiqueta INPUT

Se usan las etiquetas de tipo INPUT para introducir datos en el formulario y define la introducción de variables.

La etiqueta se escribe así: <INPUT…> (Recordad que los puntos suspensivos de la etiqueta, significan que esta parte puede llevar atributos).

Esta etiqueta puede contener los siguientes atributos:

  • TYPE=” “ (Puede ser de tipo TEXT(texto) o PASSWORD(si es una contraseña)).

A demás tanto TEXT como PASSWORD pueden tener diferentes atributos como:

  • MAXLENGHT=” “ (Número que limita el número de caracteres a introducir)
  • SIZE=” ” (Número que limita la longitud donde introducimos un TEXT o un PASSWORD)

El atributo TYPE, no solamente pueden ser del tipo TEXT o PASSWORD, también encontramos:

  • CHECKBOX (Casillas cuadradas de selección)
  • RADIO (Es un CHECKBOX pero con casillas circulares)

Estos TYPE pueden ir acompañados de estos atributos:

  • VALUE=” “ (Indica el valor de la casilla)
  • CHECKED=” “ (La casilla es marcada por defecto)

Otro atributo de la etiqueta INPUT a parte de TYPE, es:

  • NAME=” “ (Es el nombre que le damos al objeto INPUT)

Ejemplo 1:

Ejecución del ejemplo 1 On-Line:

Calle:
Tipo de calle:Avenida Paseo

Etiqueta SELECT

Es una etiqueta que contiene los valores que podemos elegir de una lista.

Su etiqueta o tag es: <SELECT…> y </SELECT>(Recordad que los puntos suspensivos de la etiqueta, significan que esta parte puede llevar atributos).

En la etiqueta de apertura le pueden acompañar los siguientes atributos:

  • NAME=” “ (Indica el nombre de la lista)
  • SIZE=” “ (Da opciones de visualización de la lista. Si ponemos “1”, es un menú desplegable, si es más de “1”, por ejemplo “3”, será una lista con barras de desplazamiento)
  • MULTIPLE (Indica que podemos realizar múltiples selecciones de elementos de la lista)

Las diferentes opciones o elementos de las listas, se especifican con la etiqueta o tag <OPTION VALUE=” “>

Ejemplo 2:

Ejecución del ejemplo 2 On-Line:

Para seleccionar más de una opción de la lista(ya que esta lista tiene el atributo MULTIPLE), se ha de mantener apretada la tecla CTRL (Windows y Linux) o CMD (MacOS) del teclado mientras se selecciona los elementos de la lista.

Color de la fachada: (SIZE=”3″ y MULTIPLE)
Color de la fachada: (SIZE=”1″)

Como crear un botón de “Enviar” o un “Reset”

Para crear un botón “Enviar” se debe crear de la siguiente forma:

Para crear un botón “Reset“:

 

5.3 Procesado de formularios en PHP

El lenguaje PHP nos proporciona una manera sencilla de utilizar formularios, permitiéndonos procesar la información que el usuario ha introducido en el formulario.

Al diseñar un formulario en un HTML hemos de indicar:

  • La página PHP que procesará el formulario (FORM ACTION=”escribir aquí la página“)
  • El método con el cual pasaremos la información a la página (METHOD=”GET/POST“)

Método GET y POST

Son los métodos que nos permiten procesar la información. La diferencia entre los dos métodos radica en la manera de enviar la información:

  • GET: Envía los datos mediante la URL, es decir, a través del navegador se puede ver la información que enviamos. Se utiliza para enviar pequeñas cantidades de información.
  • POST: Envía los datos a través de la librería stdio.h de C. Se utiliza para enviar gran cantidad de datos o para cuando nos interesa que no se vea la información a través del navegador (más seguridad como en el envío de login, datos personales, passwords, etc.)

Ejemplo 3: Envía y Procesa

Ahora vamos a realizar un ejemplo donde vamos a realizar una página HTML que incluirá un formulario que envíe un dato a una página PHP el cual lo procesará para mostrarlo por pantalla.

Página HTML de envío de datos:

Página PHP de procesado de datos:

Como podéis ver, con la variable $_GET[‘calle’] capturamos el valor que habíamos introducido en el campo de texto en la página HTML de envío de datos, ya que este objeto, el atributo NAME=”calle”.

Con este ejemplo, no es muy complicado llegar a la conclusión de que podemos acceder al valor que contiene cada objeto de un formulario a través del método y su nombre.

Si en vez de GET, utilizamos el método POST, sería: $_POST[‘calle’]. Y realizaría la misma función, pero como hemos comentado antes, no se vería por la URL del navegador, ya que es un método más seguro.

Aquí os dejo una captura de pantalla con las dos páginas:

Página HTML de envío de datos:

Página PHP de procesamiento de datos:

Si queréis probar como funciona, podéis descargaros los archivos (¡OS RECOMIENDO ESCRIBIR VOSOTROS MISMOS EL CÓDIGO!) desde aquí: envia.html y procesa.php

Si pulsáis encima, se os abre la página en vez de iniciarse la descarga, debéis pulsar con el botón derecho del ratón sobre cada enlace y seleccionar “Guardar enlace como…” para descargar los archivos.

Después de descargarlos, solo debéis poner los 2 archivos dentro de la carpeta “www“, y dirigiros a “Web Local” del menú contextual del icono de la barra de tareas de easyPHP y seleccionar el archivo envia.html.

Hasta aquí esta parte del curso Desarrollo Web con PHP y MySQL. La semana próxima nos adentramos en el trabajo con números en la programación PHP (tipos, operadores, formatos y números aleatorios).

Hasta entonces un saludo a tod@s y no os olvidéis dejar vuestros comentarios.

Info | Wikipédia

Curso | Desarrollo Web con PHP y MySQL