HTMLpointHTMLpoint HTMLpoint.com


 Form simple



Sobre todo en los sitios de las empresas, resulta útil e, incluso, necesario introducir un módulo que rellenar para el envío de informaciones por parte del usuario interesado.
Las próximas lecciones están dedicadas exclusivamente a la creación de los form para enviar datos, desde las más simples hasta las más complejas.
Explicaré únicamente los módulos que permiten el envío de los datos a un CGI externo elaborador. No voy a explicar, por tanto, el envío de los datos directamente por correo electrónico.

Un form de ese tipo:


Nombre: Apellido:
Teléfono: Email:
Usuario: Contraseña:

Informaciones:

 


es facilísimo reproducirlo en Flash.
En este caso el form se refiere a una dirección desconocida "http://www.nomesito.com/cgi-bin/nomecgi.cgi" y obviamente se tiene que sustituir por el correcto.
En su interior están presentes también 2 campos escondidos. Veamos el código HTML del módulo:

<form action="http://www.nomesito.com/cgi-bin/nomecgi.cgi" method="post">
<input type="hidden" name="mail" value="info@nomesito.com">
<input type="hidden" name="soggetto" value="Modulo utenti">

<div align="center">
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" size="15"></td>
<td>Apellido:</td>
<td><input type="text" name="apellido" size="15"></td>
</tr>
<tr>
<td>Teléfono:</td>
<td><input type="text" name="tel" size="15"></td>
<td>Email:</td>
<td><input type="text" name="email" size="15"></td>
</tr>
<tr>
<td>Usuario:</td>
<td><input type="text" name="usuario" size="15"></td>
<td>Contraseña:</td>
<td><input type="contraseña" name="contraseña" size="15"></td>
</tr>
<tr>
<td colspan="4">
<p align="center">Informaciones: <textarea rows="4" name="info" cols="40"></textarea>
<p align="center"><input type="submit" value="Envía" name="envía">&nbsp;
<input type="reset" value="Reprograma" name="reprograma"></td>
</tr>
</table>
</div>
</form>

Por lo tanto en el módulo están presentes 2 campos escondidos mail e sujeto, 5 capos de texto nombre, apellido, tel, email y usuario, un campo contraseña contraseña y , para acabar, un campo TextArea info.

¡Nada más fácil!


Campos de texto
Para introducir campos normales de texto como nombre, es necesario incluir un bloque de texto con la función Text Field (campo de texto) activada:

Una vez creado el campo, clicad en él con el pulsante derecho del ratón y dadle el nombre a ese campo:

Repetid la operación para todos los campos de texto presentes en el módulo.


Campos TextArea
Los campos TextArea tienen la particularidad de que se pueden compilar sobre más líneas de texto respecto a lo única línea de los normales campos de texto.

Para crear un campo de este tipo en Flash, la operación es idéntica al campo de texto normal, con la excepción de tener que seleccionar la voz Multiline que se encuentra en la ventana Text Field Properties:

Activando esta opción, es posible activar también Word wrap, que permite el punto y aparte automáticamente con la palabra entera digitada si ésta supera la longitud del campo:

Habréis notado seguramente que para moverse arriba y abajo en el campo hay que usar el cursor de texto, ¿no?
Uhm... no resulta en absoluto funcional... intentemos intoducir un scroll de texto y veamos si mejora:

Decididamente mejor, ¿no os parece? :-)
Para entender cómo funciona el scroll de texto os remito a la lección dedicada.


Campos escondidos
Para crear campos escondidos hay 2 métodos...

El primero consiste en crear un campo de texto normal, escribir en él el valor asignado y colocarlo lejos del área de trabajo, de manera que no se vea durante la reproducción de la película.
Con el segundo método, sin embargo, es suficiente asignar el valor a una variable con el mismo nombre del campo antes del envío de los datos y asunto concluido:

Set Variable: "mail" = "info@nomesito.com"
Set Variable: "sujeto" = "Módulo usuario"


Campos contraseña
Introducir un campo de texto normal y activar la opción Contraseña:


Crear el pulsante Reprogramar
Para recrear el efecto de este pulsante en Flash, hay que escribir unas action al Release del botón ponen a cero los vores de todos los campos de texto presentes en el módulo:

On (Release)
  Set Variable: "nombre" = ""
  Set Variable: "apellido" = ""
  Set Variable: "tel" = ""
  Set Variable: "email" = ""
  Set Variable: "usuario" = ""
  Set Variable: "contraseña" = ""
  Set Variable: "info" = ""
End On


Crear el pulsante Envía 
Una vez creado el botón, asignarle esta action:

On (Release)
  Get URL ("http://www.nomesito.com/cgi-bin/nomecgi.cgi", vars=POST)
End On

teniendo cuidado de seleccionar el tipo de envío de las variables (normalmente POST):


Otras propiedades
Hay otras opciones seleccionables para un campo de texto.
Veamos cuáles:

  • Restrict text length to x characters limita la digitación, dentro del campo, a x caracteres (x es el valor incluido).

  • Disable editing desabilita la escritura en el campo de texto.

  • Disable selection desabilita la la selección del texto en el campo (el usuario no es capaz de poder hacer copia/pega).


He aquí la traducción del módulo en Flash

¡Y es incluso más bonito estéticamente! ;-)

Descarga el ejemplo de esta lección


  Torna a inizio pagina