Formularios html

121 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
121
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
8
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Formularios html

  1. 1. FormulariosHemos visto como hacer que el usuario pueda comunicarse con nosotros a través del correoelectrónico, pero aveces quisiéramos que el usuario respondas a ciertas preguntas o nos dé algunos comentarios como en unaencuesta, en este caso usamos los formularios.Lamentablemente está utilidad sólo servirá si la computadora donde ve la página tiene un servicio de correoelectró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 alcorreo 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 enel cuadro, “Tamaño” es el ta maño en caracteres del cuadro de texto y “TamMáximo” es el máximo número decaracteres que puede escribir. Si no usa Size el tamaño por defecto será 20. Al terminar de escribir en el cuadro detexto, 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 sealmacenará 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 elcí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 elinterior 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 pordefecto.
  2. 2. Ejemplo: Crearemos una ficha de datos que el usuario deberá llenar y enviar automáticamente al correoelectró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 &nbspHombre: <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 bspTerminator: <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.
  3. 3. Si escribe Multiple el usuario podrá elegir más de una opción. La “Especificación de opciones” contiene la lista deelementos 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 correoelectró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><FORM ACTION="mailto:escm.instructor@gmail.com" METHOD="post" ENCTYPE="Text/Plain">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>
  4. 4. 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ónen 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><FORM ACTION="mailto:escm.instructor@gmail.com" METHOD="post" ENCTYPE="Text/Plain">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>

×