DISEÑO DE PAGINAS WEB

TEMA: TABLAS Y FORMULARIOS

TABLAS

Una tabla es una estructura de líneas que se diseña para contener valores y presentarlos
de forma ordenada, es comúnmente conocida y se ejemplifica como se muestra a
continuación.

Nombres Apellidos Salarios

Juan Pérez $200.00
Pedro Hernández $250.00

En html las tablas se diseñan con el uso de la etiqueta <table></table> como estructura
general, pero también dentro de las tablas existen elementos como las filas y columnas.
FILAS Y COLUMNAS DENTRO DE LA TABLA
Para crear una nueva fila dentro de una tabla se usa la etiqueta <tr>…</tr>, aunque
el código este bien escrito no se verá nada aún en el navegador, para formar bien la
estructura de la tabla se necesita que dentro de la fila se inserte una columna, almenos
para formar la primera celda… La etiqueta para insertar una columna es <td>…</td>,
entonces una tabla con una celda sería:

CODIGO VISUALIZACION

En donde border es la propiedad para establecer el ancho del borde, de no

escribirlo, el borde será invisible.
ENCABEZADOS Y CUERPO DE UNA TABLA
Para escribir un encabezado a una tabla se usarán las etiquetas
<th>Encabezado</th>, se usará esta etiqueta como si fuese <td>y para definir el
cuerpo de una tabla se usa la etiqueta <tbody> contenido </tbody>, nótese en el
código el uso de las etiquetas <caption></caption>, éstas se usan para establecer un título a la
tabla.

CODIGO VISUALIZACION
USO DE COLSPAN Y ROWSPAN
VISUALIZACION DE EJEMPLO
TEMA: FORMULARIOS
Resultados de aprendizaje

Conocer los controles html para el diseño de formularios web.

 ¿Qué es un formulario?

Un formulario es un documento, ya sea físico o digital, diseñado para que el

usuario introduzca datos estructurados (nombres, apellidos, dirección, etc)
en las zonas correspondientes, para ser almacenados y procesados
posteriormente.
TEMA: Formularios

En una página web, un formulario es el mecanismo por el cual el usuario

del navegador puede ingresar cierta información al sitio web, en otras
palabras es el medio que posee una página web para solicitar
información al usuario

Un formulario en html se crea utilizando las etiquetas <form></form> y

también posee ciertos atributos, los cuales se presentan a
continuación:

El atributo action que es en donde se define la ruta del archivo que va a

procesar los datos del formulario y el atributo method que es el que
establece el método de envío de los datos, pudiendo ser dos: GET, POST
a) GET: Éste método de envío muestra el contenido a enviar por la url,
esto denota una desventaja ya que por cuestiones de seguridad no se
deberían enviar datos como correos, contraseñas, etc. por url.
b) POST: Este método es más seguro ya que no muestra contenido del
formulario por url cuando se envía.

Una página web puede solicitar al usuario diversidad de información, y para ello
puede ser solicitada por diversos controles, entre ellos se puede mencionar:
cajas de texto, cajas de texto para contraseñas, radio buttons, checkbox, selects, etc.

Cabe mencionar que todos estos controles se ubican dentro de las etiquetas <form>
aquí ...</form> ya que si no se encuentran dentro, la información de ese control que
queda fuera no se enviará.

A continuación se presentan algunos controles que se pueden utilizar dentro de los

formularios:
ETIQUETAS PARA CONTROLES INPUT

Los controles input se usan para recibir información por parte del usuario,
su definición generalizada se codifica así:

<input type=' ' name=' ' value=' '>

type= Indica el tipo de control a utilizar, donde este puede ser:

Checkbox:

Las casillas de elección pueden adoptar uno de dos estados: checked

(seleccionado) o unchecked (no seleccionado). Cuandola casilla es
seleccionada, el par nombre/valor se envía a la ruta especificada dentro
del atributo action.
hidden:

Este campo, que el navegador no se muestra, es para definir una

configuración única que se enviará al archivo de almacenamiento.

File:
Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo
que se enviará con el formulario. Para poder hacer una transferencia de archivos
simplemente tenemos que poner el atributo enctype con el valor "multipart/form-data",
de esta manera le estamos especificando que enviaremos cualquier tipo de archivo.
Password:

Una casilla de texto donde los caracteres escritos aparecen como asteriscos
para camuflar el texto de entrada.

Radio:

Un botón que permite al usuario elegir entre varias opciones.

Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor
del botón radio seleccionado se enviará al CGI. Al aplicar el atributo checked para
uno de estos botones se definirá como seleccionado de forma predeterminada.
Reset:

Un botón de restauración para quitar todos los elementos

en el formulario y restablecer sus valores predeterminados.

Submit:

Un botón de envío para enviar el formulario. El texto

en el botón puede definirse usando el atributo value.

Text:

Una casilla de texto para escribir una

línea de texto. El tamaño de la casilla puede definirse usando el
atributo size y la extensión máxima del texto con el atributo
maxlength.
Textarea: textarea se usa para definir un cuadro de texto más grande que
la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los
siguientes atributos:

cols: representa el número de caracteres que puede contener un línea

rows: representa el número de líneas

name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par
nombre/valor.

readonly: impide que el usuario modifique el texto predeterminado

en el campo

value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el
cuadro de texto

Ejemplo de Textarea
La etiqueta <select> ... </select> sirve para crear una lista desplegable de elementos
(especificados por las etiquetas <option>...</option> dentro de ella).
Los atributos de esta etiqueta <select> son:

name: representa el nombre asociado con la casilla de texto, que permite su

identificación en el par nombre/valor.

disabled: crea un lista desactivada, que aparece atenuada

size: representa el número de líneas de la lista (este valor puede ser

más grande que el número de elementos reales de la lista).

multiple: Permite al usuario seleccionar varios campos de la lista

Ejemplo de Select