22. Elementos de formulario

Elementos de formulario

<input>

Es el elemento más básico de los elementos de formulario. Su etiqueta es <input> y se trata de una etiqueta en linea, que trabajará con el espacio requerido, su valor por defecto es de tipo text, pero existen diferentes tipos de inputs.

<input type=»text»>: son los tipos de inputs que se cargan por defecto.
<input type=»checkbox»>: permite seleccionar varias opciones.
<input type=»radio»>: permiten responder de sólo una opción.
<input type=»date»>: dibuja un calendario.
<input type=»color»>: carga los colores que nativamente tenga el sistema operativo.
<input type=»button»>: similar a la etiqueta <button>, es un botón que por sí sólo no va a funcionar. Para ponerle texto a este tipo de input hay que utilizar el atributo value.
<input type=»submit»>: dibuja un botón con un texto por defecto, que dependiendo de nuestro sistema operativo puede estar en español o en inglés, y que dice ‘Enviar’. Cuando este botón está dentro de un formulario, es el que envía los datos del formulario.
<input type=»reset»>: si está dentro de un formulario, cuando se haga clic en él, va a limpiar todos los valores que se hayan introducido en los elementos del formulario.
<input type=»file»>: puede aparecer dibujado de distinta forma dependiendo de cada navegador. Sólo nos permite seleccionar un archivo. Si necesitamos seleccionar más de un archivo incluyendo el atributo multiple que es un atributo booleano, sólo es necesario ponerlo sin valor para que funcione.
<input type=»hidden»>: como su nombre dice, es un tipo de input que visualmente no se va a ver. Sirven para que cuando el formulario se envíe, nosotros como programadores podamos mandar algún valor.
<input type=»email»>: tan sólo permite enviar texto que sea un email, de lo contrario dará error y no permitirá enviar formulario.
<input type=»tel»>: tan sólo permite enviar texto en formato tlfo, de lo contrario no permitirán enviar el formulario.
<input type=»number»>: permite ingresar números, tanto positivos como negativos.
<input type=»password»>: lo que el usuario escribe no se ve.
<input type=»search»>: es especial para hacer búsquedas en nuestras aplicaciones.

<textarea>

Es un elemento de formulario que permite ingresar texto, puede ir acompañado de los atributos cols (columnas) que mostraría el número de columnas que deseamos, y rows (filas) que permite decir cuantas filas deseamos en nuestra <textarea>.

<select>

Los <select> permiten seleccionar entre varias opciones, internamente necesitan una etiqueta <option>. Veamos un ejm.

Ejm

<select name="id" multiple>
  <option value="">HTML</option>
  <option value="">CSS</option>
  <option value="">Javascript</option>
</select>

Este tipo de listas sólo permite elegir una opción, pero igual que al <input type=»file»> le podemos agregar el atributo multiple, el cual nos permitirá agregar más de una opción.