Variaciones de formulario de interfaz de usuario semántica

Posted on by Rudeus Greyrat

Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS ​​y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un sitio web hermoso. Se utiliza un formulario de interfaz de usuario semántica para crear el formulario utilizando las clases de formulario para mostrar los campos de entrada de usuario relacionados de forma estructurada.

En este artículo, discutiremos las variaciones de forma en la interfaz de usuario semántica.

Variaciones de formulario de interfaz de usuario semántica:

  • tamaño : esta variación se utiliza para crear formas de diferentes tamaños.
  • formulario de ancho igual : esta variación se utiliza para dividir campos automáticamente a un ancho igual.
  • invertido : Esta variación se utiliza para invertir los colores del formulario.

Clases de variaciones de formulario de interfaz de usuario semántica:

  • mini: esta clase se utiliza para crear un formulario de tamaño mini.
  • tiny: Esta clase se utiliza para crear un formulario de tamaño minúsculo.
  • small: Esta clase se utiliza para crear un formulario de tamaño pequeño.
  • grande: esta clase se utiliza para crear un formulario de gran tamaño.
  • big: esta clase se utiliza para crear un formulario de gran tamaño.
  • enorme: esta clase se utiliza para crear un formulario de gran tamaño.
  • masivo: esta clase se utiliza para crear un formulario de tamaño masivo.
  • formulario de igual ancho: esta clase se utiliza para crear los campos de igual ancho de un formulario.
  • invertido: esta clase se utiliza para invertir el color de fondo del formulario.

Sintaxis: 

<div class="ui Form-Variations-Class form">
   ....
</div>

Ejemplo 1: el siguiente código demuestra la variación del tamaño del formulario de la interfaz de usuario semántica.

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI Form Variations </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 class="ui header green"> GeeksforGeeks </h2>
        <h3> Semantic-UI Form Variations - Size </h3>
 
        <div class="ui mini form">
          <h4> Mini Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui tiny form">
          <h4> Tiny Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui small form">
          <h4> Small Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui large form">
          <h4> Large Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui huge form">
          <h4> Huge Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui massive form">
          <h4> Massive Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
    </div>
</body>
</html>

Producción:

Variación del tamaño del formulario de interfaz de usuario semántica.

Ejemplo 2: El siguiente código demuestra la variación de forma de ancho igual del formulario de interfaz de usuario semántica.

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI Form Variations </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 class="ui header green"> GeeksforGeeks </h2>
        <h3> Semantic-UI Form Variations - Equal Width Form </h3>
 
        <div class="ui equal width form">
          <div class="fields">
            <div class="field">
              <label> First Name: </label>
              <input type="text"
                     placeholder="Enter First name">
            </div>
            <div class="field">
              <label> Last Name: </label>
              <input type="text"
                     placeholder="Enter Last name">
            </div>
          </div>
 
          <div class="fields">
            <div class="field">
              <label> Email: </label>
              <input type="text"
                     placeholder="Enter email">
            </div>
            <div class="field">
              <label> Mobile: </label>
              <input type="text"
                     placeholder="Enter mobile number">
            </div>
            <div class="field">
              <label> City: </label>
              <input type="text"
                     placeholder="Enter city">
            </div>
          </div>
           
        </div>
    </div>
</body>
</html>

Producción:

Variación de formulario de igual ancho de formulario de interfaz de usuario semántica

Ejemplo 3: El siguiente código demuestra la variación invertida del formulario Semantic-UI.

HTML

<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI Form Variations </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 class="ui header green"> GeeksforGeeks </h2>
        <h3> Semantic-UI Form Variations - Inverted </h3>
 
        <div class="ui inverted segment">
          <div class="ui inverted form">
            <div class="two fields">
              <div class="field">
                <label> Username: </label>
                <input type="text"
                       placeholder="Enter Username" >
              </div>
 
              <div class="field">
                <label> Password: </label>
                <input type="text"
                       placeholder="Enter Password" >
              </div>
            </div>
            <div class="ui button"> Login </div>
          </div>
        </div>
    </div>
</body>
</html>

Producción:

Variación invertida de formulario de interfaz de usuario semántica

Referencia: https://semantic-ui.com/collections/form.html

Publicación traducida automáticamente

Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *