La etiqueta <input> | Manual PcWeb

La etiqueta <input> posibilita y define la introducción de datos en el formulario.

Atributos de la etiquta <input> :

type = "text / radio / checkbox / button / image / password / hidden / file / submit / reset ", donde type puede tomar uno de los anteriores valores.

(1) text. Indica que el campo a introducir será texto, posee los siguiente parámetros:

size="n". Determina el tamaño de la caja de texto que aparece en pantalla.
maxlenght="n". Designa el número máximo de caracteres que se pueden introducir en la caja de texto.
name=" nombre". Asigna un nombre único a los datos que se inserten en la caja de texto.
value=" texto ". Designa el texto que aparecerá inicialmente en la caja de texto.
disabled. Desactiva la caja de texto, por tanto el usario no podrá insertar ningún texto en dicho campo.
accept="lista de content-type". Indicamos el tipo de datos que aceptara el servidor.
Teniendo como valores:
1. text/html
2. application/msexcel
3. application/msword
4. image/gif
5. image/jpg
readonly. Establece que el texto no puede ser modificado por el usuario.
tabindex="n". Asigna el orden de tabulador que tiene el campo respecto a los demás elementos que componen el formulario..
alt= "comentario". Descripción del elemento.

Ejemplo(1):

  
<form action="cgi-bin/sport.exe" method="post" 
    enctype="text/plain" name="encuesta_deportiva_1">
 Nombre:
 <input type="text" size="20" maxlength="20" name="nombre">
</form>

con lo que obtenemos:

(2) radio. Es un campo multivalor excluyente, permite escoger una y sólo una opción de un conjunto de valores. Posee lo siguientes parámetros:

name="nombre". Asigna un nombre identificador único. Este identificador debe ser el mismo para todos los elementos radio de un grupo.
value="valor"". Asigna un valor a la variable de cada casilla que componen el elemento radio.
checked". Selecciona por defecto uno de los radio botones del grupo.
disabled". Desactiva el radio botón, por lo que el usuario no podra marcarlo.
tabindex="n". Especifica el orden de tabulador que tendrá el campo respecto todos los elementos que componen el formulario.

Ejemplo:

<form action="mailto:server@server.com" method="post" 
    enctype="text/plain" name=" ejemplo_formulario"> Sexo
  <input type="Radio" name="sexo" value="Hombre"checked>Mujer
  <input type="Radio" name= "sexo" value="Mujer">Hombre
</form>

Que se mostrará en el navegador:

(3) checkbox. Define las casillas de verificación que tendrá nuestro formulario. Este tipo de elementos pueden ser activados o desactivados por el usuario al pulsar sobre la caja. A diferencia con el componente anterior radio, este elemento no es auto excluyente. Tiene como parámetros complementarios:

name="nombre". 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". Asigna un valor a la variable a cada casilla de verificación que componen el ceckbox.
checked. Selecciona por defecto una o más de las casillas del grupo.
disabled. Desactiva la casilla de verificación, por lo que el usuario no podra selecionarla.
tabindex="n". Especifica el orden de tabulador que tendrá el campo respecto todos los elementos que componen el formulario.

Ejemplo.-

<form action="mailto:formulario1@server.com" method="post" 
                      enctype="text/plain" name="checkbox">
 Cual es tu genero de cine  preferido:
<input type="checkbox" name="cine" value="Western"> Western
<input type="checkbox" name="cine" value="Terror"> Terror
<input type="checkbox" name="cine" value="Comedia"> Comedia
<input type="checkbox" name="cine" value="accion"> Acción
</form>

Que se mostrará en pantalla:

(4) button. Inserta en el formulario de un botón estandar. Este botón puede ser usado para diferentes acciones. El uso más frecuente de un botón es en la programación en el cliente. Utilizando lenguajes como Javascript ,podemos definir acciones a tomar cuando un visitante pulse el botón de una página web. Sus parametros son:

name=" nombre". Asigna un nombre al botón,
value=" valor ". Define el texto que veremos en el botón, cuando lo nuestre el navegador.
disabled. Desactiva el botón, cuando se pulsa no se produce ninguna acción..
tabindex ="n". Especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

Ejemplo:

<form action="mailto:formulario1@server.com" method="post" 
                       enctype="text/plain" name="button">
  <input type="button" name="boton_enviar" value="enviar">
</form>

Con lo que obtendremos:

(5) image. nos permite personalizar el tipo de botones que tiene el formulario, es decir, nos permite la posibilidad de conferir a una imagen la funcionalidad de un botón. Posee lo siguiente parámetros:

name="nombre". Asigna un nombre al botón para identificarlo de forma única y poder así acceder luego a sus propiedades.
src="ruta_imagen". Asigna la ruta al fichero de la imagen. Recomendamos que esta ruta sea relativa al directorio, aunque puede ser absoluta.
width="n". Asigna la anchura del botón de imagen.
height="n". Define la altura del botón de imagen.
align= " left / middle / right / bottom / baseline...". Asignamos la posición del texto que rodea el botón.
hspace="n". Define el espacio horizontal que hay entre el botón y el texto que lo rodea.
vspace="n". Define el espacio vertical que hay entre el botón y el texto que lo rodea.
alt="texto". Asocia un texto explicativo al botón de imagen. Al situar el cursor encima del botón se mostrara este texto.
disabled. Inhabilita el botón, impidiendo que se produzca acción alguna cuando es pulsado, pués permanece inactivo
tabindex="n". Especifica el orden de tabulador que tendrá el campo respecto todos los elementos que componen el formulario.
usemap= " #nombre de mapa ". Nos da la posibilidad del uso de un mapa de imagenes para la de entrada de datos.

Ejemplo.-

<form action="mailto:imagen@server.com" method="post" 
                    enctype="text/plain" name="imagen">
 <input type="image" name="boton" src="imagenes/boton.jpg" 
        width="107" height="35" hspace="10" align="middle">
</form>

Se mostrará:

(6) password. Crea una zona de texto donde los caracteres al introducirlos por el usuario se reemplazan por asteriscos, debido a motivos de seguridad. Teniendo como parámetros opcionales, los mismos que posee el tipo text

Ejemplo.-

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

con el que obtenemos:

(7) hidden define un campo escondido, por lo que no se ve en pantalla. Sus atributos son:

name=" nombre". Asigna un nombre identificador único al campo oculto.
value=" valor ". Asigna un valor campo.

Ejemplo:

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

(8) file. nos permite enviar un archivo adjunto al formulario. Sus principales atributos son:

title="titulo": que muestra un texto en tipo 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.

(9) submit. Inserta en el formulario un botón de envío de datos. Cuando el usuario pulsa en el botón los datos contenidos en el formulario son enviados a su destino definido en el atributo action, dirección de correo o programa de proceso de datos. Teniendo como parámetros:

name="nombre". Asigna un nombre identificador único al campo .
value="valor". Define el texto que aparecerá en el botón.
disabled. Desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo.
tabindex="n". Designa el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

(10) reset. Botón de borrado de todos los datos introducidos en el formulario. Sus atributos son los mismos que los de submit.

Ejemplo:

<form> 
   <input type="reset" value="borrar">
</form>

Se visualizará: