FORMULARIO - ELEMENTOS PARA INTRODUCIR DATOS

ELEMENTOS PARA INTRODUCIR DATOS EN UN FORMULARIO

Una página sin interación con el visitante, sería una web pasiva, de ahí la necesidad del uso de formularios para que tú pagina tenga vida.
Los elementos los clasificaremos en tres clases:

• Introducir texto
  
• Utilizar menú
  
• Utilizar botones
  

La etiqueta para introducir datos sería la siguiente:

Citación :

< INPUT TYPE="xxx" NAME="yyy" VALUE="zzz" >

En donde:

• xxx es la palabra que indica el tipo de introducción.
  
• yyy es el nombre que le asignamos a la varible de introducción del dato.
  
• zzz La palabra asociada a un elemento.
  

A continuació iremos aclarando los casos.

1.- INTRODUCCION POR MEDIO DE TEXTO

En este caso xxx la sustituimos por text, y quedaría la etiqueta así: INPUT TYPE="TEXT"

Vamos a poner un ejemplo solicitando el nombre al usuario (en este caso VALUE no procede)

Citación :

< form > Escribe tu nombre: < input type="text" name="Nombre" > < /form >

EJEMPLO: (Utiliza el campo y escribe tu nombre, para que veas como funciona)

Ecribe tú nombre:  

Si el usuario introduce su nombre y pulsa el botón envío, recibiremos su email con el siguiente texto:
Nombre=Juan (en el caso de haber tipiado Juan)

La longitud por defecto de este formulario es de 20 caracteres. Podemos variarlo incluyendo en la etiqueta el atributo SIZE="número". Además sin importar la longitud del formulario, el usuario podra ingresar cualquier cantidad de caracteres. Podemos limitarlo incluyendo en la etiqueta el atributo MAXLENGTH="número".
En este caso utilizaremos la siguiente etiqueta:

Citación :

< INPUT TYPE="TEXT" NAME="CIUDAD" SIZE="30" MAXLENGTH="10" >

Como podemos observar en la etiqueta, ampliamos la longitud del campo pero restrigimos el número de caracteres a 10.

EJEMPLO: (Trate de escribir la palabra Barquisimeto)
En que ciudad se encuentra:

Podemos hacer que el texto introducido no sea reconocible, los caracteres se presentarán como asteriscos. Lo cual se logra cambiando en la etiqueta INPUT TYPE="TEXT" por INPUT TYPE="PASSWORD".
Vamos a utilizar el ejemplo anterior cambiando solo este atributo

Citación :

< INPUT TYPE="PASSWORD" NAME="CIUDAD" SIZE="30" MAXLENGTH="10" >

EJEMPLO: (escribir una palabra)
En que ciudad se encuentra:

2.- INTRODUCCION DE TEXTO CON MULTIPLES LINEAS

Cuando el texto a introducir alcanza una gran longitud, como un comentario, utilizaremos un formulario de texto de múltiples líneas. Esto lo conseguimos con la etiqueta de inicio < TEXTAREA > y la de cierre < /TEXTAREA>, no se utiliza INPUT TYPE y usaremos ROWS para presentar el número de líneas y COLS el de columnas.

Código:

<FORM>Dame tu comentario: <BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40"></TEXTAREA></FORM>

EJEMPLO: (Escribe y pruebalo)

Dame tu comentario:

3.- INTRODUCCION POR MEDIO DE MENUS

Podemos presentarle al visitante varias opciones, para que seleccione una, de un menú.
Esto se consigue con la etiqueta de inicio < SELECT > y la de cierre < /SELECT >. Para las opciones, utilizamos la etiqueta < OPTION >.

Código:

<FORM>Cual es tu mascota preferida:
<br><SELECT NAME ="Mascota">
<OPTION>Caballo
<OPTION>Gato
<OPTION>Perro
<OPTION>Pez
</SELECT>
</FORM>

EJEMPLO: (Abre la selección)
Cual es tu mascota preferida:
Caballo
Gato
Perro
Pez

Selección multiple:
Para esto utilizaremos el ejemplo anterior, y le agregaremos el atributo MULTIPLE SIZE="número", el número nos da la cantidad de opciones a la vista.

Código:

<FORM>Cual es tu mascota preferida:
<br><SELECT NAME ="Mascota" MULTIPLE SIZE="3">
<OPTION>Caballo
<OPTION>Gato
<OPTION>Perro
<OPTION>Pez
</SELECT>
</FORM>

EJEMPLO: (Abre la selección)
Cual es tu mascota preferida:

Caballo
Gato
Perro
Pez

4.- FORMULARIO DE CONFIRMACION

CHECKBOX o confirmación, esto lo conseguimos con la etiqueta:

< INPUT TYPE="CHECKBOX" NAME="nombre" >

Deseo solicitarle a un usuario, la inclución en nuestro foro:

Código:

<FORM>
<INPUT TYPE="CHECKBOX" NAME="Lista"> Sí deseo ser incluido al FORO.
</FORM>

EJEMPLO:
 Sí deseo ser incluido al FORO.

5.- BOTONES DE RADIO

Cuando queremos darle a selecionar una opción entre varias al visitante, podemos usar la siguiente etiqueta:

< INPUT TYPE="RADIO" NAME="yyy" VALUE="zzz">

Entendiendose que yyy es el nombre que le daremos a la variable a elegir y zzz es el nombre de cada opción.

Código:

<form>Cual es tu deporte preferido:
<input type="radio" name="Deporte" value="Patin">  Patin
<input type="radio" name="Deporte" value="Bicicleta"> Bicicleta
<input type="radio" name="Deporte" value="Natacion"> Natacion
</form>

EJEMPLO:
Cual es tu deporte preferido:
Patin
Bicicleta
Natacion

6.- BOTONES DE ENVIO Y DE BORRADO

No podemos dejar por alto los elenmentos esenciales en todo formulario, el botón que nos permitira enviar los datos contenidos en el formulario, y el que nos permite borrar todo lo escrito, su etiqueta es la siguiente:

Código:

<FORM>
<INPUT TYPE="SUBMIT" VALUE="Enviar"><INPUT TYPE="RESET" VALUE="Borrar">
</FORM>

7.- ETIQUETA DE INICIO DE UN FORMULARIO

La etiqueta de inicio de un formulario es donde se encuentra las acciones que va cumplir dicho formulario, siendo esta:

Código:

<FORM ACTION="MAILTO:Direccion_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">

La atribución ACTION, indica la acción de enviar por email, el contenido del formulario a la dirección indicada.
El atributo METHOD=POST, indica que los datos deben ser enviados inmediatamente sea pulsado el botón de envío.
El atributo ENCTYPE="TEXT/PLAIN", permite que la repuesta se reciba como un fichero de texto, legible y sin codificación.

8.- FORMULARIO EJEMPLO DE CONTACTO

Código:

<FORM ACTION="Direccion _de_email" METHOD="POST" ENCTYPE=TEXT/PLAIN">
Nombre: <INPUT TYPE="TEXT" NAME="Nombre">
Email:<INPUT TYPE="TEXT" NAME="Email">
Evalua el Foro:
<INPUT TYPE="RADIO" NAME="Valor" VALUE="Bueno"> Bueno
<INPUT TYPE="RADIO" NAME="Valor" VALUE="Regular"> Regular
<INPUT TYPE="RADIO" NAME="Valor" VALUE="Malo"> Malo
Danos tu comentario:
<TEXTAREA NAME="Comentario" ROW="6" COLS="40"></TEXTAREA>
<INPUT TYPE="SUBMIT" VALUE="Enviar"><INPUT TYPE="RESET" VALUE="Borrar">
</FORM>

EJEMPLO: (Formulario de contacto) Nombre: Email: Evalua el Foro: Bueno Regular Malo Danos tu comentario:

ATT: tironemota