Scribd
Cargar
38 vistas

Formularios HTML

El documento explica cómo crear formularios HTML. Detalla las etiquetas y atributos básicos como <form>, <input>, <select>, <textarea> y <button> que permiten agregar diferentes tipos de campos de entrada de datos como texto, contraseñas, opciones de selección múltiple, áreas de texto y botones. También cubre etiquetas adicionales como <label> para asociar texto a campos y <fieldset> para agrupar elementos visualmente dentro de un formulario.

Cargado por

Diego Alexis Rivas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
38 vistas

Formularios HTML

El documento explica cómo crear formularios HTML. Detalla las etiquetas y atributos básicos como <form>, <input>, <select>, <textarea> y <button> que permiten agregar diferentes tipos de campos de entrada de datos como texto, contraseñas, opciones de selección múltiple, áreas de texto y botones. También cubre etiquetas adicionales como <label> para asociar texto a campos y <fieldset> para agrupar elementos visualmente dentro de un formulario.

Cargado por

Diego Alexis Rivas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Tema: Creación de Formularios HTML

1.- Introducción
La Web se ha convertido en una poderosa herramienta para las empresas que se dedican
a realizar encuestas. En la actualidad es muy común acceder a páginas que nos ofrecen
la información o el servicio demandado, siempre que el “navegante” proporcione cierta
información: p.e. datos personales (¡ojo con la privacidad!), gustos, preferencias, o
simplemente la opinión sobre alguna cuestión puntual (los diarios online suelen realizar
encuestas sobre temas de actualidad). Con este propósito los formularios han sido una
de las herramientas que han ayudado a este auge.

En este capítulo trataremos de describir el modo de realizar formularios HTML, en el


supuesto de que el lector no está familiarizado con este lenguaje. Para ello, definiremos
las cuestiones básicas del lenguaje, a medida que se necesiten ciertos conceptos.
Además, acompañaremos estos conceptos con ejemplos en lenguaje HTML, con idea de
que el lector copie el código en un fichero, que grabado con extensión html (o htm) le
permita visualizar en qué consiste la orden descrita.

Como cuestión previa diremos que el lenguaje se compone de un conjunto de sentencias


denominadas “tags” que permiten delimitar zonas de la página web en las que el
“programador” define una acción. Por ejemplo, si quisiéramos poner en negrita una
zona del texto, escribiríamos:

<b>texto en negrita</b>

Los tags a que nos referimos son <b> y </b> y es inmediato observar que el primero
define el comienzo de la acción y el segundo dónde finaliza la misma. En el caso de un
formulario, los tags que lo especifican son:

<form>.....</form>

y dentro de ellas se recogerán todas las variables de entrada.

Los formularios nos van a permitir, desde dentro de una presentación web, solicitar
información al visitante. La información que se solicita es de tipos diversos (p.e.
escribir el nombre, marcar una casilla si está casado, seleccionar la marca de su vehículo
dentro de una lista, etc.), y por tanto habrá distintas opciones, atributos y modificadores
que permitan definir todos esos tipos. De este modo, a la tag de apertura <form> le
acompañarán estos atributos:

action="" Entre comillas se indica el programa que va a tratar las variables enviadas con
el formulario, un guión CGI o la URL mailto.
Method="" Indica el método de transferencia de las variables. Post, si se envía a través
del STDIO. Get, si se envía a través de la URL.

A continuación mostramos un ejemplo:


<HTML>
<HEAD>
<TITLE>Ejemplo 1 de formulario</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">


<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

El resultado es:

2.- Comandos básicos


Los diversos campos de entrada de datos en los formularios estándar son:

<INPUT>

La tag <input> define la introducción de variables. Junto a esta tag encontraremos los
siguientes atributos:

type="" Indicará el tipo de variable a introducir.


text Indica que el campo a introducir será un texto. Sus atributos:
maxlenght="" Seguido de un valor que limitará el número máximo de carácteres a
introducir en ese campo.
size="" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla.
value="" Indica que no hay valor inicial del campo.
Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos
en lugar de letras escritas. Sus atributos serán los mismos que para text.
Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada.
value="" Entre comillas se indicará el valor de la casilla.
checked La casilla aparecerá marcada por defecto.
Radio El campo se elegirá marcando de entre varias opciones una casilla circular.
value="" Entre comillas se indicará el valor de la casilla.
Image El campo contendrá el valor en coordenadas del punto de la imagen que haya
pinchado. Atributo obligatorio:
src="" Entre comillas escribiremos el nombre del archivo de imagen.
hidden El visitante no puede modificar su valor ya que no está visible. Se manda
siempre junto al atributo value= seguido de su valor entre comillas.
Name="" Indicará el nombre que se asigna a un determinado campo.

<HTML>
<HEAD>
<TITLE>Ejemplo 2 de formularios</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">


Texto: <INPUT TYPE="text" NAME="nombre"><BR>
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche

<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

El resultado es:
<SELECT>

Las tags <select>.....</select> encierran los valores que podremos elegir a partir de una
lista. Los atributos que acompañan a la tag de apertura son:

name="" Indicará el nombre del campo de selección.


Size="" Indicará el número de opciones visibles. Si le asignamos 1, la selección se
presentará como un menú desplegable. Si le asignamos un valor mayor se presentará
como una lista con barra de desplazamiento.
multiple Indica si se pueden realizar multiples selecciones.
Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede
acompañarse del atributo selected para indicar cual es la opción que aparecerá por
defecto. Si no lo especificamos, siempre será la primera de la lista.

<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">


<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Se obtiene la página siguiente:


<TEXTAREA>

Con las tags <textarea>;.....</textarea> definimos un texto de múltiples líneas para que
el visitante pueda incluir un comentario junto a sus datos.

Junto a la tag de apertura pueden aparecer los siguientes atributos:

name="" Nombre del campo.


Cols="" Numero de columnas de texto visible.
Rows="" Numero de filas de texto visible.

<HTML>
<HEAD>
<TITLE>Ejemplo 4</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">


<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Con este código se obtiene:


<BUTTON>

A partir de la implementación de los estándares HTML 4.0 contamos con varias


etiquetas nuevas para construir formularios, siendo BUTTON una de ellas, de bastante
utilidad, aunque no compatible con algunas versiones de Nestcape. Las tags
<BUTTON>...</BUTTON> proporcionan un método único para la implementación de
cualquier tipo de botón de formulario. Sus principales atributos son:

type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto), reset y
button.
name= " nombre ", que asigna un nombre identificador único al botón.
value= " texto ", que define el texto que va a aparecer en el botón.

La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir
dentro de ellas cualquier elemento de HTML, como imágenes y tablas.

<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST" ENCTYPE="text/plain"
name="miform">

<BUTTON name="boton_1" type="button">


<TABLE width="10" cellspacing="0" cellpadding="2" border="1">
<TR>
<TD>uno</TD>
<TD>dos</TD>
</TR>
<TR>
<TD>tres</TD>
<TD>cuatro</TD>
</TR>
</TABLE>
</BUTTON>
</FORM>
</BODY>
</HTML>

Con lo que se obtiene:

En el ejemplo siguiente se habrá de incluir una imagen de nombre “pajaro.gif”a la


carpeta imagenes:

<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST" ENCTYPE="text/plain"
name="miform">

<BUTTON name="boton_1" type="button">


<IMG src="imagenes/pajaro.gif" width="75" height="30" border="0" alt="enviar">
</BUTTON>
</FORM>
</BODY>
</HTML>

<LABEL>

Hasta hora, el texto que acompañaba a los campos de entrada no estaba asociado a los
mismos de ninguna manera. Así, por ejemplo, si pulsamos en el texto que acompañaba a
un control de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos la etiqueta
LABEL, el control cambiara de estado (disponible en versiones superiores de
Netscape).

<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST" ENCTYPE="text/plain"
name="miform">

<LABEL>
<INPUT type="checkbox" name="correo">
deseo que me envíen correo
</LABEL>
</FORM>
</BODY>
</HTML>

<FIELDSET>

Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios


controles, a menos que usemos elementos que no son del formulario, como tablas o
imágenes. Si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se
mostrara un rectángulo alrededor de los mismos.

Podemos indicar un título por medio de la etiqueta LEGEND, que admite el parámetro
align="left / center / right / top /bottom", lo que nos permite alinear el título horizontal y
verticalmente. Además, deberemos introducir el conjunto en una celda de tabla con un
ancho determinado, ya que de no hacerlo así el recuadro abarcará todo el ancho de
pantalla disponible.

<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST" ENCTYPE="text/plain"
name="miform">
<TABLE width="200">
<TR>
<TD>
<FIELDSET>
<LEGEND align="left"><font color="red">Caja de texto</font></LEGEND>
pon tu nombre:
<INPUT type="text" size="15">
</FIELDSET>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

También podría gustarte