Spectre Forms Estilos de validación de formularios

La clase de estilos de validación de Spectre Forms se utiliza para diseñar el formulario. Para usar estilos de validación de formularios, puede agregar la clase is-success o is-error a los controles. Agregue la clase tiene éxito o tiene error a los elementos principales. Utilice la clase form-input-hint para proporcionar mensajes de error y éxito en la validación de formularios.

Formularios Estilos de validación de formularios Clases:

is-success: esta clase se utiliza para establecer el color verde en el elemento.
is-error: esta clase se usa para establecer el color verde rojo en el elemento.
tiene éxito: esta clase se utiliza para establecer el color verde en el elemento.
tiene-error: esta clase se usa para establecer el color rojo en el verde del elemento.
form-input-hint: esta clase se utiliza para establecer el texto difuminado.

Sintaxis:

 <div class="has-success">
     <input class="...is-success"..>
     <p class="form-input-hint">...</p>
 </div>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>    
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE  Forms Input types Class</strong>
        <br><br>
    </center>
    <form >
        <div class="input-group">
            <div class="input-group">
                <span class="input-group-addon ">
                  Username
                </span>
                <input type="text"
                       class="form-input is-success"
                       placeholder="Username"
                       value="Mastermind@Pubg">
                </div>
                <span class="input-group-addon">
                  Password
                </span>
                  
                <input type="text"
                       class="form-input is-error"
                       placeholder="Password"
                       value="********">
            </div>
            <br>
            <div class="input-group col-12">
                <span class="input-group-addon">
                  Email Id
                </span>
                <input type="text col-6"
                       class="form-input is-success"
                       placeholder="Email Id"
                       value="mastermind@gmail.com">
                <button class="btn btn-success 
                               input-group-btn
                               col-3">
                                 LogIn
                </button>
            </div>
            <label class="form-checkbox">
                  <input type="checkbox">
                  <i class="form-icon"></i>
                  I agree that the content of the course 
                  will not be used for any bad purpose
            </label>
            <p>
                <span class="text-error">
                  Incorrect Password
                </span>
                Password hint:
                <span class="form-input-hint">
                 Your First School Friend
                </span>
            </p>
  
        </div>
    </form>
</body>
  
</html>

Producción:

Spectre Forms Estilos de validación de formularios

Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-validation

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta