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 su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.
Un formulario es la sección de un documento que contiene una serie de campos de entrada, como campo de texto, contraseña y casilla de verificación, etc.
El formulario de interfaz de usuario semántica se utiliza para crear un formulario atractivo utilizando clases de interfaz de usuario semántica. Es muy fácil diseñar formas atractivas. La variación de tamaño de formulario de interfaz de usuario semántica se utiliza para crear un elemento de formulario en diferentes tamaños.
Clases utilizadas de variación de tamaño de formulario de interfaz de usuario semántica:
- mini: Se utiliza para establecer el tamaño de la imagen en mini.
- tiny: se utiliza para establecer el tamaño de la imagen en minúsculo.
- pequeño: se utiliza para establecer el tamaño de la imagen en pequeño.
- grande: se utiliza para establecer el tamaño de la imagen en grande.
- grande: se utiliza para establecer el tamaño de la imagen en grande.
- enorme: se utiliza para establecer el tamaño de la imagen en enorme.
- masivo: se utiliza para establecer el tamaño de la imagen en masivo.
Sintaxis:
<div class="ui loading form"> ... </div>
Ejemplo 1: en este artículo, describiremos la variación del tamaño del formulario de la interfaz de usuario semántica con tamaños mini, diminuto, pequeño y grande.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Size Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Size Variation</h3> </div> <form class="ui container mini form"> <h4>Mini Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br> <form class="ui container tiny form"> <h4>Tiny Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br> <form class="ui container small form"> <h4>Small Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br> <form class="ui container large form"> <h4>Large Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br><br><br> </body> </html>
Producción:
Ejemplo 2: En este artículo, describiremos la variación del tamaño del formulario de la interfaz de usuario semántica con tamaños grandes, enormes y masivos.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Size Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Size Variation</h3> </div> <form class="ui container big form"> <h4>Big Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br> <form class="ui container huge form"> <h4>Huge Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br> <form class="ui container massive form"> <h4>Massive Size Form</h4> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> <button class="ui button right" type="submit"> Submit </button> </form> <br><br><br><br> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#size
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA