Contenido del formulario de interfaz de usuario semántica

Posted on by Rudeus Greyrat

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 diferentes elementos para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.

Los formularios nos brindan una forma de recibir información del usuario. Podemos agrupar un conjunto de campos de entrada de diferentes tipos como texto, contraseña, número, etc. en un formulario. Echemos un vistazo a varios Form Content .

Contenido del formulario de interfaz de usuario semántica:

  • Campo : un elemento de campo de la interfaz de usuario semántica contiene una etiqueta y una etiqueta de entrada con un estilo personalizado.
  • Campos : un conjunto de campos se agrupan en uno.
  • Área de texto : un área de texto con estilo de interfaz de usuario semántica permite al usuario ingresar entradas definidas por el usuario.
  • Casilla de verificación : se puede crear una casilla de verificación con estilo de interfaz de usuario semántica en un formulario.
  • Casilla de verificación de radio : se puede crear una casilla de verificación de radio con estilo de interfaz de usuario semántica en un formulario.
  • Menú desplegable : se puede crear un menú desplegable con estilo de interfaz de usuario semántica en un formulario usando JavaScript.
  • Selección múltiple : se puede crear una selección múltiple con estilo de interfaz de usuario semántica en un formulario desde el que el usuario puede seleccionar varias opciones.
  • Selección de HTML : se puede crear un menú desplegable con HTML, cuando la opción de usar JavaScript está deshabilitada.
  • Mensaje : se puede mostrar un mensaje al usuario cuando interactúa con el formulario.

Sintaxis:

<form class="ui form">
    ...    
</form>

Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.

Ejemplo 1: En el siguiente ejemplo, hemos creado un formulario con contenido de campo .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
    <link href=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
 
    <script src=
 "https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
 "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="field">
                <label>Username</label>
                <input type="text"
                       placeholder="Enter Your Username">
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
</body>
</html>

Producción:

Contenido del campo

Ejemplo 2: En el siguiente ejemplo, hemos creado contenido de campos .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="two fields">
                <div class="field">
                    <label>Username</label>
                    <input type="text"
                           placeholder="Enter Your Username">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input type="password"
                           placeholder="Enter Your Password">
                </div>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
</body>
</html>

Producción:

Contenido de los campos

Ejemplo 3: En el siguiente ejemplo, hemos creado un formulario con textarea .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
       <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="field">
                <label>Tell Us about yourself</label>
                <textarea spellcheck="true"></textarea>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
</body>
 
</html>

Producción:

Formulario con área de texto

Ejemplo 4: En el siguiente ejemplo, hemos creado un formulario con casillas de verificación .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
      <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="inline field">
                <label>Select the domains you are experienced in</label>
                <div class="ui checkbox">
                    <input type="checkbox" tabindex="0" class="hidden">
                    <label>Python</label>
                </div>
                <div class="ui checkbox">
                    <input type="checkbox" tabindex="0" class="hidden">
                    <label>Node.js</label>
                </div>
                <div class="ui checkbox">
                    <input type="checkbox" tabindex="0" class="hidden">
                    <label>React</label>
                </div>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
 
    <script>
        $('.ui.checkbox').checkbox();
    </script>
</body>
</html>

Producción:

Formulario con casilla de verificación

Ejemplo 5: En el siguiente ejemplo, hemos creado un formulario con casillas de verificación de radio .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
       <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="inline fields">
                <label for="gender">Gender:</label>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="gender"
                               checked="" tabindex="0"
                               class="hidden">
                        <label>Male</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="gender"
                               tabindex="0" class="hidden">
                        <label>Female</label>
                    </div>
                </div>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
 
    <script>
        $('.ui.radio.checkbox').checkbox();
    </script>
</body>
</html>

Producción:

Formulario con casillas de radio

Ejemplo 6: En el siguiente ejemplo, hemos creado un formulario con un menú desplegable .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="ui selection dropdown">
                <input type="hidden" name="language">
                <i class="dropdown icon"></i>
                <div class="default text">
                      Select your favourite language
                  </div>
                <div class="menu">
                    <div class="item" data-value="0">Java</div>
                    <div class="item" data-value="1">Python</div>
                    <div class="item" data-value="2">JavaScript</div>
                    <div class="item" data-value="3">C++</div>
                </div>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
 
    <script>
        $('.dropdown').dropdown();
    </script>
 
</body>
</html>

Producción:

Formulario con desplegable

Ejemplo 7: En el siguiente ejemplo, hemos creado un formulario con selección múltiple .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
       <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="ui field">
                <label>Languages</label>
                <select multiple="" class="ui dropdown">
                    <option value="">
                          Select the languages you are familiar with
                      </option>
                    <option value="Java">Java</option>
                    <option value="Python">Python</option>
                    <option value="Node.js">Node.js</option>
                    <option value="React">React</option>
                    <option value="MongoDb">MongoDb</option>
                    <option value="SQL">SQL</option>
                </select>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
 
    <script>
        $('.dropdown').dropdown();
    </script>
</body>
</html>

Producción:

Formulario con selección múltiple

Ejemplo 8: En el siguiente ejemplo, hemos creado un formulario con HTML Select .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
       <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form">
            <div class="ui field">
                <label>Languages</label>
                <select>
                    <option value="">
                          Select the languages you are familiar with
                      </option>
                    <option value="Java">Java</option>
                    <option value="Python">Python</option>
                    <option value="Node.js">Node.js</option>
                    <option value="React">React</option>
                    <option value="MongoDb">MongoDb</option>
                    <option value="SQL">SQL</option>
                </select>
            </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
</body>
</html>

Producción:

Formulario con selección HTML

Ejemplo 9: En el siguiente ejemplo, hemos creado un formulario con un mensaje de éxito.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Form Content</title>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Form Content</h4>
        <hr>
        <br />
        <div class="ui form success">
            <div class="two fields">
                <div class="field">
                    <label>Username</label>
                    <input type="text"
                           placeholder="Enter Your Username">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input type="password"
                           placeholder="Enter Your Password">
                </div>
            </div>
            <div class="ui success message">
                <div class="header">Submitted Successfully</div>
                 
 
 
<p>Form has been submitted Successfully.</p>
 
 
 
              </div>
            <div class="ui submit button">Submit</div>
        </div>
    </div>
</body>
</html>

Producción:

Formulario con un mensaje de éxito

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

Publicación traducida automáticamente

Artículo escrito por coder_srinivas 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 *