Lección 13. Atributos de Formularios.

Los inputs pueden tener diferentes atributos que permiten configurar su comportamiento, validación y forma en que aceptan los datos del usuario.

Estos atributos ayudan a crear formularios más seguros, controlados y funcionales.

Atributo required._

El atributo required obliga al usuario a llenar el campo antes de poder enviar el formulario.

Copiar código
<input type="text" required>

Si el usuario intenta mandar el formulario vacío, el navegador mostrará un mensaje automático.

Nota: El atributo required es un atributo booleano.

Atributo placeholder._

El atributo placeholder muestra un texto guía dentro del input, útil para indicar un texto descriptivo qué debe escribirse.

Copiar código
<input type="text" placeholder="Escribe tu nombre">

Atributos min, max, maxlength y pattern._

Estos atributos ayudan a controlar qué datos son válidos dentro del input.

Ejemplo usando number:

Copiar código
<input type="number" min="1" max="10">

Ejemplo usando maxlength:

Copiar código
<input type="text" maxlength="5">

Ejemplo usando pattern, validando solo letras:

Copiar código
<input type="text" pattern="[A-Za-z]+">

Si el valor no coincide con el pattern, el formulario no se enviará.

Atributos disabled y readonly._

disabled -> Inhabilita el campo completamente, no puede recibir foco ni enviarse al formulario.

readonly -> El usuario NO puede modificar el contenido, pero sí se envía al formulario.

Copiar código
<input type="text" value="Bloqueado" disabled>
<input type="text" value="Solo lectura" readonly>

Atributo autocomplete._

Permite activar o desactivar la autocompletación del navegador.

Copiar código
<input type="email" autocomplete="off">

Atributo multiple._

Permite seleccionar más de un valor en ciertos tipos de inputs, como file y email.

Copiar código
<input type="file" multiple>

Atributos id y name._

El atributo id identifica de manera única al input dentro del documento.

El atributo name define el nombre de la variable que se enviará al servidor.

Copiar código
<input type="text" id="usuario" name="usuario">