Formularios html

Formularios
Hemos visto como hacer que el usuario pueda comunicarse con nosotros a través del correoelectrónico, pero a
veces quisiéramos que el usuario respondas a ciertas preguntas o nos dé algunos comentarios como en una
encuesta, en este caso usamos los formularios.
Lamentablemente está utilidad sólo servirá si la computadora donde ve la página tiene un servicio de correo
electrónico proporcionado por algún proveedor de Internet. Si ese no es el caso entonces esta u tilidad no servirá
para nada y no se podrá enviar ningún dato.

Estructura general de un formulario que envié los datos a un correo electrónico: Por ejemplo enviemos los da tos al
correo del Profe:

<FORM ACTION=“mailto:escm.instructor@gmail..com”METHOD=“post”ENCTYPE=“text/plain”>
Cuerpo del formulario
Botones de envío y borrado.
</FORM>

El cuerpo del formulario esta formado por tres clase de en trada que son:
“Input”, “Tex tarea” o “Select”
Los botones de opción son entradas del tipo “Input”

Describamos estos elementos:

Input: Crea un cuadro de texto, una casilla de verificación, un círculo de opción o un botón.

<INPUT Type =“Text” Name=“Nombre” Value=“Valor” Size=“Tamaño” MaxLenght=“TamMáximo”>
Crea un cuadro de texto. El “Nombre” identifica al cuadro de texto, “Valor” es el texto por defecto que aparece en
el cuadro, “Tamaño” es el ta maño en caracteres del cuadro de texto y “TamMáximo” es el máximo número de
caracteres que puede escribir. Si no usa Size el tamaño por defecto será 20. Al terminar de escribir en el cuadro de
texto, este texto es almacenado en la variable “Nombre”, la cual será enviada al correo electrónico.

<INPUT Type =“Password” Name=“Nombre” Value=“Valor” Size=“Tamaño” MaxLenght=“TamMáximo”>
En lugar de letras aparecerán asteriscos en el cuadro de texto.

<INPUT Type =“Hidden” Name=“Nombre” Value=“Valor” Size=“Tamaño” MaxLenght=“TamMáximo”>
Ni siquiera aparecerá lo que escriba.

<INPUT Type =“Checkbox” Name=“Nombre” Value=“Valor” Checked>
Crea una casilla de verificación, que el usuario puede activarla o desactivarla con un clic. “Valor” es el da to que se
almacenará en la variable “Nombre” cuando la casilla es activada. Si escribe Checked la casilla aparece activada .

<INPUT Type =“Radio” Name=“Nombre” Value=“Valor” Checked>
Crea un círculo pequeño de opción, que el usuario puede activar o desactivar con un clic. Si escribe Checked el
círculo aparece activado.

<INPUT Type =“Submit” Name=“Nombre” Value=“Valor”>
Crea un botón que provoca el envío del formulario al correo electrónico. “Valor” es el texto que aparece en el
interior del botón.

<INPUT Type =“Reset” Name=“Nombre” Value=“Valor”>
Crea un botón que provoca el borrado de todos los da tos ingresados al formulario, regresando todo a su forma por
defecto.

Ejemplo: Crearemos una ficha de datos que el usuario deberá llenar y enviar automáticamente al correo
electrónico del Profesor Cruz:

<HTML>
<HEAD>
<TITLE>Ejemplo Formulario</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Ficha de datos</H1>
<FORM ACTION="mailto:escm.instructor@gmail.com" METHOD="post" ENCTYPE="Text/Plain">
Nombre:
<INPUT Type="Text" Name="Nombre" MaxLenght=15><P>
Primer Apellido:
<INPUT Type="Text" Name="Primer Apellido" MaxLenght=15>
Segundo Apellido:
<INPUT Type="Text" Name="Segundo Apellido" MaxLenght=15><P>
Domicilio:
<INPUT Type="Text" Name="Domicilio" Size=40 MaxLenght=30><P>
Sexo: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
Hombre: <INPUT Type="Radio" Name="Sexo" Value="Hombre">
Mujer: <INPUT Type="Radio" Name="Sexo" Value="Mujer"><P>
Película favorita: &nbsp &n bsp &n bsp &n bsp &n bsp &n bsp
Terminator: <INPUT Type="Checkbox" Name="Terminator" Value="Si">
El Barco Fantasma: <INPUT Type="Checkbox" Name="El Barco Fantasma" Value="Si">
Robocop: <INPUT Type="Checkbox" Name="Robocop" Value="Si"><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>

Select: Crea una lista desplegable desde la cual podemos escoger una o más opciones.

<SELECT Name=“Nombre” size=“Tamaño” Multiple>
Especificación de opciones
</SELECT>
El “Nombre” identifica a la lista desplegable, el “Ta maño” determina la altura inicial de la lista en líneas de texto.

Si escribe Multiple el usuario podrá elegir más de una opción. La “Especificación de opciones” contiene la lista de
elementos que aparecen en la lista y tiene la siguiente estructura:

<OPTION Value=“Valor” Selected>Descripción</OPTION>
“Valor” es el da to que se almacenará en “Nombre” cuando se seleccione esta opción y será enviada al correo
electrónico. Si escribe Selected está opción aparece seleccionada por defecto.

Ejemplo: Crearemos un menú a la carta de un restaurante, donde el usuario escogerá lo que desea y lo enviará
automáticamente al Correo del Profesor:.

<HTML>
<HEAD>
<TITLE>E jemplo 23</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Restaurante Limeño "El Paisano"</H1>
Entrada (elija solo uno):<BR>
<SELECT Name="Entrada" size=1>
<OPTION Value="Ninguna">Ninguna</OPTION>
<OPTION Value="Cebiche">Cebiche</OPTION>
<OPTION Value="Ocopa">Ocopa</OPTION>
<OPTION Value="Leche de tigre">Leche de tigre</OPTION>
<OPTION Value="Papa a la huancaína">Papa a la huancaína</OPTION>
<OPTION Value="Sopa del día">Sopa del día</OPTION>
</SELECT><P>
Segundo (puede elegir más de uno):<BR>
<SELECT Name="Segundo" size=4 Multiple>
<OPTION Value="Ninguno">Ninguno</OPTION>
<OPTION Value="Adobo de chancho">Adobo de chancho</OPTION>
<OPTION Value="Arroz chaufa">Arroz chaufa</OPTION>
<OPTION Value="Arroz con pato">Arroz con pato</OPTION>
<OPTION Value="Bistec con papas">Bistec con papas</OPTION>
<OPTION Value="Chicharrón de pescado">Chicharrón de pescado</OPTION>
<OPTION Value="Lomo saltado">Lomo saltado</OPTION>
<OPTION Value="Tallarin saltado">Tallarín saltado</OPTION>
</SELECT><P>
Refresco (elija solo uno):<BR>
<SELECT Name="Refresco" size=1>
<OPTION Value="Ninguna">Ninguna</OPTION>
<OPTION Value="Inca Kola">Inca Kola</OPTION>
<OPTION Value="Mansanilla">Mansanilla</OPTION>
<OPTION Value="Refresco de maca">Refresco de maca</OPTION>
<OPTION Value="Refresco de uña de gato" Selected>Refresco de uña de gato</OPTION>
</SELECT><P>
<INPUT Type="Submit" Value="Enviar datos"> <INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>

TextArea: Crea un cuadro donde el usuario puede escribir un tex to tan largo como desee.

<TEXTAREA Name=“Nombre” Cols=“Columnas” Rows=“Filas” Wrap=“Valor”>
Texto que aparece por defec to (si desea puede dejarlo en blanco)

</TEXTAREA>
El “Nombre” identifica al cuadro, “Columnas” determina el ancho del cuadro,
“Filas” determina la altura del cuadro. Cuando “Valor” es igual a “off” el usuario
tendrá que presionar ENTER para cambiar de línea en cambio si “Valor” es igual
a “virtual” el cambio de línea es automá tico, por defecto es “virtual”.

Ejemplo: Crearemos una página donde el usuario escribirá un comentario u opinión acerca de “La contaminación
en nuestro planeta Júpiter” y lo enviará automá ticamente al correo del Profe Cruz:

<HTML>
<HEAD>
<TITLE>E jemplo TextArea</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Cuidemos Nuestro Planeta</H1>
Mi opinión respecto a la contaminación es:<P>
<TEXTAREA Name="Opinión" Cols=30 Rows=5>
No olvides firmar tu comen tario.
</TEXTAREA><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>

Formularios html

Recomendados

Recomendados

Más contenido relacionado

Similar a Formularios html

Similar a Formularios html (20)

Último

Último (20)

Formularios html