NUEVOS CONCEPTOS Y ETIQUETAS DE HTML(5)
Bienvenidos a todos una semana más. Hoy os mostraré más recursos que podéis emplear en vuestras páginas web creadas con HTML. Al igual que en la entrada anterior, he resumido los contenidos más importantes para que se pueda entender bien y no sea un post excesivamente extenso.
Sin más dilación, comencemos...
FORMULARIOS
Los formularios permiten que los demás nos envíen la información directamente a nosotros, es decir, a nuestro correo electrónico.
La estructura general de un formulario es:
- Etiqueta de inicio:
- Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
- Botones de envío y de borrado.
- Etiqueta de cierre </FORM>
1. Etiqueta de inicio:
- El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por email a la dirección indicada.
- El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de email, nada más pulsar el usuario el botón de envío.
- Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.
2. Introducción de texto:
La etiqueta común a las diferentes formas de introducir texto es la siguiente:
En donde:
xxx es la palabra que indica el tipo de introducción.
yyy es el nombre que le asignamos nosotros a la variable de introducción del dato.
zzz es la palabra asociada a un elemento.
Hay 3 formas diferentes de introducir texto:
- Introducción por medio de texto
- Introducción por medio de menús
- Introducción por medio de botones
Introducción por medio de texto (una línea):
En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no procede en este caso.
Vamos a poner un ejemplo en el que solicitamos el apellido del usuario:
<FORM ACTION="mailto:dirección de email" METHOD="POST" <ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el botón de envío (que veremos más adelante), recibiremos un email suyo con el siguiente texto:
Apellido=Ruiz
Introducción por medio de texto (varias líneas) :
Esto se consigue con la etiqueta de inicio:
<TEXTAREA NAME="yyy" ROWS="número" COLS="número">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el número de filas, y COLS el de columnas).
Introducción por medio de texto (varias líneas) :
Esto se consigue con la etiqueta de inicio:
<TEXTAREA NAME="yyy" ROWS="número" COLS="número">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el número de filas, y COLS el de columnas).
La de cierre: </TEXTAREA>
Este ejemplo es un formulario que solicita los comentarios del usuario:
<FORM ACTION="mailto:dirección de email" METHOD="POST"
Este ejemplo es un formulario que solicita los comentarios del usuario:
<FORM ACTION="mailto:dirección de email" METHOD="POST"
<ENCTYPE="TEXT/PLAIN">
Introduce tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>
Introduce tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>
Introducción por medio de menús:
Se usa si queremos que el usuario escoja entre varias opciones que le presentamos nosotros.
Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre </SELECT>.
Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.
En el siguiente ejemplo, pedimos al usuario que elija su color preferido:
<FORM ACTION="mailto:dirección de email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
¿Cuál es tu color preferido?
<BR><SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>
Se usa si queremos que el usuario escoja entre varias opciones que le presentamos nosotros.
Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre </SELECT>.
Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.
En el siguiente ejemplo, pedimos al usuario que elija su color preferido:
<FORM ACTION="mailto:dirección de email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
¿Cuál es tu color preferido?
<BR><SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>
Formulario de confirmación:
<INPUT TYPE="checkbox" NAME="yyy">
En este ejemplo solicitamos al usuario que confirme su inclusión en una lista de correo:
<FORM ACTION="mailto:dirección de email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
<INPUT TYPE="checkbox" NAME="Lista">
Sí, deseo ser incluido en la lista de correo.
</FORM>
Botones de radio:
Cuando queremos que el usuario elija una única opción entre varias, podemos hace uso de los botones de radio, que se consiguen con la etiqueta:
<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">
Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es el nombre de cada una de las opciones en concreto.
En el siguiente ejemplo solicitamos al usuario que defina cuál es su sistema operativo preferido:
<FORM ACTION="mailto:dirección de email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
¿Cuál es tu sistema operativo preferido?
<BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix
</FORM>
Botones de envío y de borrado:
Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en cualquier formulario, y es el botón de envío de los datos, que se consigue con la etiqueta:
<INPUT TYPE="submit" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botón.
Vamos a añadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario:
<FORM ACTION="mailto:dirección de email" METHOD="POST" <ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
Otro botón interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de envío, pues se consigue con la etiqueta:
<INPUT TYPE="reset" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botón.
Ejemplo:
<P><INPUT TYPE="reset" VALUE="Borrar datos">
3.Ejemplo práctico:
<P><CENTER>
<H2>Libro de visitas</H2>
<P><FORM ACTION="mailto: tudirecciondeemail@gmail.com" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
<P>
<HR>
GIF´S ANIMADOS
En cuanto a los GIF's animados, hay varias formas de hacerlo. Si quieres crear tu propio GIF a partir de varias imágenes, te recomiendo que mires esta página. Para añadir un GIF que ya está creado, lo que tenéis que hacer es usar la misma etiqueta de "insertar imagen":
<IMG SRC="GIF animado.gif">
Con esto se acaba la clase de hoy. Espero que os haya ayudado a entender el HTML. Y como siempre... hasta la próxima (y creo que última) clase sobre HTML.
Comentarios
Publicar un comentario