23. Atributos de inputs y formularios

Algunos de los atributos que vamos a ver son necesarios en nuestros formularios, otros los vamos a incluir para hacer nuestras validaciones.

Nota: generalmente los atributos booleanos (los que sólo hay que poner su nombre) siempre van al final.

  • readonly: es un atributo que hace nuestro input de sólo lectura.
  • disabled: inhabilita el elemento, es bueno utilizarlo junto con el atributo readonly.
  • placeholder: es un texto que se incluye en el input para dar una idea al usuario de lo que va a escribir.
  • action: este atributo indica hacia donde se va a enviar nuestro formulario. Si no dispone de este atributo, el formulario se va a autoprocesar.
  • name: es el atributo que da nombre de variable de formulario que se va a dar para cada uno de los inputs cuando se envié el formulario.
  • method: es el atributo que le dice al elemento <form> por qué método tiene que enviar el formulario.
  • autocomplete=»on/off»: hace que se autocomplete o no el input del formulario.
  • required: es un atributo que obliga a rellenar el input.
  • pattern: permite poner un patrón a nuestro input, para ello se debe tener conocimiento de expresiones regulares. Los patrones permiten incluir cierto tipo de información muy concreta en nuestros formularios.
  • title: se utiliza para especificar que quieres poner cuando los usuario no rellenen un campo correctamente.

Métodos de envío

Existen dos métodos de envío de formularios.

  • Método GET: es el método que toma por defecto un formulario, envía por la URL los valores
  • Método POST: envía la información del formulario en las cabeceras del documento, de forma oculta.

<label>

Junto con cada <input> podemos incluir una etiqueta <label> con un atributo for, que lo que hace es que si ponemos un identificador (id) a nuestro input, utilizamos ese nombre de identificador a la etiqueta <label> y vincula ambas etiquetas. Se hace de la siguiente manera.

Ejm

<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario">

Nota: A nivel de accesibilidad, las <label> son importantes.

Scroll al inicio