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. 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, casilla de verificación, etc. El formulario de interfaz de usuario semántica se utiliza para crear formularios atractivos utilizando clases de interfaz de usuario semántica. Es muy fácil diseñar formas atractivas.
La variación requerida del campo de formulario de interfaz de usuario semántica se utiliza para mostrar el campo de entrada obligatorio. Esta variación se utiliza para especificar que el campo de entrada debe completarse antes de enviar el formulario.
Campo de formulario de IU semántica Variación requerida Clase utilizada:
- requerido: esta clase se utiliza para mostrar el campo de entrada obligatorio. Establece la estrella (*) en el elemento de la etiqueta.
Sintaxis:
<div class="ui form">
<div class="required field">
...
</div>
</div>
Ejemplo 1: en este ejemplo, describiremos el uso de la variación requerida del campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Field Required 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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Required Variation</h3> </div> <form class="ui container form"> <div class="field required"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field required"> <label>Password</label> <input type="text" name="pwd" placeholder="Enter Password"> </div> <button class="ui button" type="submit"> Submit </button> </form> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, describiremos el uso de la variación requerida del campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Field Required Variation </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 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Required Variation</h3> </div> <form class="ui container form"> <div class="three fields"> <div class="field required"> <label>First Name</label> <input type="text" name="fname" placeholder="Enter First Name"> </div> <div class="field"> <label>Second Name</label> <input type="text" name="sname" placeholder="Enter Second Name"> </div> <div class="field required"> <label>Last Name</label> <input type="text" name="lname" placeholder="Enter Last Name"> </div> </div> <div class="two fields"> <div class="field required"> <label>Email Id</label> <input type="email" name="email" placeholder="Enter Email Id"> </div> <div class="field required"> <label>Mobile No</label> <input type="number" name="number" placeholder="Enter Mobile No"> </div> </div> <div class="field"> <label>Short Notes</label> <textarea></textarea> </div> <button class="ui button" type="submit"> Submit </button> </form> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#required
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA