Los atributos type de la etiqueta input HTML

Este capítulo describe los diferentes atributos type para la etiqueta input del HTML.

Entrada tipo Text

<input type="text"> define una entrada de texto en una línea para el elemento input.

Código:

<form>
  Nombre:<br>
  <input type="text" name="nombre"><br>
  Apellido:<br>
  <input type="text" name="apellido">
</form>

Muestra:

Nombre:

Apellido:

Entrada tipo Password

<input type="password"> define una campo para contraseñas. Los caracteres en un campo de contraseña están enmascarados, es decir, se muestran como asteriscos o círculos.

Código:

<form>
  Usuario:<br>
  <input type="text" name="usuario"><br>
  Contraseña:<br>
  <input type="password" name="contrasena">
</form>

Muestra:

Usuario:

Contraseña:

Entrada tipo Submit

<input type="submit"> define un botón para el envío de los datos del formulario a una página manejadora. La página manejadora es tipicamente una página en el servidor con un script para recuperar y procesar los datos del formulario enviado. La página menejadora es especificado en el atributo action de la etiqueta <form>.

Código:

<form action="pagina_manejadora">
  Nombre:<br>
  <input type="text" name="nombre"><br>
  Apellido:<br>
  <input type="text" name="apellido"><br><br>
  <input type="submit" value="Enviar Datos">
</form>

Muestra:

Nombre:

Apellido:

Sí se omite el atributo value del botón submit, mustrara un texto predeterminado por el navegador web.

Código:

<form action="pagina_manejadora">
  Nombre:<br>
  <input type="text" name="nombre"><br>
  Apellido:<br>
  <input type="text" name="apellido"><br><br>
  <input type="submit">
</form>

Muestra:

Nombre:

Apellido:

Entrada tipo Reset

<input type="reset"> define un botón de reset que limpia todos los valores del formulario a sus valores iniciales.

Código:

<form action="pagina_manejadora">
  Nombre:<br>
  <input type="text" name="nombre" value="Juan"><br>
  Apellido:<br>
  <input type="text" name="apellido" value="Penas"><br><br>
  <input type="submit" value="Enviar">
  <input type="reset">
</form>

Muestra:

Nombre:

Apellido:

Si cambiamos los valores de las entradas "Nombre" y "Apellido", y despues damos clic en boton "Restablecer" (reset), el formulario se reseteara a los valores iniciales.

Entrada tipo Radio

<input type=""> define un botón de radio. Los botones de Radio permiten al usuario seleccionar un solo elemento de un número limitado de opciontes.

Código:

<form>
  <input type="radio" name="genero" value="hombre" checked=""> Hombre<br>
  <input type="radio" name="genero" value="mujer"> Mujer<br>
  <input type="radio" name="genero" value="otro"> Otro
</form>

Muestra: 

Hombre
Mujer
Otro

Entrada tipo Checkbox

<input type="checkbox"> define un checkbox o caja de chequeo. Un checkbox permite al usuario seleccionar de ninguno a varios opciones de un número limitado de elecciones.

Código:

<form>
  <input type="checkbox" name="oficio1" value="programador"> Programador<br>
  <input type="checkbox" name="oficio2" value="disenador"> Disañador<br>
</form>

Muestra:

Programador
Disañador

Entrada tipo Button

<input type="button"> define un botón.

Codigo:

<input type="button" onclick="alert('Hola mundo')" value="Haz clic aquí">

Muestra: