input.type | Html

Descripción

El atributo type del elemento input nos permite especificar el tipo de campo de entrada que queremos utilizar. Los tipos de campos de entrada que podemos encontrar son:

text, es el tipo de campo por defecto y lo que nos permite es que la entrada sea una cadena de texto.
password, en este caso se admite una cadena de texto que se supone que es una contraseña, por lo tanto cada vez que tecleamos un carácter el texto aparecerá con símbolos de asterisco.
checkbox, convierte el campo de entrada en un elemento de selección múltiple. En el caso de que pongamos varios campos de entrada de tipo “checkbox”, podremos elegir varias opciones a la vez.
radio, convierte el campo de entrada en un elemento de selección única. Es decir, en el caso de incluir un conjunto de campos de entrada de tipo “radio”, solo uno de ellos podrá ser elegido a la vez.
hidden, en este caso el campo de texto aparece oculto. Nos servirá para poder pasar información al servidor de forma transparente al usuario.
image, el campo de entrada será una imagen. Sobre esa imagen podremos seleccionar alguna parte de la misma.
submit, sirve para convertir el campo de entrada en un botón de envío de formulario. Aunque lo suyo es utilizar un elemento button, también tenemos esta posibilidad sobre el elemento input.
button, convierte al campo de entrada en un botón. Nuevamente este elemento input podría ser sustituido por un elemento button.
reset, para este tipo se convierte el elemento de entrada en un botón que borra todos los datos asociados al formulario en el que se encuentra. Es el tercer caso de que se puede utilizar un elemento input como un elemento button.
search, indica que el elemento de campo de entrada se va a utilizar para realizar búsquedas.
email, indica que el elemento de campo de entrada va a ser utilizado para dar cabida a cadenas que representen un email, por lo tanto se podrá validar el formato del email por parte del agente de usuario o navegador.
tel, para este caso se espera que el texto introducido sea un teléfono. Por lo tanto el agente de usuario o navegador podrá realizar las acciones de validación o formato que considere oportunas.
number, nos permitirá que el campo de entrada sea un valor numérico y por lo tanto rechace el poder insertar cualquier valor alfabético, aceptando solo números.
range, conforma en campo de entrada como un rango de números. En este caso se suele representar como un slider en el cual nos permite escoger dicho rango.
datetime, para este tipo de campo de texto se espera que la entrada sea una fecha formada por el día y la hora.
time, lo utilizaremos para poder incluir campos se entrada de información en los cuales solo nos interese que el valor introducido sea una hora.
color, ayuda para poder elegir un color como campo de entrada. Los agentes de usuario o navegadores web suelen mostrar una paleta de colores o campos de entrada RGB para ayudar al usuario a seleccionar el color que desea poner.
file, es utilizado para poder seleccionar un fichero del sistema de ficheros al que tenga acceso el navegador. No realiza ninguna acción sobre el fichero, si bien suele incorporar un buscador sobre el sistema de ficheros, dependiendo del agente de usuario o navegador.

Sintaxis

<input type="tipo"/>

Elemento Padre

input

Ejemplo

<!DOCTYPE html>
<html>
<head>
	<title>Checkbox marcados por defecto</title>
</head>
<body>
	
	<h1>Checkbox marcados por defecto</h1>
	
	<input type="checkbox" value="futbol" id="futbol" name="deportes" checked>
	<label for="futbol">Futbol</label>
	<input type="checkbox" value="baloncesto" id="baloncesto" name="deportes">
	<label for="baloncesto">Baloncesto</label>
	<input type="checkbox" value="ciclismo" id="ciclismo" name="deportes">
	<label for="ciclismo">Ciclismol</label>

</body>
</html>

Artículos

Cálculo de totales y subtotales en Javascript

Manual HTML

Aprende más sobre HTML consultando online o descargando nuestro manual.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Vídeos HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.