La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery. 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 clase de entrada de interfaz de usuario semántica se utiliza para crear una interfaz de usuario de entrada básica. El estado de enfoque de entrada de interfaz de usuario semántica se utiliza para mostrar el enfoque en el campo de entrada, es decir, representa al usuario que interactúa actualmente con el elemento de formulario.
Estado de enfoque de entrada de interfaz de usuario semántica Clase utilizada:
- foco: esta clase se utiliza para mostrar el foco en el campo de entrada.
Sintaxis:
<div class="ui input focus">
...
</div>
Ejemplo 1: en este ejemplo, describiremos el uso del estado de enfoque de entrada de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Input Focus State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Focus State</h3> <div class="ui input focus"> <input type="text" placeholder="First Name"> </div> <div class="ui input"> <input type="text" placeholder="Last Name"> </div> <br><br> <div class="ui input"> <input type="text" placeholder="Email Id"> </div> <div class="ui input"> <input type="text" placeholder="Password"> </div> </div> </body> </html>
Producción:
Estado de enfoque de entrada de interfaz de usuario semántica
Ejemplo 2: en este ejemplo, describiremos el uso del estado de enfoque de entrada de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Input Focus State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Focus State</h3> <div class="ui input icon focus"> <input type="text" placeholder="User name"> <i class="user icon"></i> </div> <br><br> <div class="ui icon input"> <input type="email" placeholder="Email Id"> <i class="search icon"></i> </div> <br><br> <div class="ui icon input"> <input type="password" placeholder="Password"> <i class="eye icon"></i> </div> </div> </body> </html>
Producción:
Estado de enfoque de entrada de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/input.html#focus