El elemento input y sus atributos
El elemento HTML
<input> se usa para crear controles interactivos para
formularios basados en la web, que reciban datos del usuario. La forma en que
<input> funciona varía considerablemente dependiendo del valor de su atributo
type.
Tipos de input (dado por su atributo "type")
| type | HTML5 | descripción |
|---|---|---|
| button | no | Botón sin un comportamiento específico. |
| checkbox | no | Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado. También se puede usar el atributo indeterminate (el cual solo se puede establecer programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla). |
| color | sí | Control para espicificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto |
| date | sí | Control para introducir una fecha (año, mes y día, sin tiempo). |
| datetime | sí | Control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo), basado en la zona horaria UTC. Esta característica ha sido removida de WHATWG HTML. |
| datetime-local | sí | Control para introducir fecha y hora, sin zona horaria específica. |
| sí | Campo para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una cadena vacía o una dirección de correo válida antes de enviarse. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda. | |
| file | no | Control que permite al usuario seleccionar un archivo. Se puede usar el atributo accept para definir los tipos de archivo que el control podrá seleccionar. |
| hidden | no | Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor. |
| image | no | Botón de envío de formulario con gráfico. Se debe usar el atributo src para definir el origen de la imagen y el atributo alt para definir un texto alternativo. Se puede usar los atributos height y width para definir el tamaño de la imagen en píxeles. |
| month | sí | Control para introducir un mes y año, sin zona horaria específica. |
| number | sí | Control para introducir un número de punto flotante. |
| password | no | Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo maxlength para especificar la longitud máxima del valor que se puede introducir. |
| radio | no | Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez. |
| range | sí | Control para introducir un número cuyo valor exacto no es importante. Este control usa los siguientes valores predeterminados si no se especifica cada atributo: min: 0 max: 100 value: min + (max - min) / 2, o min si max es menor que min step: 1 |
| reset | no | Botón que restaura los contenidos de un formulario a sus valores predeterminados. |
| search | sí | Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido. |
| submit | no | Botón que envía el formulario. |
| tel | sí | Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en este control. Las pseudo-clases CSS :valid y :invalid son aplicadas segun corresponda. |
| text | no | Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido. |
| time | sí | Control para introducir un valor de tiempo sin zona horaria específica. |
| url | sí | Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en el control. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda. |
| week | sí | Control para introducir una fecha que consiste en número de semana del año y número de semana sin zona horaria específica. |
Atributo value
El atributo value indica el valor incial que tendrá un elemento input.
Ejemplo:Atributo readonly
Especifica que un elemento es de solo lectura como su nombre lo indica. Esto quiere decir que no puede ser modificado por el usuario.
Ejemplo:Atributo disabled
Especifica que un control se encuentra deshabilitado. Esto quiere decir que no son utilizables, no son clickeables y que su contenido no será enviado en un formulario en caso de encontrarse dentro de uno.
Ejemplo:Atributo maxlength
Especifica la longitud máxima de caracteres admitidos por el control.
Ejemplo:
Para mayor detalles sobre los atributos que aplican sobre los input, sus detalles y aplicaciones mirar el
siguiente link.