Forma Bulma – Barcelona Geeks

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.

El marco de Bulma admite y permite a los usuarios crear formularios utilizando los controles de formulario de Bulma. El marco admite elementos de HTML <form> , <button> , <input> , <textarea> y <label> . El usuario puede crear un formulario completo con Bulma, ya que proporciona el mejor diseño de interfaz de usuario. Bulma usa un contenedor de control para mantener el flujo del formulario. Utiliza la clase de campo como un contenedor para agregar espacios iguales entre los elementos del formulario. Hay varias clases utilizadas en los controles de formulario y se analizan a continuación.

Clases de forma de Bulma:

campo: Es un contenedor en el que se utiliza la etiqueta, el control, etc. para crear un formulario.
control: esta clase se utiliza como un contenedor de bloques que consta de elementos de entrada, nivel, área de texto y selección.
etiqueta: esta clase se utiliza para agregar una etiqueta para un elemento de entrada.
entrada: esta clase se utiliza para obtener la entrada de texto del usuario.
textarea: esta clase se utiliza para obtener una entrada de texto grande del usuario.
seleccionar: esta clase se utiliza para seleccionar una opción de una lista en un menú desplegable.
radio: esta clase se usa para agregar botones de radio en forma de Bulma.
botón: esta clase se usa para agregar botones en forma de Bulma.
casilla de verificación: esta clase se usa para agregar una casilla de verificación en el formulario de Bulma para seleccionar entradas de opciones múltiples.

Sintaxis:

<form>
  <div class="field">
    <label class="label">Label</label>
    <div class="control">
      <input class="input" type="text" 
             placeholder="Text input">
      <input class="input" type="radio">
      <input class="input" type="checkbox">
      ....
    </div>
  </div>
</form>

Ejemplo: El siguiente ejemplo ilustra la Forma Bulma.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
    <script src=
"https://use.fontawesome.com/releases/v5.15.4/js/all.js">
    </script>
  </head>
  <body>
    <div class="container box p-6
                has-background-light">
      <h1 class="title has-text-centered
                 has-text-success">
        GeeksforGeeks
      </h1>
      <h2 class="subtitle has-text-centered">
        Sign Up Form
      </h2>
      <form action="">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input" type="text"
                   placeholder="Enter your name" />
          </div>
        </div>
  
        <div class="field">
          <label class="label">Username</label>
          <div class="control has-icons-left
                      has-icons-right">
            <input
              class="input is-success"
              type="text"
              placeholder="Enter your username"
            />
            <span class="icon is-small is-left">
              <i class="fas fa-user"></i>
            </span>
          </div>
        </div>
  
        <div class="field">
          <label class="label">Email</label>
          <div class="control has-icons-left
                      has-icons-right">
            <input
              class="input is-danger"
              type="email"
              placeholder="Enter your email"
            />
            <span class="icon is-small is-left">
              <i class="fas fa-envelope"></i>
            </span>
          </div>
        </div>
  
        <div class="field">
          <label class="label">Password</label>
          <div class="control has-icons-left
                      has-icons-right">
            <input
              class="input is-danger"
              type="password"
              placeholder="Enter your password"
            />
            <span class="icon is-small is-left">
              <i class="fas fa-key"></i>
            </span>
          </div>
        </div>
  
        <div class="field">
          <label class="label">
            Choose your Course
          </label>
          <div class="control">
            <div class="select">
              <select>
                <option>Java</option>
                <option>C++</option>
                <option>Python</option>
              </select>
            </div>
          </div>
        </div>
  
        <div class="field">
          <label class="label">
            Something Else
          </label>
          <div class="control">
            <textarea
              class="textarea"
              placeholder="Want to tell anything?"
            ></textarea>
          </div>
        </div>
  
        <div class="field">
          <div class="control">
            <label class="checkbox">
              <input type="checkbox" />
              I agree to the <a href="#">
              terms and conditions
              </a>
            </label>
          </div>
        </div>
  
        <div class="field">
          <div class="control">
            <label class="radio">
              <input type="radio" 
                     name="question" />
              Yes
            </label>
            <label class="radio">
              <input type="radio" 
                     name="question" />
              No
            </label>
          </div>
        </div>
  
        <div class="field is-grouped">
          <div class="control">
            <button class="button is-success">
              Sign up
            </button>
          </div>
          <div class="control">
            <button class="button is-link is-light">
              Cancel
            </button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

Producción:

Forma Bulma

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta