HTML - Etiqueta input

La etiqueta input no necesita una etiqueta de cierre y puede tener varios atributos, que definen el uso de la misma:

  • text
  • password
  • radio
  • checkbox
  • reset
  • submit

HTML - Campos de texto y contraseñas

Estoy seguro que has escuchado bastante sobre ellos, a lo largo del tiempo, en Internet. En realidad los campos de texto son la base de cualquier formulario.

html<input type="text" /><br />
<input type="password" />

Demo


Escribe algo en los campos de arriba para notar la diferencia.

HTML - Checkboxes (Casillas de verificación)

Ideal para ofrecerle al usuario la opción de seleccionar más de una respuesta.

html<input type="checkbox" /> Leche<br />
<input type="checkbox" /> Agua<br />
<input type="checkbox" /> Pan

Demo

Leche
Agua
Pan

HTML - Radio

No me refiero a un radio de música, sino a un pequeño círculo el cual ofrece la posibilidad de escoger una única respuesta para una pregunta.

html<input type="radio" name="sexo" /> Mujer<br />
<input type="radio" name="sexo" /> Hombre

Demo

Mujer
Hombre

HTML - Botones submit

Aquí, tendremos que darle un valor al atributo submit, este es el texto que será mostrado en el botón generado. Si no se especifica ningún texto para el atributo value cada navegador pondrá uno por defecto.

html<input type="submit" value="Enviar" />
<input type="submit" value="Siguiente paso &gt;&gt;" />

Demo

HTML - Botones reset

Aquí, como con el botón submit, tendremos que darle un valor, que será mostrado en el botón generado. Este botón es extremadamente útil en caso de que el usuario complete la mayoría de los campos del formulario con información incorrecta. Le dará la posibilidad de borrar todo y empezar de nuevo.

html<input type="reset" value="Resetear formulario" />
<input type="reset" value="Limpiar campos" />

Demo

HTML Campos de texto y botones - Nota

Debe decirse que estos botones no harán el procesamiento de los datos introducidos. Necesitaras un archivo PHP o Javascript el cual ejecutará la acción deseada una vez que uno de estos botones sea presionado. En el siguiente tutorial profundizaremos mas sobre los atributos que se pueden usar con la etiqueta input y también mostraremos algunas cosas que aun no hemos mencionado.