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