Formularios HTML

Etiqueta <INPUT>

La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener el formulario.

Sus atributos y valores son:

* TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuación:

• radio, que define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por uno solo de ellos, que se marca con el ratón o tabulador. Admite los parámetros:

  • name=" nombre"", que asigna un nombre identificador único a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo.
  • value =" valor ", que define un valor posible de la variable para cada uno de los radio botones.
  • checked, que marca por defecto uno de los radio botones del grupo.
  • disabled, que desactiva el radio botón, por lo que el usuario no podrá marcarlo.
  • tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

  Ejemplo.-
  
  <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
    marca tu equipo favorito:
    <input type="Radio" name="equipo" value="madrid" checked>Real Madrid
    <input type="Radio" name="equipo" value="atletico">Atlético de Madrid
    <input type="Radio" name="equipo" value="barcelona">Barcelona
  </form>
  

  con el que obtenemos:
  
  

  marca tu equipo favorito: Real Madrid Atlético de Madrid Barcelona

• checkbox, que define una o más casillas de verificación, pudiendo marcar el usuario las que desee del conjunto total. Si pinchamos una casilla con el ratón o la activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parámetros complementarios son:

  • name=" nombre", que asigna un nombre identificador único a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas.
  • value =" valor ", que define un valor posible de la variable para cada uno de casillas de verificación.
  • checked, que marca por defecto una o más de las casillas del grupo.
  • disabled, que desactiva la casilla de verificación, por lo que el usuario no podrá marcarla.
  • tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

  Ejemplo.-
  
  <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
    marca tu música favorita:
    <input type="checkbox" name="musica" value="rock" checked>Rock
    <input type="checkbox" name="musica" value="pop" checked>Pop
    <input type="checkbox" name="musica" value="heavy">Heavy
    <input type="checkbox" name="musica" value="tecno">Tecno
  </form>
  

  con el que obtenemos:
  
  

  marca tu música favorita: Rock Pop Heavy Tecno

• button, que define un botón estandar. Este botón puede ser usado para diferentes acciones, pero normalmente se le dá utilidad mediante JavaScript, mediante el evento "OnClick". Sus parámetros son:

  • name=" nombre", que asigna un nombre al botón, que nos puede servir para acciones con lenguaje de script.
  • value=" valor ", que define el texto que va a figurar en el botón.
  • disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo.
  • tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

  Ejemplo.-
  
  <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
    <input type="Button" name="boton" value="pulsame">
  </form>
  

  con el que obtenemos:
  
  

• image, que introduce un botón definido por una imagen, en vez del formato estandar de botones, con lo que podemos así personalizar el botón. Inicialmente su función era contener una localización de las coordenadas que pinchara el usuario, para que luego el programa CGI realizara una acción u otra dependiendo de estas. Pero actualmente se usa más para personalizar un botón de envío de datos; es decir, su funcionalidad es análoga a la de submit, pero nos permite personalizar este elemento. Además añadirá como información en el formulario las coordenadas x e y donde el usuario lo pulsó. Admite los parámetros:

  • name=" nombre", que asigna un nombre al botón para identificarlo de forma única y poder así acceder luego a sus propiedades.
  • src= " ruta imagen ", que establece la ruta dónde localizar el fichero de imagen. Esta ruta puede ser relativa al directorio web en el servidor o una URL absoluta que define unívocamente la lozalización de la imagen.
  • width= " w ", que fija la anchura del botón de imagen.
  • height= " h ", que fija la altura del botón de imagen.
  • align= " left / middle / right / bottom / baseline...", que define la posición del texto que rodea el botón respecto a este.
  • hspace= " x ", que fija el espacio horizontal que habrá entre el botón y el texto que lo circunda.
  • vspace= " x ", que fija el espacio vertical que habrá entre el botón y el texto que lo circunda.
  • alt = " texto ", que asocia un texto explicativo al botón de imagen. Al situar el cursor encima del botón se mostrará este texto en forma de tip de Windows. Siempre es conveniente poner este atributo, para que en caso de navegadores de sólo texto, de que la imagen no se encuentre en la ruta por cualquier motivo o de que la página tarde mucho en cragarse por su peso, el usuario puede ver qué hace el botón de imagen y pueda en consecuencia utilizarlo para tal fin.
  • disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo.
  • tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.
  • usemap= " #nombre de mapa ", que nos permite el uso de un mapa de imágenes en el cliente como un dispositivo más de entrada de datos.

  Ejemplo.-
  
  <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
    <input type="image" name="boton" src="/images/contenidos/lecciones/1.jpg" width="50" height="20" hspace="10" align="middle">
  </form>
  

  con el que obtenemos:
  
  

  púlsa aquí

• password, que define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecerá como asteriscos, por motivos de seguridad. Sus parámetros opcionales son los mismos que los del tipo text.

  Ejemplo.-
  
  <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
    <input type="password" size="15" maxlength="10">
  </form>
  

  con el que obtenemos:
  
  

  introduce la clave de acceso:

• hidden, que define un campo invisible, por lo que no se ve en pantalla. Aunque parece así definido que no tiene utilidad, sus usos son varios e importantes, y los veremos más tarde. Sus atributos son:

  • name=" nombre", que asigna un nombre identificador único al campo oculto.
  • value=" valor ", que va a ser el valor fijo que se le va a pasar al programa del servidor, ya que el usuario no puede modificarlo. En realidad este valor no tiene porqué ser fijo, ya que lo vamos a poder modificar mediante código de script, lo que nos va a permitir ir pasando una serie de variables ocultas de una página a otra.

  Ejemplo.-
  
  <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
    <input type="hidden" name="contraseña" value="123ABC">
  </form>
  

• file = " ruta archivo ", que define un archivo que puede ser enviado junto con los datos del formulario, y en donde la ruta puede ser relativa al directorio de carpetas del servidor o una ruta URL absoluta de Internet. Debemos asegurarnos de que el tipo de archivo enviado esté dentro de los permitidos por la etiqueta ACCEPT.
  
  
• submit, que incorpora al formulario un botón de envío de datos. Cuando el usuario pulsa este botón los datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o a la dirección de correo indicada en action. Sus atributos son:

  • value=" valor ", que define el texto que va a aparecer en el botón de envío.
  • disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo.
  • tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

  
  
• reset, que define un botón que al ser pulsado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario. Sus atributos son los mismos que los de SUBMIT.

ver ejemplo general nº 1.