¿Qué es?
Llamamos
formulario web a un tipo de formulario online que permite a los
visitantes suscribirse en su
newsletter * mediante la introducción de su dirección de email y cualquier otra información adicional que quiera obtener.
Newsletter * publicación digital informativa que se distribuye a
través del correo electrónico con cierta frecuencia. Normalmente contienen artículos de interés sobre la marca y del
ámbito en que la misma se desenvuelve. Los que reciben este tipo de
comunicaciones son suscriptores que previamente han mostrado interés en
la marca y han solicitado recibir información por correo.
Elementos
- Campo de texto: Es una línea para introducir texto en la cual se puede especificar longitud máxima de caracteres a introducir, texto que aparece al inicio (normalmente se presenta en blanco). Se puede definir como contraseña, de modo que el texto introducido no se vea.
- Área de texto: Conjunto de líneas en las que se puede introducir texto. Se puede especificar el número de caracteres por línea, texto o valor inicial. Opcionalmente el campo de texto se puede presentar con opciones que permitan diseñar el formato de la tipografía, insertar imágenes, presentar enlaces… de modo que el programa que capte la información la pueda tratar como codificación html o web
- Botón: Elemento que se utiliza para enviar la información o para realizar otras opciones como, por ejemplo, confirmar pulsando el botón "OK".
- Casilla de verificación: Pequeño recuadro que se puede marcar o desmarcar.
- Botón de opción: Pequeño círculo que se puede marcar o desmarcar (siempre tiene uno de la lista tendrá que estar marcado).
- Lista / menú: Listado de opciones que se pueden marcar (una o varias). El listado puede estar desplegado, mostrando todas las opciones o se puede desplegar cuando el usuario clique sobre el listado.
- Campo de archivo o imagen: Similar al campo de texto, pero tiene un botón al lado para que el usuario pueda explorar sus directorios y seleccionar un archivo o imagen a enviar.
¿Qué lenguaje se utiliza?
Se crean a partir de un lenguaje llamado HTML, que es el que se utiliza para desarrollar páginas en Internet.
Es un lenguaje por etiquetas, el navegador será el encargado de interpretar las instrucciones que le damos y procesar esa información para que se vea en la pantalla. Mismo aquí, para escribir en un blog se nos muestra la opción HTML en la que podemos ver lo que escribimos pero en este lenguaje. Por ejemplo, este último párrafo se vería del siguiente modo:
"est<span style="font-family: "trebuchet ms" , sans-serif;">
Tenemos que escribir los distintos códigos en, por ejemplo, un blog de notas y seguir los siguientes pasos:
1) Poner "<html>", ya que, tenemos que establecer el lenguaje que vamos a utilizar.
-Le damos a la tecla intro, si queremos, y continuamos-
2) Empezar a poner etiquetas. La primera, como en cualquier texto, es la cabecera (head, sí, tenemos que ponerlo en inglés) y lo escribiremos de la siguiente forma "<head>" (siempre debemos poner los símbolos "<" ">" al inicio y final de cada palabra).
-Le damos a la tecla intro, si queremos, y continuamos-
3) Poner el título(<title>) y escribir el texto que queramos, en este caso nosotras pusimos "formulario", que será el nombre de la pestaña. Para cerrar la etiqueta de título se usa este símbolo "/",(</title>). Este apartado nos quedaría de la siguiente forma: <title>formulario</title>
-Le damos a la tecla intro, si queremos, y continuamos-
4) Dentro de la página podemos poner un título, para eso, necesitamos las llamadas "h", en este caso, pusimos una sola, por lo que se llamará "<h1>". A continuación, ponemos el título que deseemos, en nuestro caso, lo llamamos "Creación de formulario" y luego, como siempre, cerramos la h. Todo junto quedaría "<h1>Creación de formulario</h1>
5) Cerramos la cabecera (</head>)
-Le damos a la tecla intro, si queremos, y continuamos-
6) Empezamos con una nueva etiqueta y como siempre... ¿Después de la cabecera qué viene? ¡El cuerpo! (<body>), es decir, el texto que deseamos escribir. Para empezarlo lo primero que hay que poner es <form id="formulario"> para establecer que lo que queremos crear es un formulario.
Como en todos los textos podemos agrupar la información en distintos párrafos, para ello, pulsamos la tecla intro y ponemos "<p>" más nuestro texto, nosotras pusimos "Alumnas". Podemos hacerlo las veces que deseemos, pulsando la tecla intro y poniendo "<p>" al principio de cada uno. Se vería de la siguiente forma: "<p>Alumnas". Dentro de este apartado creamos tantas entradas como deseemos, nosotras creamos 2 "tipo botón", llamadas Alba y Marta. Para ello, lo primero que tuvimos que poner fue "<input type>" (que significa entrada tipo) después ponemos un ="radio" (por ser de forma circular el botón) y luego establecemos el nombre de la variable (X) donde quedarán guardados los datos. No tiene por qué llamarse del mismo modo que el párrafo. Finalmente quedaría <input type="radio" name=X>Alba/Marta
-Le damos a la tecla intro y continuamos-
7) Como ya dijimos se pueden crear tantos párrafos como se quieran y nosotras hicimos 2 más, uno "tipo desplegable" y otro "tipo texto".
El primero llamado edad. Ponemos "<p>Edad"; a continuación, establecemos el nombre de su respectiva variable (nosotras le llamamos "variable edad"). Hasta aquí quedaría de la siguiente forma: <select name="Variable edad">.
Antes de continuar vamos a ver si este aspecto quedó claro, las variables son la información que le llega al servidor. Por ejemplo, si hiciésemos una encuesta sobre destinos a los que ir en vacaciones y le diésemos a una variable el valor 1 y su respectiva opción fuese París, otra variable con el valor 2 y con opción Londres y así sucesivamente el servidor no recibiría el nombre de los destinos sino que recibe y almacena las variables; almacena que, por ejemplo, dos personas escogieron la variable 1, que correspondería con París y que sólo una persona escogió la variable 2, Londres.
Dentro de esta, de <select name="Variable edad">, ponemos el nombre de los desplegables que queremos que aparezcan; para ello tenemos que escribir: <option value="nombre de la variable">nombre de la opción</option>.
Por ejemplo, el nuestro quedaría así: <option value="variable 17">17</option>. Tendremos que repetir este procedimiento para crear los sucesivos desplegables.
Y para acabar con este punto 7 cerramos esta pestaña poniendo "</select>
8) Hay otro tipo de entrada, las llamadas entradas de texto. Para crearlas tenemos que:
primero de nada crear el párrafo, nosotras le llamamos instituto (<p>Instituto); dentro de él tenemos que poner <input type="text" name=variable instituto>.
Al igual que en la entrada circular pusimos "radio" aquí tenemos que poner "text".
9) El último paso es cerrar todos los apartados, indispensable.
Primero, cerramos el <form id="formulario"> poniendo </form>
Segundo, cerramos el cuerpo (<body>) con </body>
Tercero, cerramos el lenguaje <html> con </html>
El primero llamado edad. Ponemos "<p>Edad"; a continuación, establecemos el nombre de su respectiva variable (nosotras le llamamos "variable edad"). Hasta aquí quedaría de la siguiente forma: <select name="Variable edad">.
Antes de continuar vamos a ver si este aspecto quedó claro, las variables son la información que le llega al servidor. Por ejemplo, si hiciésemos una encuesta sobre destinos a los que ir en vacaciones y le diésemos a una variable el valor 1 y su respectiva opción fuese París, otra variable con el valor 2 y con opción Londres y así sucesivamente el servidor no recibiría el nombre de los destinos sino que recibe y almacena las variables; almacena que, por ejemplo, dos personas escogieron la variable 1, que correspondería con París y que sólo una persona escogió la variable 2, Londres.
Dentro de esta, de <select name="Variable edad">, ponemos el nombre de los desplegables que queremos que aparezcan; para ello tenemos que escribir: <option value="nombre de la variable">nombre de la opción</option>.
Por ejemplo, el nuestro quedaría así: <option value="variable 17">17</option>. Tendremos que repetir este procedimiento para crear los sucesivos desplegables.
Y para acabar con este punto 7 cerramos esta pestaña poniendo "</select>
8) Hay otro tipo de entrada, las llamadas entradas de texto. Para crearlas tenemos que:
primero de nada crear el párrafo, nosotras le llamamos instituto (<p>Instituto); dentro de él tenemos que poner <input type="text" name=variable instituto>.
Al igual que en la entrada circular pusimos "radio" aquí tenemos que poner "text".
9) El último paso es cerrar todos los apartados, indispensable.
Primero, cerramos el <form id="formulario"> poniendo </form>
Segundo, cerramos el cuerpo (<body>) con </body>
Tercero, cerramos el lenguaje <html> con </html>
A continuación os dejamos el nuestro por si tenéis dudas a la hora de seguir los pasos:
<html>
<head>
<title>formulario</title>
<h1>Creación de formulario</h1>
</head>
<body>
<form id="formulario">
<p>Alumnas:
<input type="radio" name=X>Alba
<input type="radio" name=X>Marta
<p>Edad:
<select name="Edad">
<option value="variable 17">17</option>
<option value="variable 18">18</option>
<option value="variable 19">19</option>
</select>
<p>Instituto:
<input type="text" name=instituto>
</form>
</body>
</html>
<head>
<title>formulario</title>
<h1>Creación de formulario</h1>
</head>
<body>
<form id="formulario">
<p>Alumnas:
<input type="radio" name=X>Alba
<input type="radio" name=X>Marta
<p>Edad:
<select name="Edad">
<option value="variable 17">17</option>
<option value="variable 18">18</option>
<option value="variable 19">19</option>
</select>
<p>Instituto:
<input type="text" name=instituto>
</form>
</body>
</html>
Fuentes de información:
- https://developer.mozilla.org/es/docs/Web/HTML
-http://es.slideshare.net/webcomunicaciones/presentacion-formularios
No hay comentarios:
Publicar un comentario