¿Cómo crear una validación de formulario usando solo HTML?

En desarrollo web, a menudo usamos JavaScript con HTML para validar el formulario, pero también podemos hacer lo mismo a través de HTML de las siguientes maneras.

HTML <entrada> Atributo requerido : En la etiqueta de entrada de HTML, podemos especificar a través de «atributo requerido» . Informa al navegador (compatible con HTML5) que el campo no se puede dejar en blanco. Los navegadores varían en términos de esta implementación, algunos navegadores muestran una sombra en el cuadro o algunos muestran una advertencia.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Form</title>
</head>
  
<body>
    <p>This is a form</p>
    <form>
        <p>Name:</p>
        <input type="text" required>
        <p>Email:</p>
        <input type="email" required>
        <p>Address:</p>
        <input type="text" required>
        <br>
        <button style="margin-top: 5px;">
          Submit
        </button>
    </form>
  
</body>
  
</html>

Producción:

Atributo de tipo HTML <input> : en la etiqueta de entrada, si requerimos que el usuario ingrese su ID de correo electrónico, podemos establecer el atributo de tipo en correo electrónico, lo mismo se aplica al número, la fecha o la URL. Similar al atributo requerido, diferentes navegadores tienen diferentes implementaciones.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Form</title>
</head>
  
<body>
    <p>This is a form</p>
    <form>
        <p>URL:</p>
        <input type="url">
        <p>Email:</p>
        <input type="email">
        <p>Phone Number:</p>
        <input type="number">
        <br>
        <button style="margin-top: 5px;">
          Submit
        </button>
    </form>
  
</body>
  
</html>

Producción:

Atributo de patrón HTML <input> : Ya lo sabemos, además de usar reglas predeterminadas, también podemos establecer nuestras reglas en cuanto al patrón de URL, fecha o precio, etc.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Form</title>
</head>
  
<body>
    <p>This is a form</p>
    <form>
        <p>URL:</p>
        <input type="url" pattern="https?://.+">
        <p>Date1:</p>
        <input type="date" 
               pattern="\d{2, 1}/\d{2, 1}/\d{4}">
        <br>
        <button style="margin-top: 5px;">
          Submit
        </button>
    </form>
</body>
  
</html>

Publicación traducida automáticamente

Artículo escrito por imarchit19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta