Html Formulario

¿Para qué se usan los formularios?

Los formularios son usados para que el usuario ingrese datos.

Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).

________________________________________

La etiqueta form

Dentro de la etiqueta <form> se encuentra el formulario.

Los usuarios interaccionan con los formularios a través de las llamados controles.

Tipos de controles:

• Botones (buttons)

• Casillas de verificación (checkboxes)

• Radiobotones (radio buttons)

• Menúes (menus)

• Entrada de texto (text input)

• Selección de ficheros (file select)

• Controles ocultos (hidden controls)

• Controles tipo objeto (object controls)

Dentro de la etiqueta <form>, se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado.

Tambien contamos con el atributo method. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor.

________________________________________

La etiqueta input

Nos define el registro donde el usuario puede ingresar los datos.

El atributo type especifica el tipo de control a crear.

Entre ellos se encuentran los siguientes valores:

Text

Crea un control que nos permite ingresar un texto en una línea.

Código

<form action="datos.php" method="get">

Nombre: <input type"text" name="nombre">

<br>

Apellido: <input type"text" name="apellido">

</form>

Resultado

Nombre:

Apellido:

Nota: en este ejemplo podemos observar lo siguiente:

• action="datos.php" --> nos indica que el archivo datos.php es el encargado de manipular los datos que el usuario ingresó en el formulario

• method="get" --> nos indica que los datos del formulario se enviarán por el método get

• name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo

Radio botones

Se usan cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.

Código

<form action="edades.asp" method="post">

¿Edad?

<input type"radio" name="edad" value="menor">menor de 17

<br>

<input type"radio" name="edad" value="adulto">entre 18 y 60

<br>

<input type"radio" name="edad" value="mayor">mayor de 61

</form>

Resultado

¿Edad?

menor de 17

entre 18 y 60

mayor de 61

Nota: en este ejemplo podemos observar lo siguiente:

• action="edades.asp" --> nos indica que el archivo edades.asp es el encargado de manipular los datos que el usuario ingresó en el formulario

• method="post" --> nos indica que los datos del formulario se enviarán por el método post

• name="edad" --> debemos utilizar el mismo nombre(en este caso "edad") para todos los elementos del mismo control radio.

• value="mayor" --> define el valor del elemento <input>

Checkbox (casillas de verificación)

Permite al usuario elegir varias opciones entre todas las posibilidades.

Código

<form action="hobbie.php" method="get">

¿Pasatiempos?

<input type"checkbox" name="pasa" value="tv">TV

<br>

<input type"checkbox" name="pasa" value="libros">Libros

<br>

<input type"checkbox" name="pasa" value="musica">Música

<br>

<input type"checkbox" name="pasa" value="otros">Otros

</form>

Resultado

¿Pasatiempos?

TV

Libros

Música

Otros

Nota: en este ejemplo podemos observar lo siguiente:

• action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado de manipular los datos que el usuario ingresó en el formulario

• method="get" --> nos indica que los datos del formulario se enviarán por el método get

• name="pasa" --> debemos utilizar el mismo nombre(en este caso "pasa") para todos los elementos del mismo control checkbox.

• value="tv" --> define el valor del elemento <input>

Password

Funciona igual que text, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseñas.

Submit

Botón de envio de datos del formulario.

Reset

Botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.

Código

<form action="datos_personales.php" method="post">

Nombre: <input type"text" name="nombre">

<br>

Contraseña: <input type"password" name="secreto">

<br>

<input type"submit" value="Enviar">

<input type"reset" value="Borrar">

</form>

Resultado

Nombre:

Contraseña:

Nota: en este ejemplo podemos observar lo siguiente:

• action="datos_personales.php" --> nos indica que el archivo datos_personales.php es el encargado de manipular los datos que el usuario ingresó en el formulario

• method="post" --> nos indica que los datos del formulario se enviarán por el método post

• name="nombre" - name="secreto" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo

• value="Enviar" --> define el texto del botón "submit"

• value="Borrar" --> define el texto del botón "reset"

________________________________________

...