6.1 Atributo required
La validación de datos en formularios es un aspecto importante del desarrollo web que ayuda a garantizar la corrección e integridad de la información introducida. HTML proporciona muchos atributos incorporados para verificar la entrada de datos, tales como required, pattern, min, max, así como los atributos placeholder y value, que mejoran la interacción del usuario con el formulario.
El atributo required indica que el campo de entrada es obligatorio. El navegador no permitirá enviar el formulario si el campo marcado como required no está completado.
Sintaxis
<input type="text" name="username" required>
Ejemplo de uso
<form action="/" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Enviar</button>
</form>
Explicación
Si el atributo required está especificado, el usuario debe completar el campo antes de enviar el formulario. Si el campo está vacío, el navegador mostrará un mensaje de error y no enviará el formulario.
6.2 Atributo pattern
El atributo pattern permite establecer una expresión regular para comprobar la entrada de datos. Si los datos introducidos no coinciden con el patrón especificado, el navegador mostrará un mensaje de error y no enviará el formulario.
Sintaxis
<input type="text" name="username" pattern="[A-Za-z]{3,}">
Ejemplo de uso
El atributo pattern establece una expresión regular que deben coincidir con los datos introducidos. En este ejemplo, el nombre de usuario debe contener solo letras y tener al menos tres caracteres.
<form action="/" method="post">
<label for="username">Nombre de usuario (solo letras, al menos 3 caracteres):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">Enviar</button>
</form>
6.3 Atributos min y max
Los atributos min y max se utilizan para establecer valores mínimos y máximos permitidos para campos numéricos y de fechas.
Sintaxis
<input type="number" name="age" min="18" max="99">
Ejemplo de uso
Campo numérico
min: establece el valor mínimo permitido. En este ejemplo, la edad mínima es de 18 años.max: establece el valor máximo permitido. En este ejemplo, la edad máxima es de 99 años.
<form action="/" method="post">
<label for="birthday">Fecha de nacimiento (desde 1900-01-01 hasta 2024-12-31):</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">Enviar</button>
</form>
6.4 Atributo placeholder
El atributo placeholder establece un texto de marcador de posición que se muestra dentro del campo de entrada hasta que el usuario comience a ingresar datos. Este atributo ayuda a los usuarios a entender qué datos se esperan en ese campo.
Sintaxis
<input type="text" name="username" placeholder="Introduce el nombre de usuario">
Ejemplo de uso
El atributo placeholder muestra un texto dentro del campo de entrada hasta que el usuario comienza a introducir datos. En este ejemplo, el texto del marcador de posición es "Introduce el nombre de usuario".
<form action="/" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" placeholder="Introduce el nombre de usuario" required>
<button type="submit">Enviar</button>
</form>
6.5 Atributo value
El atributo value establece un valor inicial para el elemento de entrada. Este valor se mostrará en el campo cuando la página se cargue o el formulario se restablezca.
Sintaxis
<input type="text" name="username" value="default user">
Ejemplo de uso
El atributo value establece un valor inicial para el campo de entrada. En este ejemplo, el nombre de usuario por defecto es "default user".
<form action="/" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">Enviar</button>
</form>
GO TO FULL VERSION