20 - Formulario - iframes

El HTML dispone de un elemento llamado iframe que permite disponer un frame con el flujo de la página, similar a disponer una imagen en la página.

Veamos un ejemplo como disponer este tipo de frame tan particular (este tipo de elemento iframe es el único apoyado en las versiones modernas de HTML):

pagina1.html

<!DOCTYPE html>
<html>
    <head>
        <title>prueba de iframes</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Esto es una prueba de un iframe</h1>
        <iframe src="pagina2.html" width="400" height="200">
        No tiene disponible el navegador la capacidad de iframe
        </iframe>
        <h2>Esto ya está fuera del iframe</h2>
    </body>
</html> 

Como podemos ver cuando necesitamos agregar el iframe dentro de la página disponemos:

<iframe src="pagina2.html" width="400" height="200">
    No tiene disponible el navegador la capacidad de iframe
</iframe> 

Le indicamos el ancho y alto que debe tomar el iframe, la ubicación continúa el flujo de la página.

La página que muestra el iframe no introduce ningún concepto nuevo:

<!DOCTYPE html>
<html>
    <head>
        <title>prueba de iframes</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
        <h2>Este texto está dentro del iframe.</h2>
    </body>
</html>
 

El resultado de visualizar «pagina1.html» en el navegador es:

formulario iframes html

Algunas propiedades útiles aplicables a un iframe:

  • src Archivo a mostrar dentro del iframe.
  • width Ancho en píxeles.
  • height Alto en píxeles.
  • frameborder Podemos asignarle los valores 1 o 0.
  • scrolling Los valores posibles de esta propiedad son: «auto»,»yes»,»no».
  • name Nombre del iframe si queremos acceder desde otra página.