HTMLWeb > HTML > 1  - 2 - 3 - 4  - 5 - 6 - 7  - 8 - 9 - 10 -  11 - 12

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:

• text, que sirve para introducir una caja de texto simple, y admite los parametros:
  
  
  • name=" nombre", que asigna de forma unívoca un nombre identificador a la variable que se introduzca en la caja de texto.
    
    
  • maxlenght=" n ", que fija el número maximo de caracteres que se pueden itroducir en la caja de texto.
    
    
  • size=" n ", que establece el tamaño de la caja de texto en pantalla.
    
    
  • value=" texto ", que establece el valor por defecto del texto que aparecera en inicialmente en la caja de texto.
    
    
  • disabled, que desactiva la caja de texto, por lo que el usuario no podra escribir nada en ella.
    
    
  • accept = " lista de content-type", Indica el tipo de contenido que aceptara el servidor.
    Sus posibles valores son:
    
    
    1. text/html
       
       
    2. application/msexcel
       
       
    3. application/msword
       
       
    4. application/pdf
       
       
    5. image/jpg
       
       
    6. image/gif
       
       etc.
    
    
    
  • readonly, que establece que el texto no puede ser modificado por el usuario.
    
    
  • tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.
    
    
  • alt= " texto ", que asigna una pequeña descripción al elemento.
  
  
  

  Ejemplo.-
  
  <form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">
    introduce tu nombre:
    <input type="text" maxlength="10" size="10" name="nombre">
  </form>
  

  con el que obtenemos:
  
  

  introduce tu nombre:  

• 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 parametros:
  
  

  • 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 podra marcarlo.
    
    
  • tabindex = " n ", que especifica el orden de tabulador que tendra 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 mas 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 parametros 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 mas de las casillas del grupo.
    
    
  • disabled, que desactiva la casilla de verificación, por lo que el usuario no podra marcarla.
    
    
  • tabindex = " n ", que especifica el orden de tabulador que tendra 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 da utilidad mediante JavaScript, mediante el evento "OnClick". Sus parametros 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 tendra 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 mas para personalizar un botón de envío de datos; es decir, su funcionalidad es analoga a la de submit, pero nos permite personalizar este elemento. Ademas añadira como información en el formulario las coordenadas x e y donde el usuario lo pulsó. Admite los parametros:
  
  

  • 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 habra entre el botón y el texto que lo circunda.
    
    
  • vspace= " x ", que fija el espacio vertical que habra 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 mostrara 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 pagina 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 tendra el campo respecto todos los elementos que incluye el formulario.
    
    
  • usemap= " #nombre de mapa ", que nos permite el uso de un mapa de imagenes en el cliente como un dispositivo mas 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/1.jpg" width="50" height="20" hspace="10" align="middle">
  </form>
  

  con el que obtenemos:
  
  pulsa aquí

• password, que define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecera como asteriscos, por motivos de seguridad. Sus parametros 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 mas 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 pagina 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, que define un archivo que puede ser enviado junto con los datos del formulario. En este tipo de elemento encontramos asociados una caja de texto y un botón en el que encontramos escrito bien "examinar..." bien "browse..." , dependiendo del lenguaje de nuestro navegador, que al ser pulsado nos abre la típica ventana de exploración de nuestras unidades de disco, para que seleccionemos el archivo que queremos enviar al servidor. Cuando elegimos uno su ruta aparece en la caja de texto.
  
  Ejemplo.-

  
  
  

  Sus principales atributos son:
  
  

  • title="titulo": que muestra un texto en tipo tip al situar el cursor encima del botón de examinar (sólo en Internet Explorer).

  • accept="tipo_archivo":que determina el tipo de archivo que se admite como para enviar.
    
    
  • disabled : que desactiva tanto el botón como la caja de texto, impidiendo al usuario seleccionar un archivo (sólo Internet Explorer y Nestcape 6x).
    
    
  • size="numero_entero": que fija la anchura de la caja de texto asociada.
    
    

• 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 tendra 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.