Tamaños de forma de espectro

Spectre Forms Los tamaños de formulario se utilizan para definir el tamaño del formulario dependiendo de la página en la que tenga que cambiar el tamaño del formulario en algún momento. Para controles de entrada y selección más pequeños o más grandes, puede agregar las clases input-sm/input-lg, select-sm/select-lg y label-sm/label-lg a los elementos del formulario.

Formularios Tamaños de formularios Clases:

input-sm: esta clase se utiliza para establecer el campo de entrada pequeño.
input-lg: esta clase se usa para configurar el campo de entrada grande.
select-sm: esta clase se utiliza para establecer el campo de selección pequeño.
select-lg: esta clase se utiliza para configurar el campo de selección grande.
label-sm: esta clase se utiliza para establecer el campo de etiqueta pequeño.
label-lg: esta clase se utiliza para configurar el campo de la etiqueta en grande.

Sintaxis:

 <element class="Form sizes Classes"></element>

Ejemplo 1: En este ejemplo, ingresaremos-sm, lg y label-sm, lg. Del mismo modo, podemos hacer eso en elementos seleccionados.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Forms Class</title>
    <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 Form sizes Class</strong>
        <br>
    </center>
    <form>
              <div class="form-group">
                  <label class="form-label">
                  Name In Small Size:
                </label>
                  <input class="form-input input-sm"
                       type="text"
                       placeholder="Name">
                  <label class="form-label">
                  Name In Large Size:
                </label>
                  <input class="form-input input-lg"
                       type="text"
                       placeholder="Name">
              </div>
            <label class="form-label">
              Gender In Small Size:
            </label>
            <label class="form-radio form-inline">
              <input type="radio"
                     name="gender"
                     class="input-sm">
              <i class="form-icon"></i>Male
            </label>
            <label class="form-radio form-inline">
              <input type="radio"
                     name="gender"
                     class="input-sm">
              <i class="form-icon"></i>Female
            </label>
            <label class="form-label">
              Gender In Large Size:
            </label>
            <label class="form-radio form-inline input-lg">
              <input type="radio"
                     name="gender"
                     class="input-lg">
              <i class="form-icon"></i>Male
            </label>
            <label class="form-radio form-inline input-lg">
              <input type="radio"
                     name="gender"
                     class="input-lg">
              <i class="form-icon"></i>Female
            </label>
         </form>
</body>
 
</html>

Producción:

Formas de espectro Tamaños de forma

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

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