Validación de Formularios

Este artículo explica la validación de formularios.

Explica la validación de formularios en HTML.

YouTube Video

Validación de Formularios en HTML

Visión General de la Validación de Formularios en HTML

• La validación de formularios en HTML es un mecanismo para asegurar que los datos cumplan con ciertas condiciones antes de que el usuario los envíe. Esto reduce los errores en el lado del servidor y mejora la experiencia del usuario.

Atributo required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• El atributo required especifica que los campos de entrada deben estar llenos antes de enviar el formulario.

Atributo pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• El atributo pattern se usa para validar si la entrada del formulario coincide con un patrón regex específico. Por ejemplo, esto verifica si el nombre de usuario contiene solo caracteres alfanuméricos.

Atributos min y max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Los atributos <min> y <max> se usan para especificar los valores mínimos y máximos permitidos para un elemento de entrada. Se usan comúnmente con tipos de entrada como number, range y date.
• En este ejemplo, puedes ingresar un número entre 18 y 99.

Atributos minlength y maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• El atributo minlength especifica el número mínimo de caracteres requeridos para un campo de entrada, mientras que el atributo maxlength define el número máximo de caracteres permitidos.
• En este ejemplo, puedes ingresar texto entre 4 y 12 caracteres.

El atributo type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• El atributo type="email" se utiliza para asegurar que la entrada tenga un formato válido de dirección de correo electrónico. Este atributo ofrece una funcionalidad de validación integrada para campos de entrada de direcciones de correo electrónico.

El atributo type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> proporciona un campo de entrada que requiere un formato de URL correcto. El navegador verifica automáticamente si la entrada es válida como una URL.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video