Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “Entradas”. Las entradas se utilizan para varios propósitos en una página web. Es útil para tomar información del usuario en tiempo real y guardarla en una base de datos. Dependiendo de los requisitos del uso de insumos, existen diferentes estados de insumos. Uno de ellos es el estado de error.
El estado de error de entrada de la interfaz de usuario semántica se utiliza para mostrar una entrada como un error predeterminado de acuerdo con sus requisitos. Puede haber un flujo de datos incorrectos en las entradas que el usuario necesita saber. Aquí es cuando el estado de error es útil.
Clase de estado de error de entrada de interfaz de usuario semántica:
- error: esta clase se utiliza para especificar el estado de error de las entradas.
Sintaxis:
<div class="ui error input"> <input type="text" placeholder=""> ......... </div>
Ejemplo 1: este ejemplo demuestra el estado de error de entrada utilizando la clase de error. Puede ver el resultado en la imagen a continuación que muestra la entrada de error etiquetada.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Input Error State</p> </b> <hr> <br /> <div class="ui labeled error input"> <div class="ui label"> Error Input </div> <input type="text" placeholder="Enter your text"> </div> </div> </body> </html>
Producción:
Estado de error de entrada de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra el estado de error de entrada utilizando la clase de error. Puede ver el resultado en la imagen a continuación, que muestra diferentes entradas de error.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Input Error State</p> </b> <hr> <br /> <strong></strong> <strong>Error State text input : </strong> <div class="ui error input"> <input type="text" placeholder="Enter your name here" /> </div> <br /><br /> <strong>Error State date input : </strong> <div class="ui error input"> <input type="date" /> </div> <br /><br /> <strong>Error State local date input :</strong> <div class="ui error input"> <input type="datetime-local" /> </div> <br /><br /> <strong>Error State email input :</strong> <div class="ui error input"> <input type="email" placeholder="email" /> </div> <br /><br /> <strong>Error State password input : </strong> <div class="ui error input"> <input type="password" placeholder="password" /> </div> </div> </body> </html>
Salida: Puede ver que las entradas están en color rojo como se muestra en la imagen a continuación. Esto muestra que algo anda mal con esta entrada y alerta al usuario al respecto.
Estado de error de entrada de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/input.html#error
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA