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 de ancho de campo de formulario de interfaz de usuario semántica se utiliza para establecer el ancho del elemento de campo de entrada de formulario.
Clases utilizadas de variación de ancho de campo de formulario de interfaz de usuario semántica:
- *ancho de número: esta clase se usa para establecer el ancho del elemento de entrada. Podemos establecer el valor del número como: uno, dos, etc.
Sintaxis:
<div class="ui form">
<div class="fields">
<div class="six wide field">
...
</div>
...
</div>
</div>
Ejemplo 1: en este ejemplo, describiremos los usos de la variación de ancho de campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Field Width 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 Width Variation</h3> </div> <form class="ui container form"> <div class="field six wide"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field eight wide"> <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 los usos de la variación de ancho de campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Field Width 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 Width Variation</h3> </div> <form class="ui container form"> <div class="three fields"> <div class="field six wide"> <label>First Name</label> <input type="text" name="fname" placeholder="Enter First Name"> </div> <div class="field four wide"> <label>Second Name</label> <input type="text" name="sname" placeholder="Enter Second Name"> </div> <div class="field six wide"> <label>Last Name</label> <input type="text" name="lname" placeholder="Enter Last Name"> </div> </div> <div class="two fields"> <div class="field nine wide"> <label>Email Id</label> <input type="email" name="email" placeholder="Enter Email Id"> </div> <div class="field seven wide"> <label>Mobile No</label> <input type="number" name="number" placeholder="Enter Mobile No"> </div> </div> <div class="field ten wide"> <label>Short Notes</label> <textarea></textarea> </div> <button class="ui button right" type="submit"> Submit </button> </form> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#width
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA