Grupos de entrada de formas de espectro

Los grupos de entrada de formularios de Spectre se utilizan para categorizar el campo del formulario, por ejemplo, detalles personales, detalles de facturación. Si el usuario desea adjuntar texto y botón junto con la entrada, agregue la clase de grupo de entrada al contenedor de entrada. Agregue la clase input-group-addon al elemento de texto e input-group-btn al elemento de botón.

Clases de grupos de entrada de formularios:

grupo de entrada: esta clase se utiliza para el campo de entrada en un grupo aplicable en el contenedor de entrada.
input-group-addon: esta clase se utiliza para el campo de entrada en un grupo aplicable en el contenedor de entrada.
input-group-btn: Esta clase se usa para botones en un grupo.

Sintaxis:

<div class="input-group">
    <span class="input-group-addon">...</span>
    <button class="input-group-btn">...</button>
    ...
</div>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>    
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE  Forms Input types Class</strong>
        <br><br>
    </center>
    <form >
        <div class="input-group">
            <div class="input-group">
                <span class="input-group-addon ">
                  Name
                </span>
                <input type="text" class="form-input"
                       placeholder="Name">
            </div>
            <span class="input-group-addon">
              Course
            </span>
              
               <input type="text" class="form-input"
                      placeholder="Course you want">
        </div>
        <br>
        <div class="input-group col-12">
            <span class="input-group-addon">
              Email Id
            </span>
            <input type="text col-6" class="form-input"
                   placeholder="Email Id">
            <button class="btn btn-success input-group-btn col-3">
                             Buy Course
            </button>
        </div>
        <label class="form-checkbox">
            <input type="checkbox">
              <i class="form-icon"></i>
              I agree that the content of the course 
              will not be used for any bad purpose
        </label>
    </form>
</body>
</html>

Producción:

Grupos de entrada de formas de espectro

Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-input-groups

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta