Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
El formulario es un contenedor que tiene diferentes tipos de elementos de entrada, como campos de texto, botones de envío, botones de radio, casillas de verificación, etc. El formulario de interfaz de usuario semántica se usa para crear el hermoso formulario usando clases de formulario. Se utiliza para mostrar los campos de entrada de usuario relacionados de forma estructurada. En este artículo, discutiremos los tipos de formulario en Semantic-UI.
Tipos de formularios de interfaz de usuario semántica:
- formulario: Esta clase se utiliza para crear el formulario.
Sintaxis:
<form class="ui form"> ..... </form>
Ejemplo 1: el siguiente código demuestra los tipos de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Form Types</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3>Semantic-UI Form Types </h3> </div> <br> <form class="ui form"> <div class="field"> <label> Username </label> <input type="text" placeholder="Username"> </div> <div class="field"> <label> Password </label> <input type="password" placeholder="Password"> </div> <button class="ui button" type="submit"> Login </button> </form> </body> </html>
Producción:
Tipos de formularios de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra los tipos de formulario de interfaz de usuario semántica con más campos de entrada .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3>Semantic-UI Form Types </h3> </div> <br> <form class="ui form"> <h4 class="ui dividing header"> User Details </h4> <div class="field"> <label> Name </label> <div class="two fields"> <div class="field"> <input type="text" placeholder="Username"> </div> <div class="field"> <input type="password" placeholder="Password"> </div> </div> </div> <div class="field"> <label> Address </label> <div class="three fields"> <div class="seven wide field"> <input type="text" placeholder="Address"> </div> <div class="five wide field"> <input type="text" placeholder="Pincode"> </div> <div class="six wide field"> <input type="text" placeholder="City"> </div> </div> </div> <div class="ui segment"> <div class="field"> <div class="ui toggle checkbox"> <input type="checkbox" class="hidden"> <label> I agree to the Terms and Conditions </label> </div> </div> </div> <button class="ui button success" type="submit"> Submit </button> </form> </body> </html>
Producción:
Tipos de formularios de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/form.html#form
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA